From 103ff01d0ece0f3c0112b48015750300d907d8fa Mon Sep 17 00:00:00 2001 From: Jieiku Date: Tue, 31 May 2022 02:09:53 -0700 Subject: Improve Shortcodes, example content, page scores, fonts --- content/overview-images/index.md | 104 +++++++++++++++++++++++++++++++++------ 1 file changed, 90 insertions(+), 14 deletions(-) (limited to 'content/overview-images/index.md') diff --git a/content/overview-images/index.md b/content/overview-images/index.md index d253932..22e1f92 100644 --- a/content/overview-images/index.md +++ b/content/overview-images/index.md @@ -1,28 +1,104 @@ +++ -title = "Image Examples" -date = 2021-05-09 +title = "Image Shortcodes" +date = 2021-05-19 [taxonomies] categories = ["Features"] -tags = ["images"] +tags = ["shortcodes","images"] +[extra] +toc = true +++ -Images can be embed using direct or relative paths. +This post covers the **imghover and img shortcodes**. Images can also be embeded 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. -Use `img(path="./image.jpg", alt="Papaya")` to specify the relative path of image: -{{ img(path="./image.jpg", alt="Papaya") }} +# img Shortcode -This is an example note with direct image, without using shortcode: +- src is the path and filename of the image. (mandatory) +- class sets a class for the image. (optional) +- alt sets the alt note for the image. (recommended for google lighthouse) +- w is the width of the image. (recommended for google lighthouse) +- h is the height of the image. (recommended for google lighthouse) -`![Rust](rust.png)` +## Usage (same path) +```rs +{{/* img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) */}} +``` +**Output** +```html +{{ img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) }} +``` +{{ img(src="ferris-happy.svg" alt="Ferris is Happy" w=600 h=400) }} -![Rust](rust.png) +## Usage (relative path ./) +```rs +{{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" w=600 h=400) */}} +``` +**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" w=600 h=400) }} -This is an svg image: +## Usage (root path /) +```rs +{{/* img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean" w=600 h=400) */}} +``` +**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" w=600 h=400) }} - +# SVG image directly in code: +```html + +``` + + + +# imghover Shortcode + +The first image in the src array is the one compared to all the others. + +When you hover your mouse over an 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) +- 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) */}} +``` +**Output** +```html +{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} +``` +{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} + +## Usage (relative path ./) +```rs +{{/* imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) */}} +``` +**Output** +```html +{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} +``` +{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} + +## Usage (root path /) +```rs +{{/* imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) */}} +``` +**Output** +```html +{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} +``` +{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} - -- cgit v1.3.1