Bilder, Linien, Zeichnungen – Dokumentation

Das Plugin läuft im Frontend der Website und wendet den ausgewählten Bildeffekt auf Bilder an, sofern diese nicht durch einen Filter ausgeschlossen werden.

Empfohlene Konfiguration: Wählen Sie einen globalen Effekt und eine globale Form aus, schränken Sie bei Bedarf den Anwendungsbereich ein und fügen Sie anschließend ID- oder Klassenregeln für Bereiche hinzu, die einen anderen Effekt oder eine andere Form erfordern.

Globaler Effekt und Form

Dies sind die Standardeinstellungen für Bilder, auf die keine Überschreibungsregel zutrifft.

• Künstlerischer Bildeffekt
  • Original (0): Das Quellbild bleibt unverändert. Die ausgewählte Form kann es dennoch maskieren oder beschneiden.
  • Zeichnung (1): Wendet den Bleistiftzeicheneffekt an.
  • Aquarell (2): Wendet den Aquarelleffekt an.
• Bildform: Wählen Sie rectangle, circle, ellipse, diamond, hexagon, splash, shape1 aus shape6oder random. „Zufällig“ wählt aus den verfügbaren Masken „Form 1–6“ aus.

Zeichen- und Animationsoptionen

• Zeichenmodus: Legt das Erscheinungsbild der Zeichnung fest: Sepia oder Weiß. Wird für den Zeicheneffekt angezeigt.
• Effektstärke: Steuert die Intensität des Zeichnungs- oder Aquarelleffekts. Wählen Sie „Sanft“, „Leicht“, „Normal“, „Stark“ oder „Sehr stark“.
• Mauszeiger über Bildern: Wählen Sie für „Zeichnung“ und „Aquarell“ aus, ob beim Bewegen des Mauszeigers über ein Teamelement das Originalbild angezeigt wird oder der Effekt weiterhin sichtbar bleibt.
• Bildkonturen animieren: Zeichnet Bildkonturen mit animierten SVG-Strichen. Die Konturfarbe wird bei „Aquarell“ aus dem Foto entnommen und kann beim Zeicheneffekt über die „Zeichenfarbe“ festgelegt werden.
• Bildhintergrund einblenden: Blendet das Bild nach und nach von der Mitte aus ein, während die Konturen gezeichnet werden. Diese Funktion kann mit oder ohne Konturanimation verwendet werden.
• Zeichenfarbe: Legt die Farbe des Konturstrichs fest, wenn die Konturanimation für den „Zeichnen“-Effekt aktiviert ist.
• Animationsdauer: Dauer der Kontur- und/oder Hintergrund-Einblendanimation. Einstellbar von 1 bis 10 Sekunden in Schritten von 0,5 Sekunden.
• Strichbreite: Breite der animierten Konturstriche, von 0,5 bis 3 Pixel.

Überschreibungen für Effekt, Form und Bildbereich ersetzen nur den Effekt und die Form. Zeichenmodus, Ebene, Hover-Verhalten, Konturanimation, Hintergrundeinblendung, Dauer, Strichbreite und Zeichenfarbe bleiben globale Einstellungen.

Menüpunkte und Bildfilter

Bei Menüelementen aktivieren

Wählen Sie die Joomla-Menüelemente aus, bei denen das Plugin ausgeführt werden soll. Lassen Sie die Auswahl leer, um es bei allen Menüelementen auszuführen. Diese Einstellung steuert, ob das Plugin auf der Seite geladen wird.

Bildbereichs-Filtermodus

Bildbereichs-IDs und -Klassen identifizieren ein Element und alle darin verschachtelten Bilder. Der Filtermodus bestimmt, ob übereinstimmende Bereiche einbezogen oder ausgeschlossen werden:

• Übereinstimmende Bereiche ausschließen: Verarbeite Bilder mit Ausnahme derjenigen, die sich innerhalb einer übereinstimmenden ID oder Klasse befinden. Dies ist die Standardeinstellung.
• Nur übereinstimmende Bereiche einbeziehen: Bilder werden nur verarbeitet, wenn sie sich innerhalb einer übereinstimmenden ID oder Klasse befinden. Sind beide Filterlisten leer, gibt es keine übereinstimmenden Bilder.

Bildbereichs-IDs und -Klassen

