diff options
| -rw-r--r-- | content/overview-images/index.fr.md | 36 | ||||
| -rw-r--r-- | content/overview-images/index.md | 36 | ||||
| -rw-r--r-- | netlify.toml | 2 | ||||
| -rw-r--r-- | sass/abridge.scss | 17 | ||||
| -rw-r--r-- | templates/shortcodes/imghover.html | 95 | ||||
| -rw-r--r-- | templates/shortcodes/imgswap.html | 59 |
6 files changed, 109 insertions, 136 deletions
diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md index 130b061..9a68006 100644 --- a/content/overview-images/index.fr.md +++ b/content/overview-images/index.fr.md @@ -9,11 +9,11 @@ categories = ["Features"] tags = ["shortcodes","images"] [extra] toc = true -keywords = "Image, Markdown, Shortcodes, Hover" +keywords = "Image, Markdown, Shortcodes, Swap" thumbnail = "ferris-gesture.png" +++ -Cet article couvre les **shortcodes imghover et img**. Les images peuvent également être intégrées directement à l'aide de markdown ``, mais il est préférable d'utiliser un shortcode afin de pouvoir définir explicitement la largeur et la hauteur, cela aidera à empêcher le changement de mise en page du contenu, ce qui améliore l'expérience utilisateur et le score Google Lighthouse. +Cet article couvre les **shortcodes imgswap et img**. Les images peuvent également être intégrées directement à l'aide de markdown ``, mais il est préférable d'utiliser un shortcode afin de pouvoir définir explicitement la largeur et la hauteur, cela aidera à empêcher le changement de mise en page du contenu, ce qui améliore l'expérience utilisateur et le score Google Lighthouse. <!-- more --> # img Shortcode @@ -61,47 +61,43 @@ Cet article couvre les **shortcodes imghover et img**. Les images peuvent égale <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg> -# imghover Shortcode +# imgswap Shortcode -La première image du tableau src est celle comparée à toutes les autres. +Par défaut, main_src est l'image affichée, swap_src est affiché au survol de la souris. -Lorsque vous passez votre souris sur une image, celle-ci affiche l'image à comparer. +Lorsque vous passez votre souris sur l'image, l'image à comparer s'affiche. -Cela peut être utilisé pour comparer une seule image avec une autre en passant seulement deux src dans le tableau. - -- src est un tableau de chemins et de noms de fichiers pour les images. (obligatoire) +- main_src est le chemin et le nom de fichier de l'image par défaut. (obligatoire) +- swap_src est le chemin et le nom de fichier de l'image d'échange. (obligatoire) - w est la largeur de l'image. - h est la hauteur de l'image. -- p est la taille en pourcentage que vous souhaitez que l'image utilise sur la page. (50 est la valeur par défaut) - -*w et h ne sont utilisés que pour calculer le rapport d'aspect, la taille globale est définie par p* ## Utilisation (même chemin) ```rs -{{/* imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) */}} +{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) */}} ``` **Sortir** ```html -{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }} ``` -{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }} ## Utilisation (chemin relatif ./) ```rs -{{/* imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) */}} +{{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) */}} ``` **Sortir** ```html -{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }} ``` -{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }} ## Utilisation (chemin racine /) ```rs -{{/* imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) */}} +{{/* imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) */}} ``` **Sortir** ```html -{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }} ``` -{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }} diff --git a/content/overview-images/index.md b/content/overview-images/index.md index 3d60a91..efa8843 100644 --- a/content/overview-images/index.md +++ b/content/overview-images/index.md @@ -9,11 +9,11 @@ categories = ["Features"] tags = ["shortcodes","images"] [extra] toc = true -keywords = "Image, Markdown, Shortcodes, Hover" +keywords = "Image, Markdown, Shortcodes, Swap" thumbnail = "ferris-gesture.png" +++ -This post covers the **imghover and img shortcodes**. Images can also be embedded directly using markdown ``, but it is better to use a shortcode so you can explicitly set the width and height, this will help prevent content layout shift which improves user experience and the google lighthouse score. +This post covers the **imgswap and img shortcodes**. Images can also be embedded directly using markdown ``, but it is better to use a shortcode so you can explicitly set the width and height, this will help prevent content layout shift which improves user experience and the google lighthouse score. <!-- more --> # img Shortcode @@ -61,47 +61,43 @@ This post covers the **imghover and img shortcodes**. Images can also be embedde <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg> -# imghover Shortcode +# imgswap Shortcode -The first image in the src array is the one compared to all the others. +By default main_src is the image displayed, swap_src is displayed on mouse hover. -When you hover your mouse over an image it will display the image to compare. +When you hover your mouse over the image it will display the image to compare. -This can be used to compare only one image with another by passing only two src in the array. - -- src is an array of paths and filenames for the images. (mandatory) +- main_src is the path and filename for the default image. (mandatory) +- swap_src is the path and filename for the swap image. (mandatory) - w is the width of the image. - h is the height of the image. -- p is the percent size that you want the image to use on the page. (50 is the default) - -*w and h are used only to calculate the aspect ratio, overall size is set by p* ## Usage (same path) ```rs -{{/* imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) */}} +{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) */}} ``` **Output** ```html -{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }} ``` -{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }} ## Usage (relative path ./) ```rs -{{/* imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) */}} +{{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) */}} ``` **Output** ```html -{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }} ``` -{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }} ## Usage (root path /) ```rs -{{/* imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) */}} +{{/* imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) */}} ``` **Output** ```html -{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }} ``` -{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }} diff --git a/netlify.toml b/netlify.toml index 9c492bb..3356614 100644 --- a/netlify.toml +++ b/netlify.toml @@ -16,4 +16,4 @@ command = "zola build --base-url $DEPLOY_PRIME_URL && npm run abridge-demo && zo X-XSS-Protection = "1; mode=block" Referrer-Policy = "strict-origin-when-cross-origin" Strict-Transport-Security = "max-age=63072000; includeSubdomains" - Content-Security-Policy = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; script-src 'self'; img-src 'self' data: cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' 'unsafe-inline' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;" + Content-Security-Policy = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; script-src 'self'; img-src 'self' data: cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;" diff --git a/sass/abridge.scss b/sass/abridge.scss index e457c5c..5573482 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -200,6 +200,7 @@ $top: true !default;//back to top button using CSS $search: true !default;//search feature $toc: true !default;//Table of Contents, page index / recent posts block $zola: true !default;//Zola Specific +$imgswap: true !default;//Image Swap on hover/click $misc: false !default; $grid: false !default;//Infinity Grid, column based layouts. $syntax: true !default;//syntax highlighting for code blocks @@ -1224,6 +1225,22 @@ $syntax: true !default;//syntax highlighting for code blocks } } } +@if $imgswap { + .img-swap-div { + .img-main { + display: block; + } + .img-swap { + display: none; + } + &:hover .img-swap { + display: block; + } + &:hover .img-main { + display: none; + } + } +} @if $misc { // https://github.com/picocss/pico // Add the correct display in IE 10+ diff --git a/templates/shortcodes/imghover.html b/templates/shortcodes/imghover.html deleted file mode 100644 index 1ad733c..0000000 --- a/templates/shortcodes/imghover.html +++ /dev/null @@ -1,95 +0,0 @@ -{%- set_global bg = "" %} - -{%- for source in src %} - - {%- set dirtest = source | trim_start_matches(pat="./") %} - {%- if dirtest is containing("/") %} - {%- set reldir = true %} - {%- endif %} - - {%- if source is starting_with("./") and reldir %} {# Relative Path #} - {%- set pathtype = "rel-" %} - {%- set path = source | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %} - {%- set path = path ~ "/" %} - - {%- elif source is starting_with("/") %} {# Root Path #} - {%- set pathtype = "root-" %} - {%- set rootpath = source | split(pat="/") | slice(end=-1) | join(sep="/") %} - {%- set path = config.base_url ~ rootpath ~ "/" %} - - {%- else %} {# Same Directory Path #} - {%- set pathtype = "same-" %} - {%- set path = "" %} - {%- endif %} - - {%- set sourcepath = source | split(pat="/") | last %} - {%- set sourcename = pathtype ~ sourcepath | split(pat=".") | first %} - - {%- if loop.first %} - {%- set_global bg = source | split(pat="/") | last %} - {%- else %} - <div id="{{ sourcename }}"><b>{{ sourcename }} on hover</b></div> - <div id="{{ sourcename }}image" title="{{ sourcename }}"> </div> - {%- endif %} - -{%- endfor %} - -<style> - {%- for source in src %} - - {%- set dirtest = source | trim_start_matches(pat="./") %} - {%- if dirtest is containing("/") %} - {%- set reldir = true %} - {%- endif %} - - {%- if source is starting_with("./") and reldir %} {# Relative Path #} - {%- set pathtype = "rel-" %} - {%- set path = source | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %} - {%- set path = path ~ "/" %} - - {%- elif source is starting_with("/") %} {# Root Path #} - {%- set pathtype = "root-" %} - {%- set rootpath = source | split(pat="/") | slice(end=-1) | join(sep="/") %} - {%- set path = config.base_url ~ rootpath ~ "/" %} - - {%- else %} {# Same Directory Path #} - {%- set pathtype = "same-" %} - {%- set path = "" %} - {%- endif %} - - {%- set sourcepath = source | split(pat="/") | last %} - {%- set sourcename = pathtype ~ sourcepath | split(pat=".") | first %} - {%- set sourcetype = pathtype ~ sourcepath | split(pat=".") | last %} - - {%- if w and h and p %} - {%- set padding = h / w * p %} - {%- elif w and h %} - {%- set padding = h / w * 50 %} - {%- elif p %} - {%- set metafile = page.path ~ path ~ sourcepath %} - {%- set meta = get_image_metadata(path=metafile) %} - {%- set padding = meta.height / meta.width * p %} - {%- else %} - {%- set metafile = page.path ~ path ~ sourcepath %} - {%- set meta = get_image_metadata(path=metafile) %} - {%- set padding = meta.height / meta.width * 50 %} - {%- endif %} - - - - {%- if not loop.first %} - #{{ sourcename | safe }}image { - background-image: url('{{ path | safe }}{{ bg | safe }}'); - background-size: contain; - background-repeat: no-repeat; - width: {{ p | default(value=50) }}%; - height: 0; - padding-top: {{ padding }}%; - - } - #{{ sourcename | safe }}image:hover { - background-image: url('{{ path | safe }}{{ sourcepath | safe }}'); - } - {%- endif %} - {%- endfor %} -</style> diff --git a/templates/shortcodes/imgswap.html b/templates/shortcodes/imgswap.html new file mode 100644 index 0000000..f8c983c --- /dev/null +++ b/templates/shortcodes/imgswap.html @@ -0,0 +1,59 @@ +<div class="img-swap-div"> + {%- set dirtest = main_src | trim_start_matches(pat="./") %} + {%- 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 ~ "/" %} + + {%- 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 ~ "/" %} + + {%- else %} {# Same Directory Path #} + {%- set path = "" %} + + {%- 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 %} + {%- set name = img | split(pat=".") | first %} + <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 %} /> + + {%- set dirtest = swap_src | trim_start_matches(pat="./") %} + {%- 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 ~ "/" %} + + {%- 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 ~ "/" %} + + {%- else %} {# Same Directory Path #} + {%- set path = "" %} + + {%- 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 %} + {%- set name = img | split(pat=".") | first %} + <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 %} /> +</div> |