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


Contents


Image_left_with_caption

Insert template into markdown,

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

Include file: image_left_with_caption.html

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

Example,

ALT TEXT

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

 

Image_left_with_text

Insert template into markdown,

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

Include file: image_left_with_text.html

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

Example,

Ant encased in a drop of amber

Amber is the fossilized form of tree resin. Think of it as 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 caption %} 
CAPTION 
{% endcapture %}{% include image_right_with_caption.html %}

Include file: image_right_with_caption.html

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

Example,

ALT TEXT

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 description %} 
DESCRIPTION 
{% endcapture %}{% include image_right_with_text.html %}

Include file: image_right_with_text.html

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

Example,

ALT TEXT

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.

 

Image_centered_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_centered_with_caption.html %}

Include file: image_centered_with_caption.html

<div>
  <p><img class="centered" height="{{ height }}" src="../i/{{ image }}" alt="{{ alt }}"></p>
</div>
<div class="caption">
  {{ caption | markdownify }}
</div>

Example,

Electric eel

This is an electric eel.

Image_centered_without_caption

Insert template into markdown,

{% capture image %}electric-eel.jpg{% endcapture %} 
{% capture alt %}Electric eel{% endcapture %}
{% capture height %}200px{% endcapture %} 
{% include image_centered_without_caption.html %}

Include file: image_centered_without_caption.html

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

Example,

Electric eel

Caption style

Typical style for a caption,

$grey-color:         #757575 !default;

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