Skip to content

Commit

Permalink
imghover > imgswap, reduce complexity, fix CSP
Browse files Browse the repository at this point in the history
  • Loading branch information
Jieiku committed Aug 10, 2023
1 parent dfa3de9 commit d2aba91
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 116 deletions.
36 changes: 16 additions & 20 deletions content/overview-images/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
<!-- more -->

# img Shortcode
Expand Down Expand Up @@ -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) }}
2 changes: 1 addition & 1 deletion netlify.toml
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
14 changes: 14 additions & 0 deletions sass/include/_zola.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
95 changes: 0 additions & 95 deletions templates/shortcodes/imghover.html

This file was deleted.

59 changes: 59 additions & 0 deletions templates/shortcodes/imgswap.html
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit d2aba91

Please sign in to comment.