port image embed improvements from cushaw

adaptation-gardening · Feb 17, 2025 · 95e5525 · 95e5525
1 parent c6ee350
commit 95e5525
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 30 deletions.
diff --git a/_includes/embed_image.html b/_includes/embed_image.html
@@ -6,41 +6,71 @@
 {% endcomment %}
 
 {%- assign img-style = false -%}
-{%- assign img-link = false -%}
+{%- assign img-src   = false -%}
+{%- assign img-link  = false -%}
+{%- assign display-mode  = false -%}
 
 {%- if include.width or include.height -%}
     {%- assign img-style = true -%}
 {%- endif -%}
 
-{%- if include.link -%}
-    {%- assign img-link = include.link -%}
-{%- elsif include.thumbnail == "true" -%}
-    {%- capture img-link -%}{{ site.baseurl }}/{{ include.url }}{%- endcapture -%}
-{%- endif -%}
 {% comment %}
+    For links that begin with http, they are used as-is. Other links are assumed to be
+    internal and are parsed with the url filter.
+
     If the link parameter is used, the URL will be set to its contents. If the
     thumbnail parameter has been used, the URL will automatically be set to the original
     image. Otherwise, no link will be generated for the image.
 {% endcomment %}
 
-{% if include.caption %}
-<figure class="image-figure {% if include.thumbnail == "true" %} thumbnail{%- endif -%}">
+{%- assign downcase-src = include.src | downcase -%}
+{%- if downcase-src contains "http" -%}
+    {%- assign img-src = downcase-src -%}
+{%- else -%}
+    {% assign img-src = downcase-src | relative_url %}
 {%- endif -%}
+
+{%- if include.link -%}
+    {%- assign downcase-link = include.link | downcase -%}
+    {%- if downcase-link contains "http" -%}
+        {%- assign img-link = downcase-link -%}
+    {%- else -%}
+        {% assign img-link = downcase-link | relative_url %}
+    {%- endif -%}
+{%- elsif include.mode == "thumbnail" or include.mode == "gallery" -%}
+    {%- assign img-link = img-src -%}
+    {%- assign display-mode = {{include.mode}} -%}
+{%- endif -%}
+
+<div class="image-figure-wrap {%- if display-mode %} {{display-mode}}{%- endif -%}">
+
+    <figure class="image-figure {% if include.caption %}captioned{%- endif -%}">
 {%- if img-link -%}
-    <a href="{{- img-link -}}">
+        <a href="{{- img-link -}}">
 {%- endif -%}
-        <img
-            src="{{ site.baseurl }}/{{ include.url }}"
-            alt="{%- if include.alt -%}{{- include.alt -}}{%- else -%}WARNING: ALT TEXT NOT FOUND{%- endif -%}"
-            class="content-image-figure"
-            {%- if img-style == true %}
-                style="{%- if include.width -%}width: {{- include.width -}};{%- endif -%}{%- if include.height -%}height: {{- include.height -}};{%- endif -%}"
-            {% endif -%}
-        >
+            <img
+                src="{{- img-src -}}"
+                alt="{%- if include.alt -%}{{- include.alt -}}{%- else -%}WARNING: ALT TEXT NOT FOUND{%- endif -%}"
+                class="content-image-figure"
+                {%- if img-style == true %}
+                    style="{%- if include.width -%}width: {{- include.width -}};{%- endif -%}{%- if include.height -%}height: {{- include.height -}};{%- endif -%}"
+                {% endif -%}
+            >
 {%- if img-link -%}
-    </a>
+        </a>
 {%- endif -%}
+
 {% if include.caption %}
-    <figcaption class="image-caption">{{-include.caption-}}</figcaption>
-</figure>
-{%- endif -%}
+        <figcaption class="image-caption">
+{%- if img-link -%}
+            <a href="{{- img-link -}}">
+{%- endif -%}
+                {{-include.caption-}}
+{%- if img-link -%}
+            </a>
+{%- endif -%}  
+        </figcaption>
+{%- endif -%}
+
+    </figure>
+</div>
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
@@ -94,7 +94,7 @@ ul.nav-list .nav-list-item .nav-list-link {
 .main-content h1 {
     font-size: 2.8em !important;
     font-weight: 400;
-    clear: right; // keeps border line from overlapping floating images
+    clear: both; // keeps border line from overlapping floating images
     color: $adaptation-purple;
 }
 
@@ -115,24 +115,49 @@ ul.nav-list .nav-list-item .nav-list-link {
 }
 
 .main-content {
-
-    figure {
+    div.image-figure-wrap {
         padding: 0;
+      }
+
+    figure.captioned {
         background-color: $adaptation-tan;
+    }
 
+    figure {
+        padding: 0;
+
+        img {
+            height: 100%;
+            width: 100%;
+            object-fit: contain;
+          }
+
         figcaption {
             padding: 0 0.4rem 0.4rem 0.4rem;
             font-size: 0.9rem;
             line-height: 0.9;
+            color: $blue-dark;
+
+            a {
+              text-decoration: none;
+              color: $blue-dark;
+
+              &:hover {
+                text-decoration: underline;
+              }
+            }
         }
     }
-
+}
+
 
+p.note-title > p:first-child, blockquote.note-title > p:first-child {
+	font-size: 0.9rem;
 }
 
 hr {
     background-color: $adaptation-tan;
-    clear: right; // clear floating images
+    clear: both; // clear floating images
 }
 
 footer {
@@ -145,18 +170,20 @@ footer {
     width: calc(33% - 1rem);
 }
 
-.clear-right {
-    clear: right;
+.gallery {
+    float: left;
+    margin: 0.5rem 0.5rem 0.5rem 0;
+    width: calc(33% - 1rem);
 }
 
 blockquote, p.note, p.warning, p.important, p.idea {
-    clear: right;           // callouts will appear below floating photos, like h1 and h2
+    clear: both;           // callouts will appear below floating photos, like h1 and h2
     border-radius: unset;   // match goingtoseed.org
     box-shadow: unset;      // match goingtoseed.org
 }
 
 div.language-plaintext {
-    clear: right;
+    clear: both;
 }
 
 // Print-only styles.