rewritten images pattern

This commit is contained in:
Heydon Pickering 2017-08-01 12:50:02 +01:00
parent a50251e3e1
commit 5dc79a09c3
10 changed files with 72 additions and 56 deletions

View File

@ -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. 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.
``` {{% fileTree %}}
├── content * content
└── static * static
└── images * images
├── logo.png * logo.png
└── menu-button.gif * menu-button.gif
``` {{% /fileTree %}}
{{% note %}} {{% 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. 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. 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>}} {{<codeBlock>}}
&#x7b;{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}} &#x7b;{% figure caption="A design system that uses a bad code example as a **single source of truth** only serves to proliferate bad code." %}}
![Steve Faulkner's face](/images/steve_faulkner.jpg) ![Diagram of a design pattern represented by a turd emoji begetting three bad implementations](/images/bad_design_system.png)
&#x7b;{% /figure %}} &#x7b;{% /figure %}}
{{</codeBlock>}} {{</codeBlock>}}
This will output the following. Note the automatically incremented **Figure** number. 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." %}}
![Steve Faulkner's face](/images/steve_faulkner.jpg) ![Diagram of a design pattern represented by a turd emoji begetting three bad implementations](/images/bad_design_system.png)
{{% /figure %}} {{% /figure %}}
The generated markup includes special provisions for assistive technology support: The generated markup includes special provisions for assistive technology support:
```html ```html
<figure role="group" aria-describedby="U3RldmUgRmF1bGtuZXIg"> <figure role="group" aria-describedby="caption-5fbafefe946c724e7a5d3d2d447a8684">
<p> <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>
<img src="/images/steve_faulkner.jpg" alt="Steve Faulkner's face"> <figcaption id="caption-5fbafefe946c724e7a5d3d2d447a8684">
</p> A design system that uses a bad code example as a <strong>single source of truth</strong> only serves to proliferate bad code.
<figcaption id="U3RldmUgRmF1bGtuZXIg">
<a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> works for The Paciello Group
</figcaption> </figcaption>
</figure> </figure>
``` ```

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

View File

@ -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> <guid>https://heydon.github.io/infusion/patterns/media/including-images/</guid>
<description>From time to time, you&amp;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&amp;rsquo;ll be mostly working in. <description>From time to time, you&amp;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&amp;rsquo;ll be mostly working in.
├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&amp;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&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
</item> </item>
<item> <item>

View File

@ -316,12 +316,23 @@
<p>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 <code>/content</code> folder you&rsquo;ll be mostly working in.</p> <p>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 <code>/content</code> folder you&rsquo;ll be mostly working in.</p>
<pre><code>├── content <div class="file-tree">
└── static <ul>
└── images <li>content</li>
├── logo.png <li>static
└── menu-button.gif
</code></pre> <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"> <aside aria-label="note" class="note">
<div> <div>
@ -344,8 +355,8 @@
<p>Sometimes you will want to include a caption with your illustration. This is what the <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> elements are for. However, <strong>Infusion</strong> doesn&rsquo;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> <p>Sometimes you will want to include a caption with your illustration. This is what the <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> elements are for. However, <strong>Infusion</strong> doesn&rsquo;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> <pre class=" "><code data-codeblock-shortcode>
&#x7b;{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}} &#x7b;{% figure caption="A design system that uses a bad code example as a **single source of truth** only serves to proliferate bad code." %}}
![Steve Faulkner's face](/images/steve_faulkner.jpg) ![Diagram of a design pattern represented by a turd emoji begetting three bad implementations](/images/bad_design_system.png)
&#x7b;{% /figure %}} &#x7b;{% /figure %}}
</code></pre> </code></pre>
@ -353,23 +364,21 @@
<p>This will output the following. Note the automatically incremented <strong>Figure</strong> number.</p> <p>This will output the following. Note the automatically incremented <strong>Figure</strong> number.</p>
<figure role="group" aria-describedby="caption-8e57b013acffbeb34ebb09e52c193120"> <figure role="group" aria-describedby="caption-e259e3056337abf60723ee4eb78ed9b6">
<p><img src="https://heydon.github.io/infusion/images/steve_faulkner.jpg" alt="Steve Faulkner's face" /></p> <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"> <figcaption id="caption-e259e3056337abf60723ee4eb78ed9b6">
<a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> works for The Paciello Group A design system that uses a bad code example as a <strong>single source of truth</strong> only serves to proliferate bad code.
</figcaption> </figcaption>
</figure> </figure>
<p>The generated markup includes special provisions for assistive technology support:</p> <p>The generated markup includes special provisions for assistive technology support:</p>
<pre><code class="language-html">&lt;figure role=&quot;group&quot; aria-describedby=&quot;U3RldmUgRmF1bGtuZXIg&quot;&gt; <pre><code class="language-html">&lt;figure role=&quot;group&quot; aria-describedby=&quot;caption-5fbafefe946c724e7a5d3d2d447a8684&quot;&gt;
&lt;p&gt; &lt;p&gt;&lt;img src=&quot;http://localhost:1313/images/bad_design_system.png&quot; alt=&quot;Diagram of a design pattern represented by a turd emoji begetting three bad implementations&quot;&gt;&lt;/p&gt;
&lt;img src=&quot;/images/steve_faulkner.jpg&quot; alt=&quot;Steve Faulkner's face&quot;&gt; &lt;figcaption id=&quot;caption-5fbafefe946c724e7a5d3d2d447a8684&quot;&gt;
&lt;/p&gt; A design system that uses a bad code example as a &lt;strong&gt;single source of truth&lt;/strong&gt; only serves to proliferate bad code.
&lt;figcaption id=&quot;U3RldmUgRmF1bGtuZXIg&quot;&gt;
&lt;a href=&quot;https://twitter.com/stevefaulkner&quot;&gt;Steve Faulkner&lt;/a&gt; works for The Paciello Group
&lt;/figcaption&gt; &lt;/figcaption&gt;
&lt;/figure&gt; &lt;/figure&gt;
</code></pre> </code></pre>

View File

@ -17,7 +17,7 @@
<guid>https://heydon.github.io/infusion/patterns/media/including-images/</guid> <guid>https://heydon.github.io/infusion/patterns/media/including-images/</guid>
<description>From time to time, you&amp;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&amp;rsquo;ll be mostly working in. <description>From time to time, you&amp;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&amp;rsquo;ll be mostly working in.
├── content └── static └── images ├── logo.png └── menu-button.gif When you first make a copy of Infusion, Infusion&amp;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&amp;rsquo;s own logo will be included. You should replace this with your own company or project logo.</description>
</item> </item>
<item> <item>

View File

@ -1257,12 +1257,23 @@ toc = false
<p>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 <code>/content</code> folder you&rsquo;ll be mostly working in.</p> <p>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 <code>/content</code> folder you&rsquo;ll be mostly working in.</p>
<pre><code>├── content <div class="file-tree">
└── static <ul>
└── images <li>content</li>
├── logo.png <li>static
└── menu-button.gif
</code></pre> <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"> <aside aria-label="note" class="note">
<div> <div>
@ -1285,8 +1296,8 @@ toc = false
<p>Sometimes you will want to include a caption with your illustration. This is what the <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> elements are for. However, <strong>Infusion</strong> doesn&rsquo;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> <p>Sometimes you will want to include a caption with your illustration. This is what the <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> elements are for. However, <strong>Infusion</strong> doesn&rsquo;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> <pre class=" "><code data-codeblock-shortcode>
&#x7b;{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}} &#x7b;{% figure caption="A design system that uses a bad code example as a **single source of truth** only serves to proliferate bad code." %}}
![Steve Faulkner's face](/images/steve_faulkner.jpg) ![Diagram of a design pattern represented by a turd emoji begetting three bad implementations](/images/bad_design_system.png)
&#x7b;{% /figure %}} &#x7b;{% /figure %}}
</code></pre> </code></pre>
@ -1294,23 +1305,21 @@ toc = false
<p>This will output the following. Note the automatically incremented <strong>Figure</strong> number.</p> <p>This will output the following. Note the automatically incremented <strong>Figure</strong> number.</p>
<figure role="group" aria-describedby="caption-8e57b013acffbeb34ebb09e52c193120"> <figure role="group" aria-describedby="caption-e259e3056337abf60723ee4eb78ed9b6">
<p><img src="https://heydon.github.io/infusion/images/steve_faulkner.jpg" alt="Steve Faulkner's face" /></p> <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"> <figcaption id="caption-e259e3056337abf60723ee4eb78ed9b6">
<a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> works for The Paciello Group A design system that uses a bad code example as a <strong>single source of truth</strong> only serves to proliferate bad code.
</figcaption> </figcaption>
</figure> </figure>
<p>The generated markup includes special provisions for assistive technology support:</p> <p>The generated markup includes special provisions for assistive technology support:</p>
<pre><code class="language-html">&lt;figure role=&quot;group&quot; aria-describedby=&quot;U3RldmUgRmF1bGtuZXIg&quot;&gt; <pre><code class="language-html">&lt;figure role=&quot;group&quot; aria-describedby=&quot;caption-5fbafefe946c724e7a5d3d2d447a8684&quot;&gt;
&lt;p&gt; &lt;p&gt;&lt;img src=&quot;http://localhost:1313/images/bad_design_system.png&quot; alt=&quot;Diagram of a design pattern represented by a turd emoji begetting three bad implementations&quot;&gt;&lt;/p&gt;
&lt;img src=&quot;/images/steve_faulkner.jpg&quot; alt=&quot;Steve Faulkner's face&quot;&gt; &lt;figcaption id=&quot;caption-5fbafefe946c724e7a5d3d2d447a8684&quot;&gt;
&lt;/p&gt; A design system that uses a bad code example as a &lt;strong&gt;single source of truth&lt;/strong&gt; only serves to proliferate bad code.
&lt;figcaption id=&quot;U3RldmUgRmF1bGtuZXIg&quot;&gt;
&lt;a href=&quot;https://twitter.com/stevefaulkner&quot;&gt;Steve Faulkner&lt;/a&gt; works for The Paciello Group
&lt;/figcaption&gt; &lt;/figcaption&gt;
&lt;/figure&gt; &lt;/figure&gt;
</code></pre> </code></pre>

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB