Bilder einbauen mit dem Plugin Jekyll Image Tag
»Flat design vector concept« von Shutterstock

Bilder einbauen mit dem Plugin Jekyll Image Tag

Mit Hilfe des Jekyll Plugins jekyll-image-tag verkleinert und vergrößert man automatisch Bilder. Damit das Jekyll Image Tag funktioniert benötigt man:

Denn Minimagick und Imagemagick übernehmen die eigentliche Aufgabe der Bildbearbeitung.

Jekyll Image Tag installieren

Nachdem man das Plugin über Github heruntergeladen hat, kopiert man die image_tag.rb-Datei in den Jekyll Plugins-Ordner _plugins. Ist der Plugins-Ordner noch nicht vorhanden ist, erstellt man diesen einfach im Jekyll-Projekt-Verzeichnis.

Voreinstellungen (Presets) in _config.yml definieren

Bevor man das Jekyll Image Tag nutzen kann, müssen erst Voreinstellungen, die Presets, in der _config.yml-Datei eingegeben werden. Diese benötigt das Plugin, um die Quelldateien zu finden, um diese anschließend anhand von Parametern zu verkleinern oder zu vergrößern.

image:
  source: assets/images/_fullsize
  output: generated
  presets:
    users:
      attr:
        class: user-portrait
        itemprop: image
      width: 350
    half:
      width: 400
      height: 400

Bilder einbauen mit dem Jekyll Image Tag

Das Liquid-Tag sieht wie folgt aus:

{% image [preset or WxH] path/to/img.jpg class="alignleft" %}

Dabei kann man dem Tag entweder eine vordefinierte Größe als Parameter übergeben oder direkte Pixelangaben machen. Will man z.B. nur die Breite bestimmen und die Höhe soll proportional angepasst werden, gibt man anstelle eines Pixelwertes den Parameter auto an. Das sieht dann so aus:

{% image 300xauto path/to/img.jpg class="alignleft" %}

Bilder einbauen mit Liquid-Variablen

{% image alt="our project" %}

{% image poster.jpg alt="The strange case of Dr. Jekyll" %}
{% image gallery poster.jpg alt="The strange case of Dr. Jekyll" class="gal-img" data-selected %}
{% image 350xAUTO poster.jpg alt="The strange case of Dr. Jekyll" class="gal-img" data-selected %}

{% image {{ post.featured_image }} alt="\{\{ user_name }}" %}