diff options
| author | Jieiku | 2024-07-16 07:15:00 -0700 |
|---|---|---|
| committer | Jieiku | 2024-07-16 07:15:00 -0700 |
| commit | 4dab5b9538f76cd56f53e6a68f34f505234e30ed (patch) | |
| tree | cb42f2870624b0ab8b89f0a720f3e98be89479f9 | |
| parent | c36fd6cca1070a671084ea0701ee783b3a97df2b (diff) | |
| download | abridge-4dab5b9538f76cd56f53e6a68f34f505234e30ed.tar.gz abridge-4dab5b9538f76cd56f53e6a68f34f505234e30ed.tar.bz2 abridge-4dab5b9538f76cd56f53e6a68f34f505234e30ed.zip | |
Add Image Alignment Classes
| -rw-r--r-- | content/overview-images/index.fr.md | 6 | ||||
| -rw-r--r-- | content/overview-images/index.md | 12 | ||||
| -rw-r--r-- | sass/abridge.scss | 6 |
3 files changed, 21 insertions, 3 deletions
diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md index ea85994..9621c7f 100644 --- a/content/overview-images/index.fr.md +++ b/content/overview-images/index.fr.md @@ -24,6 +24,12 @@ Cet article couvre les **shortcodes imgswap et img**. Les images peuvent égalem - w est la largeur de l'image. - h est la hauteur de l'image. +Cours optionnels: + +- ci peut être utilisé pour centrer l'image. +- fr peut être utilisé pour faire flotter l'image à droite. +- fl peut être utilisé pour faire flotter l'image vers la gauche. + ** google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs. ** ## Utilisation (même chemin) diff --git a/content/overview-images/index.md b/content/overview-images/index.md index d4115be..d773d0f 100644 --- a/content/overview-images/index.md +++ b/content/overview-images/index.md @@ -24,17 +24,23 @@ This post covers the **imgswap and img shortcodes**. Images can also be embedded - w is the width of the image. - h is the height of the image. +Optional Classes: + +- ci can be used to center the image. +- fr can be used to float the image right. +- fl can be used to float the image left. + ** google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values. ** ## Usage (same path) ```rs -{{/* img(src="ferris-happy.svg" alt="Ferris is Happy") */}} +{{/* img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy") */}} ``` **Output** ```html -{{ img(src="ferris-happy.svg" alt="Ferris is Happy") }} +{{ img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy") }} ``` -{{ img(src="ferris-happy.svg" alt="Ferris is Happy") }} +{{ img(src="ferris-happy.svg" class="ci" alt="Ferris is Happy") }} ## Usage (relative path ./) ```rs diff --git a/sass/abridge.scss b/sass/abridge.scss index 3c6cc8f..008f38c 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -1417,6 +1417,12 @@ $syntax: true !default;//syntax highlighting for code blocks .tpad {padding-top: var(--s1)} .b {font-weight: var(--fh)} .c {text-align: center}// <center> does not pass validation, use: <div class="c"></div> + .fl {float: left} + .fr {float: right} + .ci { + display: block; + margin: 0 auto; + }// center image, <center> does not pass validation, use: <img class="ci"></img> } @if $syntax { // Unstyled Text Color, and background color |