Bild einfügen/ersetzen

Für das Einfügen von Bildern können Sie neben den Contao-Inhaltselementen auch die Bildfunktionen des Rich Text Editors nutzen. Ich ziehe in den meisten Fällen die Arbeit mit den Inhaltselementen vor, aber manchmal bietet sich eben auch diese alternative Möglichkeit an.

Klicken Sie auf das Bild einfügen/ersetzen-Symbol. Es öffnet sich ein neues kleines Browser-Fenster, in dem Sie diverse Einstellungen aufgeteilt auf drei Karteireiter vornehmen können.

Ein Bild einfügen

Wenn Sie ein neues Bild einfügen möchten, geben Sie im Karteireiter Allgemein entweder in das Adresse-Eingabefeld die URL zum gewünschten externen Bild ein oder wählen aus dem Bilderliste-Ausklappfenster ein Bild aus der Contao-Dateiverwaltung aus. Wenn Sie ein Bild aus der Dateiverwaltung wählen, wird die lokale Adresse dazu in das Adresse-Eingabefeld eingefügt. Außerdem füllt der Editor die Adresse auch gleich noch in die Beschreibung- und Titel-Eingabefelder ein. Die letzten beiden Eingaben sollten Sie unbedingt noch manuell korrigieren, da sie in der Form keine Aussagekraft haben.

Sie können danach auf die Einfügen-Schaltfläche klicken oder noch weitere Einstellungen innerhalb des kleinen Browser-Fensters vornehmen.

Ein Bild ersetzen/bearbeiten

Wenn Sie ein bestehendes Bild im Rich Text Editor ersetzen oder die Einstellungen bearbeiten möchten, geht das ganz einfach. Setzen Sie den Fokus auf das Bild, indem Sie z. B. mit der Maus darauf klicken. Klicken Sie danach auf das Bild einfügen/ersetzen-Symbol. Nun öffnet sich das bekannte kleine Browser-Fenster, in dem Sie alle Einstellungen vornehmen können.

Wenn Sie z. B. das Bild ersetzen möchten, können Sie einfach aus dem Bilderliste Ausklappfenster ein neues Bild aus der Dateiverwaltung auswählen. Oder Sie löschen den Eintrag im Adresse-Eingabefeld und tragen dort die URL zum neuen externen Bild ein.

Ein Bild löschen

Setzen Sie den Fokus auf das Bild, indem Sie z. B. mit der Maus darauf klicken. Drücken Sie dann auf Ihrer Tastatur die Entf-Taste. Das Bild wird ohne Sicherheitsabfrage aus dem Rich Text Editor entfernt.

Sonstige Bildeinstellungen

Beschreibung

Sie sollten für Bilder möglichst immer einen Alternativtext, sprich eine Kurzbeschreibung des Bildinhaltes angeben. Das wirkt sich einerseits positiv für blinde Nutzer aus. Andererseits dient es auch für Suchmaschinen als Informationsquelle, da diese genauso wie blinde Besucher sonst nicht erkennen können, was auf dem Bild zu sehen ist.

Titel

Ergänzend zur kurzen Bildbeschreibung (Alternativtext) können Sie dem Bild hier auch noch eine etwas erweiterte Beschreibung (Titel) hinzufügen. Der Titel sollte möglichst nicht mehr als 75 Zeichen beinhalten, da manche Browser automatisch längere Bildtitel kürzen.

Vorschau

In der Vorschau sehen Sie das Bild in der Größe, wie es in den Rich Text Editor eingebunden wird.

Ausrichtung

Im Ausrichtung-Ausklappfenster können Sie auswählen, auf welche Art das Bild im Verhältnis zum restlichen Inhalt eingebunden wird.

Achtung

Die technischen Anweisungen, die hinter den Einstellmöglichkeiten des Ausrichtung-Ausklappfensters stecken, wirken sich zum Teil identisch oder sehr ähnlich aus. Der Grund hierfür liegt in den fehlerhaften Interpretationen der CSS -Anweisungen in den verschiedenen Browsern.

Manche Effekte werden auch erst dann sichtbar, wenn sich das Bild in einer Tabelle befindet. Wundern Sie sich deshalb nicht, wenn Sie zwischen manchen Einstellungen keinen Unterschied erkennen können.

Ausrichtungslinien

