Add Caption and Links to img/imgswap

Jieiku · Aug 24, 2024 · 559e2c1 · 559e2c1
1 parent 9e052f0
commit 559e2c1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 97 deletions.
diff --git a/content/overview-images/index.md b/content/overview-images/index.md
@@ -19,8 +19,9 @@ This post covers the **imgswap and img shortcodes**. Images can also be embedded
 # img Shortcode
 
 - src is the path and filename of the image. (mandatory)
-- class sets a class for the image. (optional)
+- class sets a class for the image.
 - alt sets the alt note for the image.
+- link sets a hyperlink for the image.
 - w is the width of the image.
 - h is the height of the image.
 
@@ -34,23 +35,23 @@ Optional Classes:
 
 ## Usage (same path)
 ```rs
-{{/* img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy") */}}
+{{/* img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") */}}
 ```
 **Output**
 ```html
-{{ img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy") }}
+{{ img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }}
 ```
-{{ img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy") }}
+{{ img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }}
 
 ## Usage (relative path ./)
 ```rs
-{{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello") */}}
+{{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") */}}
 ```
 **Output**
 ```html
-{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello") }}
+{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") }}
 ```
-{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello") }}
+{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") }}
 
 ## Usage (root path /)
 ```rs
@@ -77,8 +78,9 @@ When you hover your mouse over the image it will display the image to compare.
 
 - main_src is the path and filename for the default image. (mandatory)
 - swap_src is the path and filename for the swap image. (mandatory)
-- class sets a class for the image. (optional)
+- class sets a class for the image.
 - alt sets the alt note for the image.
+- link sets a hyperlink for the image.
 - w is the width of the image.
 - h is the height of the image.
 

diff --git a/sass/abridge.scss b/sass/abridge.scss
@@ -849,6 +849,17 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
     border: 0;
     overflow: hidden;
   }
+  .fi {//figure for images
+    display: inline-block;
+    img {
+      border: 1px solid var(--c4);
+      vertical-align: top;
+    }
+    figcaption {
+      padding-bottom: var(--s1);
+      text-align: center;
+    }
+  }
 }
 @if $table {
   table {
@@ -1004,16 +1015,11 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
 @if $scroller {
   // https://github.com/picocss/pico
   // Wrapper to make any content responsive across all viewports
-  figure {
+  figure {//figure for scroller
     display: block;
     margin: 0;
     padding: 0;
     overflow-x: auto;
-
-    figcaption {
-      padding: var(--s1) 0;
-      color: var(--c4);
-    }
   }
 }
 @if $button {
@@ -1474,10 +1480,6 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
   .z-constant.z-other {//, .z-constant.z-character
     color: var(--h4);
   }
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-variable.z-member {
-  //    color: var(--h3);
-  //}
   // use, crate, let, etc.
   .z-keyword {//, .z-keyword.z-operator.z-word
     color: var(--h8);
@@ -1502,10 +1504,6 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
   .z-punctuation.z-definition.z-annotation {
     color: var(--h1);
   }
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-variable.z-other.z-dollar.z-only.z-js, .z-variable.z-other.z-object.z-dollar.z-only.z-js, .z-variable.z-type.z-dollar.z-only.z-js, .z-support.z-class.z-dollar.z-only.z-js {
-  //    color: var(--h6);
-  //}
   // const, pub, mut, Self, fn
   .z-storage {
     color: var(--h8);
@@ -1522,11 +1520,6 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
   .z-entity.z-name {//, .z-entity.z-name.z-label
     color: var(--h5);
   }
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-entity.z-other.z-inherited-class {
-  //    color: var(--h8);
-  //    text-decoration: underline;
-  //}
   //  v1   (fn lookup(v1))
   .z-variable.z-parameter {
     color: var(--h4);
@@ -1557,25 +1550,12 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
   .z-support.z-function, .z-support.z-macro {
     color: var(--h3);
   }
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-support.z-constant {
-  //    color: var(--h4);
-  //    font-style: italic;
-  //}
   // type: Vec, Some, str, int
   // class:  Config  ($CONF = Config::getInstance()->getAll();)
   .z-support.z-type, .z-support.z-class {
     color: var(--h8);
     font-style: italic;
   }
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-source.z-ruby .z-variable.z-other.z-readwrite {
-  //    color: var(--h5);
-  //}
-  // superfluous, already have .z-entity.z-name.z-tag
-  //.z-source.z-css .z-entity.z-name.z-tag, .z-source.z-sass .z-entity.z-name.z-tag, .z-source.z-scss .z-entity.z-name.z-tag, .z-source.z-less .z-entity.z-name.z-tag, .z-source.z-stylus .z-entity.z-name.z-tag {
-  //    color: var(--h8);
-  //}
   // property name, eg css: font-size, text-align, etc.
   .z-support.z-type.z-property-name {
     color: var(--h8);
@@ -1584,58 +1564,4 @@ $coderoundhighlight: false !default;//round corners on highlighted code blocks
   .z-key.z-json {
     color: var(--h4);
   }
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-constant.z-numeric.z-line-number.z-match {
-  //    color: var(--h8);
-  //}
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-entity.z-name.z-filename.z-find-in-files {
-  //    color: var(--h6);
-  //}
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-message.z-error {
-  //    color: var(--h3);
-  //}
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-string.z-other.z-link, .z-markup.z-underline.z-link {
-  //    color: var(--h7);
-  //    text-decoration: underline;
-  //    font-style: italic;
-  //}
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-punctuation.z-definition.z-image {
-  //    color: var(--h5);
-  //}
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-meta.z-separator {
-  //    color: var(--h1);
-  //    background-color: var(--h1);
-  //    font-weight: bold;
-  //}
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-markup.z-list.z-numbered.z-bullet, .z-markup.z-list .z-punctuation.z-definition.z-list_item {
-  //    color: var(--h7);
-  //}
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-text.z-html.z-markdown .z-markup.z-raw.z-inline {
-  //    color: var(--h4);
-  //}
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-text.z-html.z-markdown .z-meta.z-dummy.z-line-break {
-  //    color: var(--h1);
-  //}
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-markup.z-raw.z-block.z-fenced.z-markdown {
-  //    color: var(--h1);
-  //    background-color: var(--h1);
-  //}
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-punctuation.z-definition.z-fenced.z-markdown, .z-variable.z-language.z-fenced.z-markdown {
-  //    color: var(--h1);
-  //    background-color: var(--h1);
-  //}
-  // Figure out how to reproduce in code block otherwise don't include
-  //.z-variable.z-language.z-fenced.z-markdown {
-  //    color: var(--h1);
-  //}
 }
diff --git a/templates/shortcodes/img.html b/templates/shortcodes/img.html
@@ -44,4 +44,6 @@
 {%- if not alt %}
   {%- set alt = img | split(pat=".") | first %}
 {%- endif %}
-<img src="{{ path | safe }}{{ img | safe }}"{% if class %} class="{{class}}"{% endif %}{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} loading="lazy" />
+{%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif -%}
+{%- if link %}<a href="{{link | safe}}">{% endif %}<img src="{{ path | safe }}{{ img | safe }}"{% if class %} class="{{class}}"{% endif %}{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} loading="lazy" />{% if link %}</a>{% endif -%}
+{%- if caption %}<figcaption>{{caption}}</figcaption></figure>{%- endif %}
diff --git a/templates/shortcodes/imgswap.html b/templates/shortcodes/imgswap.html
@@ -45,7 +45,9 @@
   {%- if not alt %}
     {%- set alt = img | split(pat=".") | first %}
   {%- endif %}
-  <img src="{{ path | safe }}{{ img | safe }}" class="img-main{% if class %} {{class}}{% endif %}"{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} loading="lazy" />
+  {%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif -%}
+  {%- if link %}<a href="{{link | safe}}">{% endif %}<img src="{{ path | safe }}{{ img | safe }}" class="img-main{% if class %} {{class}}{% endif %}"{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} loading="lazy" />{% if link %}</a>{% endif -%}
+  {%- if caption %}<figcaption>{{caption}}</figcaption></figure>{%- endif %}
 
   {%- set img = swap_src | split(pat="/") | last %}
   {%- set dirtest = swap_src | trim_start_matches(pat="./") %}
@@ -92,5 +94,7 @@
   {%- if not alt %}
     {%- set alt = img | split(pat=".") | first %}
   {%- endif %}
-  <img src="{{ path | safe }}{{ img | safe }}" class="img-swap{% if class %} {{class}}{% endif %}"{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} loading="lazy" />
+  {%- if caption %}<figure class="fi{% if class %} {{class}}{% endif %}">{% endif -%}
+  {%- if link %}<a href="{{link | safe}}">{% endif %}<img src="{{ path | safe }}{{ img | safe }}" class="img-swap{% if class %} {{class}}{% endif %}"{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} loading="lazy" />{% if link %}</a>{% endif -%}
+  {%- if caption %}<figcaption>{{caption}}</figcaption></figure>{%- endif %}
 </div>