Bild

Mit diesem Strukturelement kann der Redakteur ein Bild auswählen und in eine Seite einfügen. Unterstützte Bildformate sind JPEG/JPG, PNG und GIF. Das Bild wird automatisch auf die Größe des umschließenden Bereichs gerechnet, falls die Größe nicht manuell definiert wird oder die Originalgröße genutzt werden soll. Zusätzlich lässt sich bereits beim Hochladen, was direkt über das Bildelement geschehen kann, ein Bild auf eine maximale Größe skalieren. Bilder lassen sich als Ganzes oder ausschnittsweise darstellen. Der gewünschte Bildausschnitt ist vom Redakteur über eine komfortable Maske auswählbar. Je nach Projektkonfiguration können Bilder umfänglich gestaltet werden. Neben der Auswahl von Bildrahmen und Bildunterschriften können eigene Layoutvarianten zur Auswahl angeboten werden. Das eigentliche Bild oder auch ein alternatives Bild kann optional als Großansicht geöffnet werden. Beim Überfahren mit der Maus kann ein alternatives Bild eingeblendet werden. Des Weiteren lässt sich von einem Bild auch auf eine beliebige Seite verlinken. Um auch sehbehinderten Besuchern die Seite zugänglich zu machen, sind Alternativtexte standardmäßig als Pflichtfeld definiert. Die Qualität und damit die zu übertragende Datenmenge lässt sich global oder alternativ pro Bild einstellen.

Beispiele / CSS-Only-Varianten ab CMS 10.x

Variante 0: Standardarstellung

Bild
Bild

Variante 60: Rund

Bild
Bild

Variante 100: elementPicture_var100

Bild

Variante 120: Mit Download-Link

Bild mit Download-Link 
Bild mit Download-Link
 

Versionshistorie

002.000.738.000 12.09.2016
Über die CSS-Only Option -w-embedIfLocalSVG:yes lässt sich in der jeweiligen Variante des Bildelementes einstellen, ob eine lokal verfügbare SVG-Datei direkt als SVG-Markup in das HTML-Dokument eingebettet werden soll. In dem Fall lassen sich dann z.B. Farben im CSS anpassen.
002.000.724.000 17.08.2016
Die Bildpflegemaske unterstützt nun folgende erweiterten CSS-Only Anpassungsmöglichkeiten: -w-editmaskExtended-size:no;-w-editmaskExtended-align:no;-w-editmaskExtended-layout:no;-w-editmaskExtended-usedirectoryofsite:no.
002.000.567.000 08.10.2015
Neue CSS-Only Variante zum Download des Originalbildes verfügbar.
002.000.524.000 27.07.2015
Bilder lassen sich auch zu internen Sprungmarken verlinken.
002.000.470.000 12.03.2015
Das Bild-Element unterstützt nun auch CSS-Only-Varianten.
002.000.455.000 03.03.2015
In Verbindung mit der aktuellsten Software lässt sich per Klick ein Bildverzeichnis für die aktuelle Seite anlegen, um so noch schneller neue Bilder zu veröffentlichen.
002.000.414.000 26.01.2015
Das Durchblättern von Lightbox-Bildern kann auf einen Bereich eingeschränkt werden.
002.000.334.000 17.09.2014
Erweiterte Klassendefinitionen für responsive Darstellung im Newsletter verfügbar.
002.000.314.000 14.08.2014
Die Klassendefinition wurde um die Art der Größenanpassung erweitert.
002.000.305.000 29.07.2014
Ein verlinktes Bild kann auch über tel:123 eine Telefonnummer enthalten.
002.000.296.000 23.06.2014
Das Zoom-Icon lässt sich rein über CSS definieren.
002.000.289.000 12.06.2014
Sonderzeichen in optionalen Links werden maskiert.
002.000.167.000 13.11.2013
Das Icon zum Öffnen der Bildpflegemaske ist rechts ausgerichtet.
002.000.147.000 06.11.2013
Lazy loading wird unterstützt.
002.000.109.000 02.10.2013
Innerhalb eines Tab-Containers wurde die Bildunterschrift nicht immer korrekt aufgespannt.
002.000.107.000 27.09.2013
Bild, Link und Titel haben jeweils eigene IDs.
002.000.097.000 02.08.2013
Falls über die Projektkonfiguration die beliebige Bildgrößenauswahl deaktiviert wurde, stehen die darin vordefinierten Breiten weiterhin zur Auswahl.
002.000.087.000 21.05.2013
Bilder können auch mit JavaScript-Links versehen werden.
002.000.085.000 02.04.2013
Der Bildtitel wird automatisch gesetzt, wenn er neu aus den Metadaten übernommen wird.
002.000.082.000 26.03.2013
Bilder mit Fancybox-Funktion lassen sich gruppieren und somit in geöffnetem Zustand durchklicken.
002.000.055.000 08.01.2013
Der Pinterest Button lässt sich in der Projektkonfiguration für Bildelemente aktivieren.
002.000.048.000 20.12.2012
In der Projekteinstellung lassen sich vordefinierte Bildbreiten festlegen, die bei relativer Angabe über CSS angepasst werden können.
002.000.031.000 02.12.2012
Die Anzahl der GET-Anfragen im Editor wurde reduziert.
001.000.107.000 26.10.2012
Die optional auswählbare Klasse wird dem Element auf oberster Ebene hinzugefügt.
001.000.099.000 25.07.2012
Filter für Dateiendungen gif, jpg und png sind bereits voreingetragen.
001.000.087.000 19.06.2012
In der mobilen Version werden Bilder, die standardmäßig in der Originalgröße angezeigt werden, skaliert, falls diese größer als die mobile Breite sind.
001.000.084.000 06.06.2012
Falls das Bild in der design.css als display:inline-block definiert war, wurde es im Editor beim Einsatz des Firefox ggf. zu groß dargestellt.
001.000.062.000 04.02.2012
Für das Detailbild kann eine Größe definiert werden, falls das in der Projektkonfiguration erlaubt wird.
001.000.059.000 09.01.2012
Bildbreite und Bildhöhe werden auch dann im IMG-Tag ausgegeben, wenn ein Bild in Originalgröße angezeigt wird.
001.000.056.000 20.12.2011
Falls ein sprachabhängiger Titel im Bild hinterlegt ist, wird dieser abhängig von der Projektsprache angezeigt.
001.000.048.000 24.11.2011
Der Titel des eingebundenen Bildes kann automatisch aus den Metadaten ermittelt werden. Als anklickbares Detailbild kann das Standardbild genutzt werden, ohne es erneut eintragen zu müssen.
001.000.040.000 04.11.2011
Interne Links sind möglich. Falls in der Konfiguration definiert, können individuelle CSS-Klassen pro Bild ausgewählt werden.
001.000.030.000 25.10.2011
Rahmen, Bildunterschriften und Symbole für Detailansichten werden im Editor angezeigt.
001.000.022.000 01.09.2011
Die Smart-Upload-Funktion steht im Bildelement zur Verfügung.
001.000.011.000 05.07.2011
Rahmen werden auch bei der Anzeige in der Originalgröße unterstützt.
001.000.010.000 04.07.2011
Falls das Originalbild kleiner als die automatisch angepasste Größe ist, bekommt der Redakteur einen Hinweis.
001.000.008.000 07.04.2011
Der optionale Link wird validiert und falls er nicht mit / oder http:// beginnt, wird ein Hinweis ausgegeben.