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.

Pending question

Can I make use of the link check? RC step response circuit


Contents


Image_centered_without_caption

Insert template into markdown,

{% capture image %}IMAGE_FILE_NAME{% endcapture %} 
{% capture alt %}ALT_TEXT{% endcapture %}
{% capture height %}200px{% endcapture %} 
{% include image_centered_without_caption.html %}

Include file: _includes/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

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: _includes/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_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>

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,

Ant in droplet of amber

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,

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 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,

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 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,

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.

 

Caption style

Typical style for a caption,

$grey-color:         #757575 !default;

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