diff options
| -rw-r--r-- | content/overview-images/index.md | 36 | ||||
| -rw-r--r-- | templates/shortcodes/img.html | 34 | ||||
| -rw-r--r-- | templates/shortcodes/imgswap.html | 68 |
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 %} |
