getherbie/plugin-imagine

Imagine Plugin for Herbie.

Note: Since version 2.x this plugin is part of Herbie, see https://github.com/getherbie/herbie/tree/2.x/plugins/imagine., _(*1)

Herbie Imagine Plugin

Imagine ist ein Herbie Plugin, das die gleichnamige OOP-Library zur Bildbearbeitung Imagine in deine Website einbindet., _(*2)

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., _(*3)

Installation

Das Plugin installierst du via Composer., _(*4)

$ composer require getherbie/plugin-imagine

Danach aktivierst du das Plugin in der Konfigurationsdatei., _(*5)

plugins:
    enable:
        - imagine

Konfiguration

Unter plugins.config.imagine stehen dir die folgenden Optionen zur Verfügung:, _(*6)

# 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., _(*7)

# 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., _(*8)

Mit dem folgenden Code wird ein Bild auf eine maximale Grösse von 280 x 280 Pixel skaliert:, _(*9)

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

Und mit dem folgenden Code ein Bild mit der Grösse 560 x 560 Pixel ausgeschnitten:, _(*10)

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

Mit dem Aktivieren von Twig kannst du Imagine sowohl als Funkion als auch Filter in deinen Layoutateien nutzen:, _(*11)

# 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://herbie.tebe.ch/dokumentation/plugins/imagine, _(*12)