diff --git a/content/overview-images/index.md b/content/overview-images/index.md index 3d60a91f..efa88436 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 `![Ferris](ferris.svg)`, 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 `![Ferris](ferris.svg)`, 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. # img Shortcode @@ -61,47 +61,43 @@ This post covers the **imghover and img shortcodes**. Images can also be embedde -# 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 2fdf7b5a..fba76560 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/include/_zola.scss b/sass/include/_zola.scss index 301ce614..fbc288e2 100644 --- a/sass/include/_zola.scss +++ b/sass/include/_zola.scss @@ -65,3 +65,17 @@ code { background-color: unset; } } +.img-swap-div { + .img-main { + display: block; + } + .img-swap { + display: none; + } + &:hover .img-swap { + display: block; + } + &:hover .img-main { + display: none; + } +} diff --git a/templates/shortcodes/imghover.html b/templates/shortcodes/imghover.html deleted file mode 100644 index 1ad733c4..00000000 --- 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 %} -
{{ sourcename }} on hover
-
- {%- endif %} - -{%- endfor %} - - diff --git a/templates/shortcodes/imgswap.html b/templates/shortcodes/imgswap.html new file mode 100644 index 00000000..f8c983ca --- /dev/null +++ b/templates/shortcodes/imgswap.html @@ -0,0 +1,59 @@ +
+ {%- 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 %} + + + {%- 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 %} + +