]> git.draconx.ca Git - homepage.git/commitdiff
projects / homepage.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 86d0dac)
Use a denser style for gallery images.
authorNick Bowler <nbowler@draconx.ca>
Tue, 15 Jun 2021 00:42:41 +0000 (20:42 -0400)
committerNick Bowler <nbowler@draconx.ca>
Tue, 15 Jun 2021 00:55:32 +0000 (20:55 -0400)
Let's try some fancy modern grid styles to get more on the
screen when possible.

content/style.scss patch | blob | history
content/weblog/eclipse-20210610.md patch | blob | history
layouts/default.xsl patch | blob | history
lib/helpers.rb patch | blob | history

diff --git a/content/style.scss b/content/style.scss
index a5cffbed589639802d58df42e7c676ce3c766e36..04736d84fd4f61ade054a2b8d7eeb7a0ae63bc30 100644 (file)
--- a/content/style.scss
+++ b/content/style.scss
@@ -52,6 +52,17 @@ h1 { @include header_size(60em, 2em); }
 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;
 
diff --git a/content/weblog/eclipse-20210610.md b/content/weblog/eclipse-20210610.md
index 2563fb10a4f3068a143b58a3b271f3bfe9137462..96b793f2a91a760550fb15fe3dec8b3f777bb8a2 100644 (file)
--- a/content/weblog/eclipse-20210610.md
+++ b/content/weblog/eclipse-20210610.md
@@ -8,19 +8,19 @@ published: 2021-06-13T23:43:47-0400
 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
 ) %>
diff --git a/layouts/default.xsl b/layouts/default.xsl
index 2e14ce8e29fa93cb737624d069474c95548040db..7325708557a89089d76469a80a5fb11b9f78f610 100644 (file)
--- a/layouts/default.xsl
+++ b/layouts/default.xsl
@@ -412,8 +412,9 @@
   </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'>
@@ -426,6 +427,30 @@
   </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>
diff --git a/lib/helpers.rb b/lib/helpers.rb
index cc0bf046b6beb8e89c1950c8021ab8061c21ff8a..77916dd29492582da2081c4a4a116b7e32105ee1 100644 (file)
--- a/lib/helpers.rb
+++ b/lib/helpers.rb
@@ -82,10 +82,8 @@ def img_rep_fallback(item, rep)
     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
@@ -98,12 +96,10 @@ def item_to_img(item, rep: :large, alt: nil, caption: nil)
 
     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 << " &#x2060;"
-                xml.small {
-                    xml << caption
-                }
+                xml.small { xml << caption }
             end
         }
     end
The draconx.ca web site.