rewritten images pattern
This commit is contained in:
Heydon Pickering
parent
a50251e3e1
commit
5dc79a09c3
|
|
@ -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 `<figure>` and `<figcaption>` 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.
|
||||
|
||||
{{<codeBlock>}}
|
||||
{{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}}
|
||||
|
||||
{{% figure caption="A design system that uses a bad code example as a **single source of truth** only serves to proliferate bad code." %}}
|
||||
|
||||
{{% /figure %}}
|
||||
{{</codeBlock>}}
|
||||
|
||||
This will output the following. Note the automatically incremented **Figure** number.
|
||||
|
||||
{{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}}
|
||||
|
||||
{{% figure caption="A design system that uses a bad code example as a **single source of truth** only serves to proliferate bad code." %}}
|
||||
|
||||
{{% /figure %}}
|
||||
|
||||
The generated markup includes special provisions for assistive technology support:
|
||||
|
||||
```html
|
||||
<figure role="group" aria-describedby="U3RldmUgRmF1bGtuZXIg">
|
||||
<p>
|
||||
<img src="/images/steve_faulkner.jpg" alt="Steve Faulkner's face">
|
||||
</p>
|
||||
<figcaption id="U3RldmUgRmF1bGtuZXIg">
|
||||
<a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> works for The Paciello Group
|
||||
<figure role="group" aria-describedby="caption-5fbafefe946c724e7a5d3d2d447a8684">
|
||||
<p><img src="http://localhost:1313/images/bad_design_system.png" alt="Diagram of a design pattern represented by a turd emoji begetting three bad implementations"></p>
|
||||
<figcaption id="caption-5fbafefe946c724e7a5d3d2d447a8684">
|
||||
A design system that uses a bad code example as a <strong>single source of truth</strong> only serves to proliferate bad code.
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
|
|
|||
BIN
docs/images/bad_design_system.png
Normal file
BIN
docs/images/bad_design_system.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
|
|
@ -125,7 +125,7 @@ The file tree is described using a markdown nested list structure:
|
|||
|
||||
<guid>https://heydon.github.io/infusion/patterns/media/including-images/</guid>
|
||||
<description>From time to time, you&rsquo;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&rsquo;ll be mostly working in.
|
||||
├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
|
||||
content static images logo.png menu-button.gif When you first make a copy of Infusion, Infusion&rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
|
|
|
|||
|
|
@ -316,12 +316,23 @@
|
|||
|
||||
<p>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 <code>/content</code> folder you’ll be mostly working in.</p>
|
||||
|
||||
<pre><code>├── content
|
||||
└── static
|
||||
└── images
|
||||
├── logo.png
|
||||
└── menu-button.gif
|
||||
</code></pre>
|
||||
<div class="file-tree">
|
||||
<ul>
|
||||
<li>content</li>
|
||||
<li>static
|
||||
|
||||
<ul>
|
||||
<li>images
|
||||
|
||||
<ul>
|
||||
<li>logo.png</li>
|
||||
<li>menu-button.gif</li>
|
||||
</ul></li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<aside aria-label="note" class="note">
|
||||
<div>
|
||||
|
|
@ -344,8 +355,8 @@
|
|||
<p>Sometimes you will want to include a caption with your illustration. This is what the <code><figure></code> and <code><figcaption></code> elements are for. However, <strong>Infusion</strong> doesn’t ask you to code all that manually. A special shortcode is provided, which takes a <code>caption</code> parameter. Note that the image markdown is provided between the opening and closing shortcode tags, and that you can use markdown syntax in the <code>caption</code> value.</p>
|
||||
|
||||
<pre class=" "><code data-codeblock-shortcode>
|
||||
{{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}}
|
||||
|
||||
{{% figure caption="A design system that uses a bad code example as a **single source of truth** only serves to proliferate bad code." %}}
|
||||
|
||||
{{% /figure %}}
|
||||
</code></pre>
|
||||
|
||||
|
|
@ -353,23 +364,21 @@
|
|||
<p>This will output the following. Note the automatically incremented <strong>Figure</strong> number.</p>
|
||||
|
||||
|
||||
<figure role="group" aria-describedby="caption-8e57b013acffbeb34ebb09e52c193120">
|
||||
<p><img src="https://heydon.github.io/infusion/images/steve_faulkner.jpg" alt="Steve Faulkner's face" /></p>
|
||||
<figure role="group" aria-describedby="caption-e259e3056337abf60723ee4eb78ed9b6">
|
||||
<p><img src="https://heydon.github.io/infusion/images/bad_design_system.png" alt="Diagram of a design pattern represented by a turd emoji begetting three bad implementations" /></p>
|
||||
|
||||
<figcaption id="caption-8e57b013acffbeb34ebb09e52c193120">
|
||||
<a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> works for The Paciello Group
|
||||
<figcaption id="caption-e259e3056337abf60723ee4eb78ed9b6">
|
||||
A design system that uses a bad code example as a <strong>single source of truth</strong> only serves to proliferate bad code.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
<p>The generated markup includes special provisions for assistive technology support:</p>
|
||||
|
||||
<pre><code class="language-html"><figure role="group" aria-describedby="U3RldmUgRmF1bGtuZXIg">
|
||||
<p>
|
||||
<img src="/images/steve_faulkner.jpg" alt="Steve Faulkner's face">
|
||||
</p>
|
||||
<figcaption id="U3RldmUgRmF1bGtuZXIg">
|
||||
<a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> works for The Paciello Group
|
||||
<pre><code class="language-html"><figure role="group" aria-describedby="caption-5fbafefe946c724e7a5d3d2d447a8684">
|
||||
<p><img src="http://localhost:1313/images/bad_design_system.png" alt="Diagram of a design pattern represented by a turd emoji begetting three bad implementations"></p>
|
||||
<figcaption id="caption-5fbafefe946c724e7a5d3d2d447a8684">
|
||||
A design system that uses a bad code example as a <strong>single source of truth</strong> only serves to proliferate bad code.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</code></pre>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<guid>https://heydon.github.io/infusion/patterns/media/including-images/</guid>
|
||||
<description>From time to time, you&rsquo;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&rsquo;ll be mostly working in.
|
||||
├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
|
||||
content static images logo.png menu-button.gif When you first make a copy of Infusion, Infusion&rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
|
|
|
|||
|
|
@ -1257,12 +1257,23 @@ toc = false
|
|||
|
||||
<p>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 <code>/content</code> folder you’ll be mostly working in.</p>
|
||||
|
||||
<pre><code>├── content
|
||||
└── static
|
||||
└── images
|
||||
├── logo.png
|
||||
└── menu-button.gif
|
||||
</code></pre>
|
||||
<div class="file-tree">
|
||||
<ul>
|
||||
<li>content</li>
|
||||
<li>static
|
||||
|
||||
<ul>
|
||||
<li>images
|
||||
|
||||
<ul>
|
||||
<li>logo.png</li>
|
||||
<li>menu-button.gif</li>
|
||||
</ul></li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<aside aria-label="note" class="note">
|
||||
<div>
|
||||
|
|
@ -1285,8 +1296,8 @@ toc = false
|
|||
<p>Sometimes you will want to include a caption with your illustration. This is what the <code><figure></code> and <code><figcaption></code> elements are for. However, <strong>Infusion</strong> doesn’t ask you to code all that manually. A special shortcode is provided, which takes a <code>caption</code> parameter. Note that the image markdown is provided between the opening and closing shortcode tags, and that you can use markdown syntax in the <code>caption</code> value.</p>
|
||||
|
||||
<pre class=" "><code data-codeblock-shortcode>
|
||||
{{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}}
|
||||
|
||||
{{% figure caption="A design system that uses a bad code example as a **single source of truth** only serves to proliferate bad code." %}}
|
||||
|
||||
{{% /figure %}}
|
||||
</code></pre>
|
||||
|
||||
|
|
@ -1294,23 +1305,21 @@ toc = false
|
|||
<p>This will output the following. Note the automatically incremented <strong>Figure</strong> number.</p>
|
||||
|
||||
|
||||
<figure role="group" aria-describedby="caption-8e57b013acffbeb34ebb09e52c193120">
|
||||
<p><img src="https://heydon.github.io/infusion/images/steve_faulkner.jpg" alt="Steve Faulkner's face" /></p>
|
||||
<figure role="group" aria-describedby="caption-e259e3056337abf60723ee4eb78ed9b6">
|
||||
<p><img src="https://heydon.github.io/infusion/images/bad_design_system.png" alt="Diagram of a design pattern represented by a turd emoji begetting three bad implementations" /></p>
|
||||
|
||||
<figcaption id="caption-8e57b013acffbeb34ebb09e52c193120">
|
||||
<a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> works for The Paciello Group
|
||||
<figcaption id="caption-e259e3056337abf60723ee4eb78ed9b6">
|
||||
A design system that uses a bad code example as a <strong>single source of truth</strong> only serves to proliferate bad code.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
<p>The generated markup includes special provisions for assistive technology support:</p>
|
||||
|
||||
<pre><code class="language-html"><figure role="group" aria-describedby="U3RldmUgRmF1bGtuZXIg">
|
||||
<p>
|
||||
<img src="/images/steve_faulkner.jpg" alt="Steve Faulkner's face">
|
||||
</p>
|
||||
<figcaption id="U3RldmUgRmF1bGtuZXIg">
|
||||
<a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> works for The Paciello Group
|
||||
<pre><code class="language-html"><figure role="group" aria-describedby="caption-5fbafefe946c724e7a5d3d2d447a8684">
|
||||
<p><img src="http://localhost:1313/images/bad_design_system.png" alt="Diagram of a design pattern represented by a turd emoji begetting three bad implementations"></p>
|
||||
<figcaption id="caption-5fbafefe946c724e7a5d3d2d447a8684">
|
||||
A design system that uses a bad code example as a <strong>single source of truth</strong> only serves to proliferate bad code.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</code></pre>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
BIN
themes/infusion/static/images/bad_design_system.png
Normal file
BIN
themes/infusion/static/images/bad_design_system.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Loading…
Reference in New Issue
Block a user