all repos — h3rald @ b3442cd80d633f1412303de98a8301e8b8fd86c0

The sources of https://h3rald.com

contents/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
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 
-----
title: "Glyph - Images and Figures"
content-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">&lt;img</span> <span class="attribute-name">src</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">images/glyph.svg</span><span class="delimiter">&quot;</span></span> <span class="attribute-name">width</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">20%</span><span class="delimiter">&quot;</span></span> <span class="attribute-name">height</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">20%</span><span class="delimiter">&quot;</span></span> <span class="tag">/&gt;</span>
<span class="line-numbers"><a href="#n2" name="n2">2</a></span><span class="tag">&lt;div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">figure</span><span class="delimiter">&quot;</span></span><span class="tag">&gt;</span>
<span class="line-numbers"><a href="#n3" name="n3">3</a></span>  <span class="tag">&lt;img</span> <span class="attribute-name">src</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">images/example.png</span><span class="delimiter">&quot;</span></span> <span class="attribute-name">alt</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">Example Figure</span><span class="delimiter">&quot;</span></span><span class="tag">/&gt;</span>
<span class="line-numbers"><a href="#n4" name="n4">4</a></span>  <span class="tag">&lt;div</span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">&quot;</span><span class="content">caption</span><span class="delimiter">&quot;</span></span><span class="tag">&gt;</span>An example figure.<span class="tag">&lt;/div&gt;</span>
<span class="line-numbers"><a href="#n5" name="n5">5</a></span><span class="tag">&lt;/div&gt;</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>&lt;img&gt;</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>