Vorschaubild einfügen/bearbeiten

Mit dem Vorschaubild einfügen/bearbeiten-Symbol können Sie ebenfalls ein Bild einfügen.

Im Unterschied zum Bild einfügen/ersetzen-Symbol wird damit jedoch ausschließlich ein Bild aus der Contao-Dateiverwaltung als Vorschaubild eingebunden und mit einem Lightbox-Effekt (Vergrößerungsfunktion) versehen.

Das Bild wird nicht sichtbar im Rich Text Editor eingebunden, sondern die Hilfsfunktion generiert aus den Einstellungen das vollständige Insert-Tag, das erst auf der Webseite von Contao in ein sichtbares Bild umgewandelt wird. Mehr Informationen zu Insert-Tags erhalten Sie im Abschnitt, Insert-Tags – Platzhalter für Inhalte.

Vorschaubild einfügen

Wenn Sie auf das Vorschaubild einfügen/bearbeiten-Symbol klicken, öffnet sich ein kleines Browser-Fenster mit folgenden Einstellmöglichkeiten:

  • Bilderliste: Wählen Sie aus dem Bilderliste-Ausklappfenster das gewünschte Bild in der Contao-Dateiverwaltung.
  • Bild-URL: Sobald Sie im Bilderliste-Ausklappfenster eine Auswahl getroffen haben, schreibt Contao automatisch in das Bild-URL -Eingabefeld die passende Pfadangabe zum Bild auf dem Webspace.
  • Breite/Höhe: Geben Sie bei Bedarf in das erste Eingabefeld die Breite und in das zweite Eingabefeld die Höhe in Pixel ein, mit der das Vorschaubild auf der Webseite angezeigt werden soll.
  • Modus: Wählen Sie den Modus aus, mit dem Contao das Vorschaubild auf die neu definierten Größenangaben skalieren soll. Zur Auswahl stehen die Skalierungsmodi Exaktes Format, Proportional und An Rahmen anpassen. Wenn Sie bei der vorhergehenden Einstellmöglichkeit nur einen Wert (Breite oder Höhe) angegeben haben, ist es irrelevant, welchen Modus Sie hier wählen. Contao greift dann automatisch auf die proportionale Skalierung zurück.
  • 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.
  • CSS-Klasse: Hier können Sie eine individuelle CSS-Klasse für das Vorschaubild einstellen. Welche CSS-Klassen Sie nutzen können, erfahren Sie normalerweise von Ihrem Administrator oder Webdesigner.
  • Lightbox: Mit dem Lightbox-Ausklappfenster können Sie das verlinkte Bild mit unterschiedlichen Effekten öffnen. Wählen Sie aus dem Lightbox-Ausklappfenster den Eintrag Einzelnes Element, wenn Sie einfach den ganz normalen Lightbox-Vergrößerungseffekt aktivieren möchten. Mit dem Eintrag Galerie können Sie zwischen mehreren Bildern eine Verbindung herstellen. Wenn auch noch andere Bilder auf der Seite diesen Lightbox-Eintrag haben, sind diese Einträge miteinander im Mediabox-/Slimbox-Fenster verbunden, sodass der Besucher darüber von einem Bild zum anderen wechseln kann. Wenn Sie aus dem Lightbox-Ausklappfenster den Eintrag value auswählen, leert sich das Ausklappfenster und bietet Ihnen die Möglichkeit, ein sogenanntes rel-Attribut einzugeben.

Bestätigen Sie die gewählten Einstellungen mit einem Klick auf die Einfügen-Schaltfläche.

Vorschaubild bearbeiten

Markieren Sie das gesamte Insert-Tag, beginnend bei {{image:: bis hin zu den schließenden doppelten Spitzklammern }}. Klicken Sie danach auf das Vorschaubild einfügen/bearbeiten-Symbol. Nun öffnet sich wieder das kleine Browser-Fenster, mit den bereits ausgewählten Einstellungen, die Sie wie gewünscht verändern können.

Bestätigen Sie die Änderungen mit einem Klick auf die Einfügen-Schaltfläche.

Vorschaubild löschen

Markieren Sie das gesamte Insert-Tag beginnend bei {{image:: bis hin zu den schließenden doppelten Spitzklammern }}. Betätigen Sie danach auf dem Keyboard die Entf-Taste, um das Insert-Tag zu löschen.