Imagine Plugin

Imagine ist ein Herbie Plugin, das die gleichnamige OOP-Library zur Bildbearbeitung Imagine in deine Website einbindet.

Dank Imagine können Bilder direkt bearbeitet und mit vorgefertigten Filtern und Effekten versehen werden. Imagine ist eine objektorientierte Bibliothek zur Bildmanipulation, die auf einem durchdachten Design aufbaut und dabei die aktuellsten Best-Practices nutzt.

Installation

Das Plugin installierst du via Composer.

$ composer require getherbie/plugin-imagine

Danach aktivierst du das Plugin in der Konfigurationsdatei.

plugins:
    enable:
        - imagine

Konfiguration

Unter plugins.config.imagine stehen dir die folgenden Optionen zur Verfügung:

# template path to twig template
template: @plugin/disqus/templates/disqus.twig

# enable shortcode
shortcode: true

# enable twig function and filter    
twig: false

# filter set definition
filter_sets: 
   ...

Filter konfigurieren

Um Imagine in Herbie nutzen zu können, muss für jedes Projekt die Konfiguration angepasst werden. Dabei können ein oder mehrere Filtersätze mit je einem oder mehreren Filtern definiert werden. Im folgenden Konfigurations-Beispiel haben wir zwei einfache Filter zum Skalieren und Ausschneiden eines Bildes erstellt.

# define filter sets for use in shortcode
filter_sets:

    # define resize filter
    resize:                         
        filters:
            thumbnail:
                size: [280, 280]
                mode: inset

    # define drop filter                    
    crop:
        filters:
            crop:
                start: [0, 0]
                size: [560, 560]

Mit dieser Konfiguration stehen dir zwei Imagine-Filter resize und crop zur Verfügung, die du in deinen Seiteninhalten auf Bilder anwenden kannst.

Mit dem folgenden Code wird ein Bild auf eine maximale Grösse von 280 x 280 Pixel skaliert:

[imagine mein-bild.jpg filter="resize"]

Und mit dem folgenden Code ein Bild mit der Grösse 560 x 560 Pixel ausgeschnitten:

[imagine mein-bild.jpg filter="crop"]

Mit dem Aktivieren von Twig kannst du Imagine sowohl als Funkion als auch Filter in deinen Layoutateien nutzen:

# Twig-Funktion
{{ imagine(path="mein-bild.jpg", filter="bsp1") }}

# Twig-Filter
{{ "mein-bild.jpg" | imagine("bsp1") }}    

Parameter

  • path / string / required
  • filter / string / required
  • alt / string
  • class / string
  • id / string
  • style / string
  • title / string
  • width / int / default 0
  • height / int / default 0,
  • media / int / 1

Demo

https://www.getherbie.org/dokumentation/plugins/imagine

Ausführliches Code-Beispiel

Manchmal hilft ein Code-Beispiel mehr als viele Worte. Deshalb folgt hier ein ausführliches Beispiel, angefangen bei der Konfiguration bis zur Ausgabe über den Shortcode-Aufruf.

Konfiguration

In dieser Konfiguration sieht man gut, dass Filter beliebig verkettet werden können. Das Beispiel 2 durchläuft zuerst den Crop- und danach den Thumbnail- Filter.

imagine:
    filter_sets:
        bsp1:
            filters:
                thumbnail:
                    size: [220, 220]
                    mode: inset
        bsp2:
            filters:
                crop:
                    start: [130, 250]
                    size: [520, 390]
                thumbnail:
                    size: [220, 220]
                    mode: inset
        bsp3:
            filters:
                grayscale:
                thumbnail:
                    size: [220, 220]
                    mode: inset
        bsp4:
            filters:
                colorize:
                    color: '#ff0000'
                thumbnail:
                    size: [220, 220]
                    mode: inset
        bsp5:
            filters:
                negative:
                thumbnail:
                    size: [220, 220]
                    mode: inset
        bsp6:
            filters:
                sharpen:
                thumbnail:
                    size: [220, 220]
                    mode: inset
        bsp7:
            filters:
                gamma:
                    correction: 0.3
                thumbnail:
                    size: [220, 220]
                    mode: inset
        bsp8:
            filters:
                rotate:
                    angle: 90
                thumbnail:
                    size: [220, 165]
                    mode: outbound
        bsp9:
            filters:
                flipVertically:
                thumbnail:
                    size: [220, 220]
                    mode: inset
        bsp10:
            filters:
                flipHorizontally:
                thumbnail:
                    size: [220, 220]
                    mode: inset
        bsp11:
            filters:
                resize:
                    size: [220, 165]
        bsp12:
            filters:
                thumbnail:
                    size: [10, 10]
                    mode: inset
                upscale:
                    min: [165, 165]
        bsp13:
            filters:
                relativeResize:
                    method: widen
                    parameter: 200
        bsp14:
            filters:
                relativeResize:
                    method: heighten
                    parameter: 150
        bsp15:
            filters:
                thumbnail:
                    size: [20, 20]
                    mode: inset
                relativeResize:
                    method: scale
                    parameter: 10
        bsp16:
            filters:
                thumbnail:
                    size: [20, 20]
                    mode: inset
                relativeResize:
                    method: increase
                    parameter: 135

Twig-Filter

Die ganze Magie steckt im imagine-Shortcode respektive in der Twig-Funktion bzw. dem Twig-Filter mit der Angabe des vordefinierten Filtersatzes.

[imagine tulpen.jpg filter="bsp1"]
[imagine tulpen.jpg filter="bsp2"]
[imagine tulpen.jpg filter="bsp3"]
[imagine tulpen.jpg filter="bsp4"]
[imagine tulpen.jpg filter="bsp5"]
[imagine tulpen.jpg filter="bsp6"]
[imagine tulpen.jpg filter="bsp7"]
[imagine tulpen.jpg filter="bsp8"]
[imagine tulpen.jpg filter="bsp9"]
[imagine tulpen.jpg filter="bsp10"]
[imagine tulpen.jpg filter="bsp11"]
[imagine tulpen.jpg filter="bsp12"]
[imagine tulpen.jpg filter="bsp13"]
[imagine tulpen.jpg filter="bsp14"]
[imagine tulpen.jpg filter="bsp15"]
[imagine tulpen.jpg filter="bsp16"]

HTML-Ausgabe

Und das Ganze sieht dann im Browser so aus: