aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--content/overview-images/index.md36
-rw-r--r--templates/shortcodes/img.html34
-rw-r--r--templates/shortcodes/imgswap.html68
3 files changed, 75 insertions, 63 deletions
diff --git a/content/overview-images/index.md b/content/overview-images/index.md
index efa8843..b1f07e2 100644
--- a/content/overview-images/index.md
+++ b/content/overview-images/index.md
@@ -26,33 +26,33 @@ This post covers the **imgswap and img shortcodes**. Images can also be embedded
## Usage (same path)
```rs
-{{/* img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) */}}
+{{/* img(src="ferris-happy.svg" alt="Ferris is Happy") */}}
```
**Output**
```html
-{{ img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) }}
+{{ img(src="ferris-happy.svg" alt="Ferris is Happy") }}
```
-{{ img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) }}
+{{ img(src="ferris-happy.svg" alt="Ferris is Happy") }}
## Usage (relative path ./)
```rs
-{{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" w=600 h=400) */}}
+{{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello") */}}
```
**Output**
```html
-{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" w=600 h=400) }}
+{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello") }}
```
-{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" w=600 h=400) }}
+{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello") }}
## Usage (root path /)
```rs
-{{/* img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" w=600 h=400) */}}
+{{/* img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean") */}}
```
**Output**
```html
-{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" w=600 h=400) }}
+{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean") }}
```
-{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" w=600 h=400) }}
+{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean") }}
# SVG image directly in code:
```html
@@ -74,30 +74,30 @@ When you hover your mouse over the image it will display the image to compare.
## Usage (same path)
```rs
-{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) */}}
+{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") */}}
```
**Output**
```html
-{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }}
+{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }}
```
-{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }}
+{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }}
## Usage (relative path ./)
```rs
-{{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) */}}
+{{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") */}}
```
**Output**
```html
-{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }}
+{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }}
```
-{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }}
+{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }}
## Usage (root path /)
```rs
-{{/* imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) */}}
+{{/* imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg") */}}
```
**Output**
```html
-{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }}
+{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg") }}
```
-{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }}
+{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg") }}
diff --git a/templates/shortcodes/img.html b/templates/shortcodes/img.html
index f23f783..a5a0541 100644
--- a/templates/shortcodes/img.html
+++ b/templates/shortcodes/img.html
@@ -1,30 +1,34 @@
+{%- set img = src | split(pat="/") | last %}
{%- set dirtest = src | trim_start_matches(pat="./") %}
-{%- if dirtest is containing("/") %}
- {%- set reldir = true %}
-{%- endif %}
+{%- if dirtest is containing("/") %} {%- set reldir = true %} {%- endif %}
{%- if src is starting_with("./") and reldir %} {# Relative Path #}
{%- set path = src | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
- {%- set path = path ~ "/" %}
+ {%- set path = path ~ "/" %}
+ {%- if not w or not h %}
+ {%- set meta = get_image_metadata(path=page.path ~ path ~ img) %}
+ {%- set w = meta.width %}
+ {%- set h = meta.height %}
+ {%- endif %}
{%- elif src is starting_with("/") %} {# Root Path #}
{%- set rootpath = src | split(pat="/") | slice(end=-1) | join(sep="/") %}
{%- set path = config.base_url ~ rootpath ~ "/" %}
+ {%- if not w or not h %}
+ {%- set meta = get_image_metadata(path=rootpath ~ "/" ~ img) %}
+ {%- set w = meta.width %}
+ {%- set h = meta.height %}
+ {%- endif %}
{%- else %} {# Same Directory Path #}
- {%- set path = "" %}
-
+ {%- set path = page.path %}
+ {%- if not w or not h %}
+ {%- set meta = get_image_metadata(path=page.path ~ img) %}
+ {%- set w = meta.width %}
+ {%- set h = meta.height %}
+ {%- endif %}
{%- endif %}
-{%- if not w or not h %}
- {%- set metafile = page.path ~ path ~ src %}
- {%- set meta = get_image_metadata(path=metafile) %}
- {%- set w = meta.width %}
- {%- set h = meta.height %}
-{%- endif %}
-
-{%- set img = src | split(pat="/") | last %}
-
{%- if not alt %}
{%- set alt = img | split(pat=".") | first %}
{%- endif %}
diff --git a/templates/shortcodes/imgswap.html b/templates/shortcodes/imgswap.html
index 4397b29..e92d1bc 100644
--- a/templates/shortcodes/imgswap.html
+++ b/templates/shortcodes/imgswap.html
@@ -1,63 +1,71 @@
<div class="img-swap-div">
+ {%- set img = main_src | split(pat="/") | last %}
{%- set dirtest = main_src | trim_start_matches(pat="./") %}
- {%- if dirtest is containing("/") %}
- {%- set reldir = true %}
- {%- endif %}
+ {%- if dirtest is containing("/") %} {%- set reldir = true %} {%- endif %}
{%- if main_src is starting_with("./") and reldir %} {# Relative Path #}
{%- set path = main_src | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
- {%- set path = path ~ "/" %}
+ {%- set path = path ~ "/" %}
+ {%- if not w or not h %}
+ {%- set meta = get_image_metadata(path=page.path ~ path ~ img) %}
+ {%- set w = meta.width %}
+ {%- set h = meta.height %}
+ {%- endif %}
{%- elif main_src is starting_with("/") %} {# Root Path #}
{%- set rootpath = main_src | split(pat="/") | slice(end=-1) | join(sep="/") %}
{%- set path = config.base_url ~ rootpath ~ "/" %}
+ {%- if not w or not h %}
+ {%- set meta = get_image_metadata(path=rootpath ~ "/" ~ img) %}
+ {%- set w = meta.width %}
+ {%- set h = meta.height %}
+ {%- endif %}
{%- else %} {# Same Directory Path #}
- {%- set path = "" %}
-
+ {%- set path = page.path %}
+ {%- if not w or not h %}
+ {%- set meta = get_image_metadata(path=page.path ~ img) %}
+ {%- set w = meta.width %}
+ {%- set h = meta.height %}
+ {%- endif %}
{%- endif %}
- {%- if not w or not h %}
- {%- set metafile = page.path ~ path ~ main_src %}
- {%- set meta = get_image_metadata(path=metafile) %}
- {%- set w = meta.width %}
- {%- set h = meta.height %}
- {%- endif %}
-
- {%- set img = main_src | split(pat="/") | last %}
-
{%- 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" />
+ {%- set img = swap_src | split(pat="/") | last %}
{%- set dirtest = swap_src | trim_start_matches(pat="./") %}
- {%- if dirtest is containing("/") %}
- {%- set reldir = true %}
- {%- endif %}
+ {%- if dirtest is containing("/") %} {%- set reldir = true %} {%- endif %}
{%- if swap_src is starting_with("./") and reldir %} {# Relative Path #}
{%- set path = swap_src | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
- {%- set path = path ~ "/" %}
+ {%- set path = path ~ "/" %}
+ {%- if not w or not h %}
+ {%- set meta = get_image_metadata(path=page.path ~ path ~ img) %}
+ {%- set w = meta.width %}
+ {%- set h = meta.height %}
+ {%- endif %}
{%- elif swap_src is starting_with("/") %} {# Root Path #}
{%- set rootpath = swap_src | split(pat="/") | slice(end=-1) | join(sep="/") %}
{%- set path = config.base_url ~ rootpath ~ "/" %}
+ {%- if not w or not h %}
+ {%- set meta = get_image_metadata(path=rootpath ~ "/" ~ img) %}
+ {%- set w = meta.width %}
+ {%- set h = meta.height %}
+ {%- endif %}
{%- else %} {# Same Directory Path #}
- {%- set path = "" %}
-
+ {%- set path = page.path %}
+ {%- if not w or not h %}
+ {%- set meta = get_image_metadata(path=page.path ~ img) %}
+ {%- set w = meta.width %}
+ {%- set h = meta.height %}
+ {%- endif %}
{%- endif %}
- {%- if not w or not h %}
- {%- set metafile = page.path ~ path ~ swap_src %}
- {%- set meta = get_image_metadata(path=metafile) %}
- {%- set w = meta.width %}
- {%- set h = meta.height %}
- {%- endif %}
-
- {%- set img = swap_src | split(pat="/") | last %}
-
{%- if not alt %}
{%- set alt = img | split(pat=".") | first %}
{%- endif %}