Schon mal einen Artikel in eZ Publish geschrieben und kein Bild eingefügt? Schaut dann etwas nackt aus, oder? Bilder sind für die Usability der Seite eines der wichtigsten Instrumente. An dieser Stelle kommt daher eine kleine Anleitung, wie in eZ Publish Bilder eingebunden werden können.

 

 

 

 

 

 

In eZ Publish gibt es drei Varianten, Bilder in Texte einzubinden.

Hardcoded im Template

Natürlich kann der Entwickler  ein Bild direkt im Template verankern, was natürlich nur für ganz spezielle Anwendungsfälle überhaupt Sinn ergibt, z.B. für allgemein gültige Gestaltungselemente wie Logos oder seitenübergreifende Key Visuals. Der Redakteur hat mit dieser Variante keine Möglichkeit, das Bild zu ändern, es sei denn er bekommt Zugriff zum Server. Diese Lösung sollte den Spezialfällen vorbehalten bleiben und ansonsten nicht angewendet werden.

<img src={"content_image.gif"|ezimage}  />

Bild über ein Relation Object oder den Bild Datentyp einbinden

Diese Variante ist einer der saubersten und benötigt vom Redakteur kein Vorwissen.

Relation Object

Ein Relation Object ist ein Datentyp, mit dem man Objekte aus anderen Klassen hinzufügen kann, in unserem Fall Bilder. Im Template wird eine Bildgröße definiert und an einer fixen Stelle im Template positioniert.

Hierbei müssen die Bilder zuerst in der Mediendatenbank eingespielt werden. Alternativ besteht die Möglichkeit, Bilder direkt beim Bearbeiten des Artikels in die Mediendatenbank hochzuladen. Dazu muss der Entwickler im Vorfeld aber einige Einstellungen vornehmen.

Bild Datentyp

Bei dem Bild Datentyp werden die Bilder direkt beim Artikel gespeichert und nicht in der Mediendatenbank. Der Nachteil liegt klar auf der Hand: dieses Bild kann du nur in dem einen Artikel verwendet werden und nicht wie bei dem „Relation Object“ in jeder Klasse.

Bild über den eZ Online Editor (eZ OE)

Der eZ Online Editor ist wie schon in anderen Blog Artikel erwähnt, das Herzstück für jeden Redakteur. Über die Bedienung lässt sich in den aktuellen Versionen (< 4.7) streiten. Aber man muss auch zugeben, das der eZ Online Editor mit etwas Übung ein sehr mächtiges Instrument ist.

Über den Editor lassen sich natürlich auch Bilder einbinden.

Zuerst positionieren wir den Cursor auf die gewünschte Position, danach müssen wir einfach auf folgendes Symbol klicken.

Nun stehen uns 2 Möglichkeiten zur Verfügung.

1) wir laden direkt ein Bild hoch
2) wir  wählen ein vorhandenes Bild aus

Variante 1 – direkter Upload

Dazu können wir dem Bild noch diverse Eigenschaften auswählen.

  • Name: Name des Bildes (versteht sich von selbst)
  • Datei (Lokale Bildauswahl)
  • Ort: Wähle den Upload Ort in deiner Bilddatenbank (Ordner/Folder)
  • Alternative text: Dieser Text wird in der Regel für den Alt-Text beim Bild verwendet
  • Beschriftung: Dieser Text ist abhängig von der Entwicklung. (in der Regel wird der Text unterhalb vom Bild angezeigt
  • Tags: Meine Empfehlung hier – tagge dein Bild  (eventuell mit Farbe, Personen – Geschlecht, Art etc.), somit findest du es besser über die Suche.
Variante 2 – Auswahl direkt aus der Medien-Datenbank

Es gibt auch die Möglichkeit, bestehende Bilder aus der Medien-Datenbank auszuwählen. Dazu haben wir wieder drei Möglichkeiten:

1) Search Tab

Über ein Suchfeld kann man nach dem entsprechenden Bild suchen. Der Erfahrung nach funktioniert das in der Praxis aber nicht sonderlich gut, da die Benennung der Bilder von den Redakteuren oft fehlerhaft oder inkonsistent durchgeführt wird. Somit wird es oft auf die zweite Möglichkeit hinauslaufen.

2) Durchsuchen

Hier klickt man sich durch die Medienstruktur und wählt das passende Bild aus. Diese Art kann natürlich etwas länger dauern, wenn man keine vernünftige Ordnerstruktur aufgebaut hat. Ich kenne Kunden die alle Bilder in einem Ordner ablegen, mit der Zeit wird der Ordner größer und größer und dann haben wir 1000 Bilder. Viel Spass beim Suchen.

Deswegen: Überlege dir beim Start des Projekts eine vernünftige Strukturierung für die Mediendatenbank und den Bilderordner. Falls Du dazu Unterstützung brauchst, wende dich einfach an mich.

3) Bookmarks 

Direkter Sprung in ein Bildverzeichnis: Bookmarks können in jeder Übersicht im Backend hinzugefügt werden. Dazu einfach die rechte Spalte aktivieren und ein Bookmark hinzufügen.

Bildgröße und weitere Einstellungen

Ob jetzt Variante 1 oder 2 am Ende führen beide Lösungen auf folgenden Screen:

 

Hier kannst du die Bildgröße sowie weitere Design-relevante Eigenschaften setzen. Ein Feature das oft übersehen wird ist die Option „Edit image“ ganz rechts. Mit dieser Funktion kommst du direkt in die Bearbeitungsmaske des ausgewählten Bildes und kannst das Bild z.B. Beschneiden oder andere Änderungen vornehmen.

Hinweise für den Entwickler

Das Thema mit den Bildern wird oft unterschätzt und erhält zunächst sehr wenig Aufmerksamkeit. Oft kommt die Frage vom Kunden, in welcher Größe muss ich das Bild uploaden, damit es im richtigem Format angezeigt wird. Für den Redakteur sollte das keine Rolle spielen, da die Größen vordefiniert sind und entsprechend automatisch skaliert werden. Alle entsprechenden Einstellungen zu den Bildformaten werden über die image.ini getätigt.

[large]
HideFromRelations=enabled
Filters[]
Filters[]=geometry/scaledownonly=360;440

Diese Einstellung erzeugt ein Bild mit einer Breite von 360 und einer Höhe von 440. Ich empfehle hier immer statt 440 – 999 einzutragen.

In der image.ini werden alle Bildgrößen definiert, viele davon werden vom Redakteur aktiv nicht genutzt. Die Bildgrößenauswahl wird dementsprechend  sehr lang werden und damit verwirrt man die Redakteure. Der Redakteur sollte wirklich nur noch die Bildformate sehen, die für das entsprechende Web-Layout passend sind. eZ OE bietet eine Einstellung womit nicht benutzbare Bildgrößen in der Ini ausblendet werden können.

HideFromRelations=enabled
https://blog.silversolutions.de/wp-content/uploads/2018/12/ez_dummy.pnghttps://blog.silversolutions.de/wp-content/uploads/2018/12/ez_dummy-150x150.pngDavid HohlB2B.praxisCMS,Tipps & TricksSchon mal einen Artikel in eZ Publish geschrieben und kein Bild eingefügt? Schaut dann etwas nackt aus, oder? Bilder sind für die Usability der Seite eines der wichtigsten Instrumente. An dieser Stelle kommt daher eine kleine Anleitung, wie in eZ Publish Bilder eingebunden werden können.             In eZ Publish gibt es...Die e-Commerce B2B Experten bloggen über Händler-Shops, ERP, PIM und das integrierte CMS eZ Publish