From 556a5888d1091c5fb1d202d911941941d0bba9c8 Mon Sep 17 00:00:00 2001 From: Nick Bowler Date: Mon, 14 Jun 2021 20:42:41 -0400 Subject: [PATCH] Use a denser style for gallery images. Let's try some fancy modern grid styles to get more on the screen when possible. --- content/style.scss | 11 +++++++++++ content/weblog/eclipse-20210610.md | 8 ++++---- layouts/default.xsl | 29 +++++++++++++++++++++++++++-- lib/helpers.rb | 12 ++++-------- 4 files changed, 46 insertions(+), 14 deletions(-) diff --git a/content/style.scss b/content/style.scss index a5cffbe..04736d8 100644 --- 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 2563fb1..96b793f 100644 --- 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: < -<%= item_to_img(@items["/images/eclipse-20210610-max.jpg"], caption: < -<%= item_to_img(@items["/images/eclipse-20210610-clouds.jpg"], caption: < -<%= item_to_img(@items["/images/eclipse-20210610-farewell.jpg"], caption: < diff --git a/layouts/default.xsl b/layouts/default.xsl index 2e14ce8..7325708 100644 --- a/layouts/default.xsl +++ b/layouts/default.xsl @@ -412,8 +412,9 @@ - + @@ -426,6 +427,30 @@ + + + + + + + + +
+ + + +
+ + + + + + + diff --git a/lib/helpers.rb b/lib/helpers.rb index cc0bf04..77916dd 100644 --- 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 << " ⁠" - xml.small { - xml << caption - } + xml.small { xml << caption } end } end -- 2.43.0