Die nachfolgenden Beschreibungen gehen davon aus, dass das Bild in einem normalen Absatz mitten im Text eingebunden wurde. In anderen Umgebungen kann es hiervon abweichende Darstellungen geben.

  • Unbestimmt (Standard): Das Bild ist Bestandteil des normalen Objektflusses und richtet sich mit seiner unteren Bildkante an der Grundlinie aus.
  • Zeile: Wirkt sich in den meisten Browsern wie die Einstellung Unbestimmt aus.
  • Oben: Das Bild ist Bestandteil des normalen Objektflusses und richtet sich mit seiner oberen Bildkante an der k-Linie (Textoberkante) aus.
  • Mittig: Das Bild ist Bestandteil des normalen Objektflusses und richtet sich mittig zur Grundlinie aus.
  • Unten: Das Bild ist Bestandteil des normalen Objektflusses und richtet sich mit seiner unteren Bildkante an der p-Linie (Textunterkante) aus.
  • Oben im Text: Wirkt sich in den meisten Browsern wie die Einstellung Oben aus.
  • Unten im Text: Wirkt sich in den meisten Browsern wie die Einstellung Unten aus.
  • Links: Das Bild ist nicht mehr Bestandteil des normalen Objektflusses, sondern wird links platziert und rechts sowie darunter vom Text umflossen.
  • Rechts: Das Bild ist nicht mehr Bestandteil des normalen Objektflusses, sondern wird rechts platziert und links sowie darunter vom Text umflossen.

Ausmaße

Standardmäßig werden hier vom Rich Text Editor in die beiden Eingabefelder die aktuellen Maße des Bildes (Breite und Höhe in Pixel) eingegeben sowie der Haken beim Feld Seitenverhältnis beibehalten gesetzt.

Sie können hier auch ein neues Maß eingeben. Wenn Sie nur eines der beiden Eingabefelder befüllen und der Haken bei Seitenverhältnis beibehalten weiterhin bestehen bleibt, berechnet der Rich Text Editor automatisch das andere Seitenverhältnis relativ dazu.

Wenn Sie hingegen den Haken bei Seitenverhältnis beibehalten entfernen, können Sie beide Maße festlegen. Das Bild wird dann daran angepasst, auch wenn das eventuell zu Verzerrungen führt.

Achtung

Wenn Sie im Rich Text Editor mit diesen Einstellungen die Bildgröße verändern, wird es nur künstlich mit den neuen Maßen dargestellt. Tatsächlich hat es aber weiterhin technisch gesehen die Originalmaße und auch die entsprechende Datengröße. So kann es passieren, dass Sie ein Bild auf der Webseite mit nur 100 x 100 Pixel darstellen, es aber trotzdem 1 Megabyte groß ist und dadurch die Ladezeit der Seite erheblich verlangsamt.

Aus diesem Grund rate ich davon ab, dass Sie Bildmaße mithilfe des Rich Text Editors vornehmen. Setzen Sie stattdessen die normalen Contao-Bildfunktionen ein, da diese bei der Eingabe kleinerer Maße eine Kopie des Originalbildes mit den neuen Maßen und somit verkleinerter Dateigröße einbinden.

Wenn Sie die Bilder dennoch unbedingt mit dem Rich Text Editor einfügen müssen und kleinere Bilder benötigen, sollten Sie die Bilder auf Ihrem Computer mit einem geeigneten Bildprogramm verkleinern und als Variante des Originalbildes in die Contao-Dateiverwaltung laden.

Vertikaler Abstand

In dieses Eingabefeld können Sie den gewünschten vertikalen Abstand des Bildes zum umgebenden Inhalt in Pixel eingeben. Hierfür steht nur ein Eingabefeld zur Verfügung, sodass sich die Eingabe für oben und unten gleichermaßen auswirkt.

Hinweis

Geben Sie Abstände möglichst nur nach Absprache mit Ihrem Webdesigner ein, da derartige Anweisungen im Idealfall global vom Webdesigner definiert werden. Dadurch ist sichergestellt, dass die Abstände auf der ganzen Webseite identisch sind und sich ein gleichmäßiges Formatierungsbild ergibt.

Horizontaler Abstand

In dieses Eingabefeld können Sie den gewünschten horizontalen Abstand des Bildes zum umgebenden Inhalt in Pixel eingeben. Hierfür steht nur ein Eingabefeld zur Verfügung, sodass sich die Eingabe für links und rechts gleichermaßen auswirkt.

