Eine der Sachen, die ich bei Markdown nicht so gut gelungen finde sind Bilder, insbesondere mit Bildunterschriften.
Dafür gibt es ja seit HTML5 das figure-Tag, das zusammen mit img und figcaption genau das macht,
was Blogger und Designer seit Jahrzehnten nachzubauen versuchen.
Dank der Liquid-Template-Sprache, die ich hier einsetzen kann, muss mich das nicht stören, ich kann mit einem einfachen Include selber Bilder einbinden (allerdings vor allem technisch, nicht schön - bin schließlich kein Designer :):
Und das geht so:
In \_includes eine Datei namens image erstellen, die folgenden Code enthält:
<figure>
<img {% if include.title %}alt="{{ include.title }}" {% endif %}src="{{ ASSET_PATH }}/img/{{ include.img }}"/>
{%if include.text %}<figcaption>{{ include.text }}</figcaption>{% endif %}
</figure>
Das Bild auf der Seite einbinden:
{% include image img="vogel.by.anira.jpg" text="Nice Bird" title="bird" %}
Ein bisschen aufhübschen mit CSS
figure {
line-height: 0;
display: inline-block;
border: solid 1px $col_border;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
text-align: center;
margin: 0 1em 0 0;
float: left;
height: auto;
}
Fertig. Wenn ich keine Bildunterschrift will, lasse ich das Attribut einfach weg:
{% include image img='mug.jpg' title="bird" %}
Edit: Seit der Umstellung auf Minimal Mistakes
benutze ich lieber überall den eingebauten Helper figure benutzen:
{% include figure image_path="/assets/images/mug.jpg.jpg" alt="bird" caption="bird" %}
