content/glyph/book/text_editing/images.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
----- permalink: img_fig title: Glyph – Images and Figures type: page ----- <nav class="navigation"><a href="/glyph/book/text_editing/links.html">← Links and Bookmarks</a> | <a href="/glyph/book/index.html">Contents</a> | <a href="/glyph/book/text_editing/code.html">Source Code →</a></nav> <p>Same as for <a href="/glyph/book/text_editing/links.html#links">links</a>, you can also include images and figures using Textile or Markdown. If you want additional features, you can use the <a href="/glyph/book/macros/macros_block.html#m_image"><code>image</code></a> macro and the <a href="/glyph/book/macros/macros_block.html#m_figure"><code>figure</code></a> macro, as shown in the following example:</p> <aside class="box"> <div class="box-title">Example</div> <p> The following Glyph code: </p> <div class="CodeRay"> <div class="code"><pre><span class="line-numbers"><a href="#n1" name="n1">1</a></span>image[glyph.svg <span class="line-numbers"><a href="#n2" name="n2">2</a></span> @with[20%] <span class="line-numbers"><a href="#n3" name="n3">3</a></span> @height[20%] <span class="line-numbers"><a href="#n4" name="n4">4</a></span>] <span class="line-numbers"><a href="#n5" name="n5">5</a></span>figure[example.png|An example figure. <span class="line-numbers"><a href="#n6" name="n6">6</a></span> @alt[Example Figure] <span class="line-numbers"><a href="#n7" name="n7">7</a></span>]</pre></div> </div> <p> Is translated into the following HTML code: </p> <div class="CodeRay"> <div class="code"><pre><span class="line-numbers"><a href="#n1" name="n1">1</a></span><span class="tag"><img</span> <span class="attribute-name">src</span>=<span class="string"><span class="delimiter">"</span><span class="content">images/glyph.svg</span><span class="delimiter">"</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">"</span><span class="content">20%</span><span class="delimiter">"</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">"</span><span class="content">20%</span><span class="delimiter">"</span></span> <span class="tag">/></span> <span class="line-numbers"><a href="#n2" name="n2">2</a></span><span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">figure</span><span class="delimiter">"</span></span><span class="tag">></span> <span class="line-numbers"><a href="#n3" name="n3">3</a></span> <span class="tag"><img</span> <span class="attribute-name">src</span>=<span class="string"><span class="delimiter">"</span><span class="content">images/example.png</span><span class="delimiter">"</span></span> <span class="attribute-name">alt</span>=<span class="string"><span class="delimiter">"</span><span class="content">Example Figure</span><span class="delimiter">"</span></span><span class="tag">/></span> <span class="line-numbers"><a href="#n4" name="n4">4</a></span> <span class="tag"><div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">caption</span><span class="delimiter">"</span></span><span class="tag">></span>An example figure.<span class="tag"></div></span> <span class="line-numbers"><a href="#n5" name="n5">5</a></span><span class="tag"></div></span></pre></div> </div> <p>Any attribute passed to the <a href="/glyph/book/macros/macros_block.html#m_image"><code>image</code></a> macro or the <a href="/glyph/book/macros/macros_block.html#m_figure"><code>figure</code></a> macro is automatically passed to the underlying <code><img></code> tag.</p> </aside> <aside class="note"> <span class="note-title">Note</span>In future releases, figures will be numbered automatically and included in a <em>List of Figures</em> section. </aside> <nav class="navigation"><a href="/glyph/book/text_editing/links.html">← Links and Bookmarks</a> | <a href="/glyph/book/index.html">Contents</a> | <a href="/glyph/book/text_editing/code.html">Source Code →</a></nav> |