Hinweis

Geben Sie Abstände möglichst nur nach Absprache mit Ihrem Webdesigner ein, da derartige Anweisungen im Idealfall global vom Webdesigner definiert werden. Dadurch ist sichergestellt, dass die Abstände auf der ganzen Webseite identisch sind und sich ein gleichmäßiges Formatierungsbild ergibt.

Rahmen

Wenn Sie dieses Eingabefeld befüllen, wird dem Bild ein schwarzer Rahmen zugeteilt. Die Pixelbreite dieses Rahmens richtet sich nach der Zahl, die in das Eingabefeld eingefügt wird.

Hinweis

Geben Sie die Rahmenbreite möglichst nur nach Absprache mit Ihrem Webdesigner ein, da derartige Anweisungen im Idealfall global vom Webdesigner definiert werden. Dadurch ist sichergestellt, dass die Bilddarstellung auf der ganzen Webseite identisch sind und sich ein gleichmäßiges Formatierungsbild ergibt.

CSS-Klasse

Sie können dem Bild auch eine CSS-Klasse zuweisen. Wählen Sie dazu aus dem CSS-Klasse-Ausklappfenster eine der darin von Ihrem Administrator hinterlegten CSS-Klassen aus. Welcher optische Effekt durch diese Klassenauswahl ausgelöst wird, hängt von den von ihm vorgenommenen CSS-Definitionen ab.

Wenn Sie aus dem Ausklappfenster den letzten Eintrag value auswählen, leert sich die Auswahl und Sie können selbst eine CSS-Klasse hineinschreiben. Bedenken Sie dabei aber, dass das nur dann auf der Webseite einen sichtbaren Effekt hat, wenn der Webdesigner/Administrator hierfür eine CSS-Definition in die Webseite eingebunden hat.

Format

Im Feld Format füllt der Rich Text Editor automatisch die CSS-Anweisungen ein, die die zuvor von Ihnen erfolgten Einstellungen z. B. bei Ausrichtung, Vertikaler Abstand oder Rahmen bewirkt haben. Mit entsprechenden CSS-Kenntnissen können Sie hier noch weitere Anweisungen ergänzen.

Alternatives Bild

Mit dieser Funktion bietet Ihnen der Rich Text Editor einen besonderen Effekt für das Bild an. Sie können damit einen Bildwechsel auslösen, der davon abhängt, ob der Besucher mit der Computermaus über das Bild fährt oder die Maus wieder davon wegbewegt.

Achtung

Das Problem dieser Funktion ist, dass sie nur auf Mausbewegung, nicht aber auf Tastaturfokus reagiert. Somit ist der Effekt ausschließlich für Besucher nutzbar, die eine Computermaus einsetzen. Da der Effekt auf JavaScript basiert, wirkt er sich bei hohen Sicherheitseinstellungen (deaktiviertes JavaScript) im Browser des Besuchers ebenfalls nicht aus.

Wenn Sie die Funktion dennoch nutzen möchten, gehen Sie wie folgt vor:

  1. Klicken Sie in das quadratische Feld bei Alternatives Bild, um die Funktion zu aktivieren.
  2. Legen Sie fest, welches Bild statt des Ursprungsbildes angezeigt werden soll, wenn der Besucher mit der Maus über dem Bild verharrt. Geben Sie dazu entweder in das Bei Mauskontakt-Eingabefeld die URL zu einem externen Bild ein oder wählen Sie das gewünschte Bild mithilfe des ersten Bilderliste-Ausklappfensters aus der Contao-Dateiverwaltung aus.
  3. Sie können auch festlegen, welches Bild statt des Ursprungsbildes angezeigt werden soll, wenn der Besucher das Bild mit der Maus wieder verlässt. Geben Sie dazu entweder in das Bei keinem Mauskontakt-Eingabefeld die URL zu einem externen Bild ein oder wählen Sie das gewünschte Bild mithilfe des zweiten Bilderliste-Ausklappfensters aus der Contao-Dateiverwaltung aus. Wenn Sie für den Effekt beim Verlassen des Bildes kein Bild zuweisen, bleibt das erste alternative Bild bestehen.

ID

Hiermit können Sie dem Bild eine eigenständige ID im HTML-Code zuweisen. Darüber kann z. B. Ihr Webdesigner eine individuelle CSS-Einstellung festlegen, die auf dieser Seite nur dieses Bild aufweist. Eine ID darf nur einmalig pro Seite vergeben werden.

