Bildergalerie: Hintergrundfarbe eingebetteter Bilder festlegen

Veröffentlichungsdatum: 05. Mai 2023
Änderungsdatum: 09. Oktober 2023
Projektgrundlage: BASE

Bei eingebetteten Bildern wird der abgeschnittene Bereich mit einer weißen Farbe aufgefüllt. Diese Hintergrundfarbe können Sie individuell festlegen.

Am Beispiel der Bildergalerie "Standard" (Variante 0, Großansicht mit Diavorschau) demonstrieren wir Ihnen, wie Sie diese Galerievariante anpassen können. Die Großansicht eines Bildes soll bei zugeschnittenen Bildern den entstandenen Leerraum mit einer anderen Farbe auffüllen (standardmäßig wird mit weißer Farbe aufgefüllt).

Vor der Anpassung

Bildergalerie-Variante 0 Hintergrundfarbe Standard — Bildergalerie-Variante 0
Hintergrundfarbe Standard

Beispiel: Auszug aus der listPictureGallery.scss zur Bildergalerie-Variante 0

/* ... */
/*@wCssFragment{class:listPictureGallery;variant:0;caption:Standard;caption-en:Default}*/
.listPictureGallery_var0 {
/* ... */
  -w-option-picture-backgroundColor:''; /* Hintergrundfarbe bei transparenten Bildern */
/* ... */
  -w-option-preview-picture-backgroundColor:''; /* Hintergrundfarbe Vorschaubild bei transparenten Bildern */
/* ... */
}
/* ... */

Nach der Anpassung

Bildergalerie-Variante 0 Hintergrundfarbe Individuell — Bildergalerie-Variante 0
Hintergrundfarbe Individuell

Beispiel: Auszug aus der listPictureGallery.scss zur Bildergalerie-Variante 0 mit dunkler Hintergrundfarbe

/* ... */
/*@wCssFragment{class:listPictureGallery;variant:0;caption:Standard;caption-en:Default}*/
.listPictureGallery_var0 {
/* ... */
  -w-option-picture-backgroundColor:'#444444'; /* Hintergrundfarbe bei transparenten Bildern */
/* ... */
  -w-option-preview-picture-backgroundColor:'#444444'; /* Hintergrundfarbe Vorschaubild bei transparenten Bildern */
/* ... */
}
/* ... */

Anhand dieses Beispiels sehen Sie, wie einfach eine bestehende CSS-Only-Variante nach eigenen Vorstellungen angepasst werden kann. Zur Veranschaulichung zeigen die oben ersichtlichen Quelltextbeispiele zur Standardauslieferung (var0) nur die zu ändernden Zeilen.

Für das Großbild wird die CSS-Only-Eigenschaft -w-option-picture-backgroundColor und die kleinen Vorschaubilder -w-option-preview-picture-backgroundColor gesetzt und der gewünschte Farbwert angegeben.

Fertig ist die individuelle Bildergalerie-Variante über reine CSS-Anpassung!