hugopoi/cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

more markdown syntax stuff in images

Browse Source
This commit is contained in:
Heydon Pickering 2017-07-10 20:02:46 +01:00
parent d6240d36f9
commit 0bf836ea3d
4 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
content/patterns/writing/including-images.md
View File

@ -24,17 +24,17 @@ The path to the `/images` folder should begin with a forward slash, so include t
## Figures ## Figures
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: 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 works for The Paciello Group" %}} &#x7b;{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}}
![Steve Faulkner's face](/images/steve_faulkner.jpg) ![Steve Faulkner's face](/images/steve_faulkner.jpg)
&#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 works for The Paciello Group" %}} {{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}}
![Steve Faulkner's face](/images/steve_faulkner.jpg) ![Steve Faulkner's face](/images/steve_faulkner.jpg)
{{% /figure %}} {{% /figure %}}

10
docs/patterns/coding/writing-inline-demos/index.html
View File

@ -272,10 +272,10 @@ toggle.addEventListener('click', (e) => {
<p> <p>
<div class="demo-container"> <div class="demo-container">
<div class="demo" id="demo-CiZsdDtidXR0b24"></div> <div class="demo" id="demo-CiZsdDtidXR0b24gYXJp"></div>
<template id="template-CiZsdDtidXR0b24"> <template id="template-CiZsdDtidXR0b24gYXJp">
<button aria-pressed="false">Toggle Me</button> <button aria-pressed="false">Toggle Me</button>
<style> <style>
@ -307,13 +307,13 @@ toggle.addEventListener('click', (e) => {
</template> </template>
<script> <script>
(function() { (function() {
var root = document.getElementById('demo-CiZsdDtidXR0b24'); var root = document.getElementById('demo-CiZsdDtidXR0b24gYXJp');
if (document.head.attachShadow) { if (document.head.attachShadow) {
root.attachShadow({mode: 'open'}); root.attachShadow({mode: 'open'});
var template = document.getElementById('template-CiZsdDtidXR0b24'); var template = document.getElementById('template-CiZsdDtidXR0b24gYXJp');
var script = template.content.querySelector('script'); var script = template.content.querySelector('script');
if (script) { if (script) {
script.textContent = `(function() { var demo = document.getElementById(\'demo-CiZsdDtidXR0b24\').shadowRoot; ${script.textContent} })()` script.textContent = `(function() { var demo = document.getElementById(\'demo-CiZsdDtidXR0b24gYXJp\').shadowRoot; ${script.textContent} })()`
} }
root.shadowRoot.appendChild(document.importNode(template.content, true)); root.shadowRoot.appendChild(document.importNode(template.content, true));
} else { } else {

10
docs/patterns/writing/including-images/index.html
View File

@ -256,10 +256,10 @@
<h2 id="figures">Figures</h2> <h2 id="figures">Figures</h2>
<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:</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 works for The Paciello Group" %}} &#x7b;{% figure caption="[Steve Faulkner](https://twitter.com/stevefaulkner) works for The Paciello Group" %}}
![Steve Faulkner's face](/images/steve_faulkner.jpg) ![Steve Faulkner's face](/images/steve_faulkner.jpg)
&#x7b;{% /figure %}} &#x7b;{% /figure %}}
</code></pre> </code></pre>
@ -268,11 +268,11 @@
<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-U3RldmUgRmF1bGtuZXIg"> <figure role="group" aria-describedby="caption-W1N0ZXZlIEZhdWxrbmVy">
<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/steve_faulkner.jpg" alt="Steve Faulkner's face" /></p>
<figcaption id="caption-U3RldmUgRmF1bGtuZXIg"> <figcaption id="caption-W1N0ZXZlIEZhdWxrbmVy">
Steve Faulkner works for The Paciello Group <a href="https://twitter.com/stevefaulkner">Steve Faulkner</a> works for The Paciello Group
</figcaption> </figcaption>
</figure> </figure>

2
themes/infusion/layouts/shortcodes/demo.html
View File

@ -1,4 +1,4 @@
{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 15 "" }} {{ $uniq := .Inner | htmlEscape | base64Encode | truncate 20 "" }}
<div class="demo-container"> <div class="demo-container">
{{ if .Get "caption" }} {{ if .Get "caption" }}
<figure role="group" aria-labelledby="caption-{{ $uniq }}"> <figure role="group" aria-labelledby="caption-{{ $uniq }}">