Schriftrichtung

Mit dem Schriftrichtung-Ausklappfenster können Sie dem Bild die HTML-Anweisung hinzufügen, mit der Schrift entweder von links nach rechts oder von rechts nach links dargestellt wird.

Achtung

Ganz ehrlich – ich habe nicht die geringste Ahnung, was diese Einstellung bei einem Bild soll. Wie die Bezeichnung schon sagt, ist sie für Schrift (z. B. arabische oder hebräische Schriftzeichen) gedacht und wirkt sich als solche laut meinen Tests überhaupt nicht aus, wenn sie für ein Bild definiert wird.

Auch die offiziellen Vorgaben des W3C–Internetgremiums sprechen ausschließlich vom Einsatz für Text, soweit ich das recherchiert habe. Deshalb rate ich vom Einsatz dieser Option ab, da sie offensichtlich keinen Sinn hat. Diese eigenartige Einstellung basiert übrigens nicht auf Contao, sondern wird vom Rich Text Editor TinyMCE so vorgegeben.

Falls ich mich irre und diese Einstellung doch irgendeinen Sinn ergibt, würde ich mich über einen entsprechenden Hinweis freuen.

Sprachcode

Hier können Sie die genutzte Sprache (für Beschreibung, Titel etc.) gemäß dem ISO 639–1 Standard festlegen. Diese Einstellung macht aber nur Sinn, wenn hier eine andere Sprache als für die restliche Seite eingesetzt wird.

Häufig genutzte Sprachkürzel sind:

  • de für Deutsch
  • en für Englisch
  • es für Spanisch
  • fr für Französisch
  • it für Italienisch
  • ru für Russisch

Image-Map

Wenn Sie eine Image-Map erstellen möchten, müssen Sie dem Bild hierfür eine Angabe für das HTML-Attribut usemap zuweisen. Diese Angabe können Sie hier im Eingabefeld hinterlegen.

Hinweis

Nutzen Sie diese Funktion nur in Absprache mit Ihrem Webdesigner/Administrator, da Sie für eine funktionierende Image-Map noch viele weitere Angaben zur Seite hinzufügen müssen.

Ausführliche Beschreibung

Hinweis

Manche Bilder/Grafiken vermitteln so komplexe Inhalte, dass Redakteure sie gar nicht mit wenigen Wörtern im Alternativtext oder dem Bildtitel adäquat wiedergeben können. Deshalb wurde vom W3C–Internetgremium vor langer Zeit das HTML-Attribut longdesc eingeführt. Die Idee dahinter ist, dass Sie ein Bild damit mit einem speziellen Link versehen, der nur für blinde Nutzer zugänglich ist. Auf dieser verlinkten Seite sollte sich dann eine ausführliche Beschreibung des Bildinhaltes befinden.

Falls Sie dem Bild für blinde Nutzer eine ausführliche Beschreibung beilegen möchten, können Sie hier in das Eingabefeld die URL der Seite eingeben, auf der sich diese Beschreibung befindet. Wenn Sie auf eine interne Seite verlinken möchten, können Sie das mit dem passenden Insert-Tag tun. Mehr Informationen zu Insert-Tags erhalten Sie im Abschnitt, Insert-Tags – Platzhalter für Inhalte.

Achtung

Das longdesc-Attribut ist unter Barrierefreiheitsexperten stark umstritten, da es zwar theoretisch gut gemeint ist, sich aber praktisch kaum auswirkt. Die meisten Screenreader (assistives Hilfsmittel für blinde Nutzer) erkennen dieses Attribut leider gar nicht, sodass der blinde Nutzer gar nicht erfährt, dass hier für ihn vom Redakteur etwas hinterlegt wurde.

Ich empfehle daher, dass Sie wichtige Inhalte, die bisher rein optisch in einem Bild dargestellt werden, nicht mit dieser Funktion in Textform für blinde Nutzer bereitstellen. Stellen Sie die ausführliche Beschreibung stattdessen ganz regulär als Text im normalen Seiteninhalt dar. Das hat auch den entscheidenden Vorteil, dass alle Besucher Ihre Erläuterungen lesen können und somit etwaige Missverständnisse durch die rein visuelle Darstellung mit dem Bild generell vermieden werden.