Geben Sie eine oder mehrere IDs oder Klassennamen ein, getrennt durch Kommas, Semikolons oder Leerzeichen. Lassen Sie das CSS-Präfix weg (das Plugin akzeptiert auch ein optionales # oder .). Hierbei handelt es sich um Filter, nicht um Effektregeln; konfigurieren Sie bereichsspezifische Effekte in den untenstehenden Überschreibungsfeldern.

IDs:     hero, article-images
Classes: gallery, product-photo

Einstellungen pro ID und pro Klasse

Verwenden Sie diese Felder, um verschiedenen Bereichen eigene Effekte und Formen zuzuweisen. Fügen Sie genau eine Regel pro Zeile in diesem Format hinzu:

target|effect|shape

• target: eine Element-ID oder einen Klassennamen. Geben Sie den reinen Namen ein; ein vorangestelltes # oder . ist optional.
• effect: 0 = Original, 1 = Zeichnung, 2 = Aquarell.
• shape: rectangle, circle, ellipse, diamond, hexagon, splash, shape1 bis shape6, oder random.

Beispiele

Zeichnungseinstellungen nach ID:

team-portraits|1|circle
homepage-gallery|2|shape3
brand-logo|0|rectangle

Zeichnungseinstellungen nach Klasse:

staff-photo|1|hexagon
watercolor-gallery|2|random

Im ersten Beispiel werden der Zeichnungseffekt und eine Kreisform auf Bilder innerhalb des Elements mit der ID team-portraits. Im zweiten Beispiel werden „Aquarell“ und „Form 3“ auf Bilder innerhalb von homepage-gallery. Ein Effekt von 0 lässt das Bild unverändert, wendet aber dennoch die ausgewählte Form an.

Welche Regel hat Vorrang?

1. Die ID, die am besten mit der des Bildes oder eines seiner übergeordneten Elemente übereinstimmt, hat Vorrang vor jeder Klassenregel.
2. Wenn keine ID-Regel passt, hat die am besten passende Klassenregel Vorrang.
3. Wenn keine Überschreibungsregel passt, werden der globale Effekt und die globale Form verwendet.

Verwenden Sie eine Regel für jede ID oder Klasse. Trennen Sie die drei Werte durch einen senkrechten Strich (|), nicht durch ein Komma. Die gesamte Regel muss in einer Zeile stehen. Ungültige Zeilen werden ignoriert und in der Browserkonsole gemeldet.

Überschreibungen wählen Bereiche unabhängig vom Ein-/Ausschlussfilter aus. Ein Filter kann einen Bereich dennoch von der Verarbeitung ausschließen. Um eine Überschreibung im Einbeziehungsmodus zu verwenden, muss ihr Bereich zudem mit einer der Bildbereichs-IDs oder Bildbereichsklassen übereinstimmen.

Cache, jQuery und benutzerdefiniertes CSS

• Cache für Zeicheneffekte: Entfernt generierte Zeichen- und Aquarelldateien aus dem Cache für Zeicheneffekte des Plugins. Verwenden Sie diese Option nach Änderungen, wenn generierte Bilder neu erstellt werden sollen.
• jQuery laden: Lädt die im Plugin enthaltene jQuery-Kopie, wenn die Option auf „Ja“ gesetzt ist. Lassen Sie die Option deaktiviert, wenn die Website die erforderliche Bibliothek bereits bereitstellt oder Sie diese nicht benötigen.
• Benutzerdefiniertes CSS: Fügt der Frontend-Seite CSS-Deklarationen hinzu. Verwenden Sie diese Option für Anpassungen am Styling; fehlerhaftes CSS kann das Erscheinungsbild der Seite beeinträchtigen.

Fehlerbehebung

• Ein Bild wird nicht verarbeitet: Überprüfen Sie die Auswahl des Menüpunkts sowie die Listen für Filtermodus, ID und Klasse. Im Modus „Einbinden“ muss mindestens ein konfigurierter Filter mit einem übergeordneten Element des Bildes übereinstimmen.
• Eine Überschreibung wird nicht angewendet: Vergewissere dich, dass die Element-ID oder -Klasse auf dem Bild oder einem übergeordneten Element vorhanden ist, verwende eine einzelne target|effect|shape Zeile und überprüfen Sie die Schreibweise der Form sowie die Effektnummer.
• Das Erscheinungsbild des Bildes wurde nicht aktualisiert: Leeren Sie den Cache für Zeicheneffekte und laden Sie die Seite anschließend neu. Möglicherweise ist auch eine Aktualisierung des Browser-Caches erforderlich.
• Animationen sind nicht sichtbar: Vergewissern Sie sich, dass die entsprechende Animationsoption aktiviert ist, und prüfen Sie, ob der Browser oder das Gerät eine Reduzierung der Bewegungsdarstellung anfordert.