diff --git a/content/patterns/media/including-images.md b/content/patterns/media/including-images.md index eb763de..6e287ac 100644 --- a/content/patterns/media/including-images.md +++ b/content/patterns/media/including-images.md @@ -4,13 +4,13 @@ title = "Including images" From time to time, you'll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the `/content` folder you'll be mostly working in. -``` -├── content -└── static - └── images - ├── logo.png - └── menu-button.gif -``` +{{% fileTree %}} +* content +* static + * images + * logo.png + * menu-button.gif +{{% /fileTree %}} {{% note %}} When you first make a copy of **Infusion**, **Infusion's** own logo will be included. You should replace this with your own company or project logo. @@ -27,26 +27,24 @@ The path to the `/images` folder should begin with a forward slash, so include t Sometimes you will want to include a caption with your illustration. This is what the `
` and `
` elements are for. However, **Infusion** doesn't ask you to code all that manually. A special shortcode is provided, which takes a `caption` parameter. Note that the image markdown is provided between the opening and closing shortcode tags, and that you can use markdown syntax in the `caption` value. {{}} -{{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}} -![Steve Faulkner's face](/images/steve_faulkner.jpg) +{{% figure caption="A design system that uses a bad code example as a **single source of truth** only serves to proliferate bad code." %}} +![Diagram of a design pattern represented by a turd emoji begetting three bad implementations](/images/bad_design_system.png) {{% /figure %}} {{}} This will output the following. Note the automatically incremented **Figure** number. -{{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}} -![Steve Faulkner's face](/images/steve_faulkner.jpg) +{{% figure caption="A design system that uses a bad code example as a **single source of truth** only serves to proliferate bad code." %}} +![Diagram of a design pattern represented by a turd emoji begetting three bad implementations](/images/bad_design_system.png) {{% /figure %}} The generated markup includes special provisions for assistive technology support: ```html -
-

- Steve Faulkner's face -

-
- Steve Faulkner works for The Paciello Group +
+

Diagram of a design pattern represented by a turd emoji begetting three bad implementations

+
+ A design system that uses a bad code example as a single source of truth only serves to proliferate bad code.
``` diff --git a/docs/images/bad_design_system.png b/docs/images/bad_design_system.png new file mode 100644 index 0000000..182899f Binary files /dev/null and b/docs/images/bad_design_system.png differ diff --git a/docs/images/steve_faulkner.jpg b/docs/images/steve_faulkner.jpg deleted file mode 100644 index d2d07d4..0000000 Binary files a/docs/images/steve_faulkner.jpg and /dev/null differ diff --git a/docs/index.xml b/docs/index.xml index 04e3d7d..21ca832 100644 --- a/docs/index.xml +++ b/docs/index.xml @@ -125,7 +125,7 @@ The file tree is described using a markdown nested list structure: https://heydon.github.io/infusion/patterns/media/including-images/ From time to time, you’ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you’ll be mostly working in. -├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion’s own logo will be included. You should replace this with your own company or project logo. + content static images logo.png menu-button.gif When you first make a copy of Infusion, Infusion’s own logo will be included. You should replace this with your own company or project logo. diff --git a/docs/patterns/media/including-images/index.html b/docs/patterns/media/including-images/index.html index b2c4f3f..0d4c6e5 100644 --- a/docs/patterns/media/including-images/index.html +++ b/docs/patterns/media/including-images/index.html @@ -316,12 +316,23 @@

From time to time, you’ll be wanting to include images illustrating the documented pattern in hand. Images live in the static folder, which is a sibling of the /content folder you’ll be mostly working in.

-
├── content
-└── static
-    └── images
-        ├── logo.png
-        └── menu-button.gif
-
+
+
    +
  • content
    • +
  • static + +
      +
    • images + +
        +
      • logo.png
        • +
      • menu-button.gif
        • +
      • +
    • +
+ +
+