Image templates

Insert these useful templates into markdown documents to embed images into articles. There are variations for left/center/right images along with text-style or caption-style. Each template is paired with an html include file you save in your _includes folder.

---

Contents

• Centered image
• Image_left_without_caption
• Image_left_with_caption
• Image_left_with_text
• Image_right_with_caption
• Image_right_with_text
• Caption style

---

Centered image

Use conventional markdown syntax for most centered images without a caption,

![Ant in amber](/i/ant_in_amber.jpg){: .centered }{: height="200px" :}

or with a caption,

![Ant in amber](/i/ant_in_amber.jpg){: .centered }{: height="200px" :}

An ant preserved in amber.
{: .caption :}

An ant preserved in amber.

Image_left_without_caption

Insert template into markdown,

{% capture image %}IMAGE FILE NAME{% endcapture %} 
{% capture alt %}ALT TEXT{% endcapture %}  
{% capture height %}200px{% endcapture %}  
{% capture description %} 
DESCRIPTION 
{% endcapture %}{% include image_left_without_caption.html %}

Include file: _includes/image_left_without_caption.html

<div>
  <p><img height="{{ height }}" src="../i/{{ image }}" alt="{{ alt }}"></p>
</div> 
<div style="clear: both;"></div>

Example,

Regular text follows.

Image_left_with_caption

Insert template into markdown,

{% capture image %}IMAGE_FILE_NAME{% endcapture %}
{% capture alt %}ALT TEXT{% endcapture %}
{% capture height %}200px{% endcapture %} 
{% capture caption %}
CAPTION
{% endcapture %}{% include image_left_with_caption.html %}

Include file: _includes/image_left_with_caption.html

<div style="clear: both;">
  <div style="float: left; margin-right: 1em;">
    <img height="{{ height }}" src="../i/{{ image }}" alt="{{ alt }}">
  </div>
  <div class="caption">
    {{ caption | markdownify }}
  </div>
</div>
<div style="clear: both;">&nbsp;</div>

Example,

This is an ant captured in a fossilized droplet of amber.

 

Image_left_with_text

Insert template into markdown,

{% capture image %}IMAGE FILE NAME{% endcapture %} 
{% capture alt %}ALT TEXT{% endcapture %}  
{% capture height %}200px{% endcapture %}  
{% capture description %} 
DESCRIPTION 
{% endcapture %}{% include image_left_with_text.html %}

Include file: _includes/image_left_with_text.html

<div style="clear: both;">
  <div style="float: left; margin-right: 1em;">
    <img height="{{ height }}" src="../i/{{ image }}" alt="{{ alt }}">
  </div>
  <div>
    {{ description | markdownify }}
  </div>
</div>
<div style="clear: both;">&nbsp;</div>

Example,

Amber is the fossilized form of tree resin, basically a natural form of plastic.

 

Image_right_with_caption

Insert template into markdown,

{% capture image %}IMAGE FILE NAME{% endcapture %} 
{% capture alt %}ALT TEXT{% endcapture %} 
{% capture height %}200px{% endcapture %}   
{% capture caption %} 
CAPTION 
{% endcapture %}{% include image_right_with_caption.html %}

Include file: _includes/image_right_with_caption.html

<div style="clear: both;">
  <div style="float: right; margin-left: 1em;">
    <img height="{{ height }}" src="../i/{{ image }}" alt="{{ alt }}">
  </div>
  <div class="caption">
    {{ caption | markdownify }}
  </div>
</div>
<div style="clear: both;">&nbsp;</div>

Example,

Dial of a typical multimeter.

 

Image_right_with_text

Insert template into markdown,

{% capture image %}IMAGE FILE NAME{% endcapture %} 
{% capture alt %}ALT TEXT{% endcapture %} 
{% capture height %}200px{% endcapture %}    
{% capture description %} 
DESCRIPTION 
{% endcapture %}{% include image_right_with_text.html %}

Include file: _includes/image_right_with_text.html

<div style="clear: both;">
  <div style="float: right; margin-left: 1em;">
    <img height="{{ height }}" src="../i/{{ image }}" alt="{{ alt }}">
  </div>
  <div>
    {{ description | markdownify }}
  </div>
</div>
<div style="clear: both;">&nbsp;</div>

Example,

Find the ‘diode’ setting on your multimeter. This can be used to determine the forward conducting direction of the diode. Use this if the marking on the diode is unclear.

 

Caption style

Typical style for a caption, specified in assets/main.scss,

$grey-color:         #757575 !default;

.caption {
    color: $grey-color;
    font-size: $small-font-size;
}