h2 { @include header_size(60em, 1.5em); }
h5 { @include header_size(60em, 1em); }
+@supports (display: grid) {
+ .gallery {
+ display: grid;
+ grid-column-gap: 1em;
+ grid-template-columns: repeat( auto-fill, minmax(18em, 1fr) );
+ align-items: center;
+
+ p.img { margin: 0.5em 0; }
+ }
+}
+
p.img {
text-align: center;
On June 10, 2021, I tried to take some photos of the sun, but the moon
kept getting in the way.
-<%= item_to_img(@items["/images/eclipse-20210610-sunrise.jpg"], caption: <<EOF
+<%= gallery_img(@items["/images/eclipse-20210610-sunrise.jpg"], caption: <<EOF
Typical Ottawa: a perfectly nice day except for that one stupid cloud in the sky.
EOF
) %>
-<%= item_to_img(@items["/images/eclipse-20210610-max.jpg"], caption: <<EOF
+<%= gallery_img(@items["/images/eclipse-20210610-max.jpg"], caption: <<EOF
I told the cloud that I called by-law and will stand here until they come.
EOF
) %>
-<%= item_to_img(@items["/images/eclipse-20210610-clouds.jpg"], caption: <<EOF
+<%= gallery_img(@items["/images/eclipse-20210610-clouds.jpg"], caption: <<EOF
But the cloud came back, the very next hour.
EOF
) %>
-<%= item_to_img(@items["/images/eclipse-20210610-farewell.jpg"], caption: <<EOF
+<%= gallery_img(@items["/images/eclipse-20210610-farewell.jpg"], caption: <<EOF
I will follow this cloud home if I have to!
EOF
) %>
</xsl:if>
</xsl:template>
-<xsl:template match='xhtml:p[count(*)=1 and normalize-space(text())=""
- and descendant::xhtml:img]'>
+<xsl:template name='imgpara' match='xhtml:p[count(*)=1]
+ [normalize-space(text())=""]
+ [descendant::xhtml:img]'>
<xsl:copy>
<xsl:apply-templates select='@*[local-name() != "class"]' />
<xsl:attribute name='class'>
</xsl:copy>
</xsl:template>
+<xsl:key name='gallery'
+ match='xhtml:html/xhtml:p[descendant::*[@generate-gallery]]'
+ use='generate-id(
+ ( ( preceding-sibling::*[not(descendant::*[@generate-gallery])][1]
+ /following-sibling::* ) | self::* ) [1])' />
+
+<xsl:template match='@generate-gallery' />
+<xsl:template match='xhtml:html/xhtml:p[descendant::*[@generate-gallery]]' />
+<xsl:template match='xhtml:html/xhtml:p[key("gallery", generate-id(.))]'>
+ <xsl:variable name='images' select='key("gallery", generate-id(.))' />
+ <xsl:choose>
+ <xsl:when test='count($images) > 1'>
+ <div class='gallery'>
+ <xsl:for-each select='$images'>
+ <xsl:call-template name='imgpara' />
+ </xsl:for-each>
+ </div>
+ </xsl:when>
+ <xsl:otherwise>
+ <xsl:call-template name='imgpara' />
+ </xsl:otherwise>
+ </xsl:choose>
+</xsl:template>
+
<xsl:template match='/'>
<html>
<head>
return :large
end
-def item_to_img(item, rep: :large, alt: nil, caption: nil)
- unless item
- return "[image not found]"
- end
+def gallery_img(item, rep: :large, alt: nil, caption: nil)
+ return "[image not found]" unless item
alt ||= item[:title]
caption ||= alt
b = Nokogiri::XML::Builder.new do |xml|
xml.a(:href => item_uri(item, rep: :info)) {
- xml.img(attrs)
+ xml.img(attrs, "generate-gallery" => "generate-gallery")
unless caption.empty?
xml << " ⁠"
- xml.small {
- xml << caption
- }
+ xml.small { xml << caption }
end
}
end