Image Rendering

Optionen und Settings für die gewünschte Bidgröße

Wenn für die Bilder keine Breite und Höher angegeben wird, dann werden diese für "textmedia, textpic, image & t3sb_card" automatisch berechnet.

Bildschirmfoto_2020-07-03_um_22

Die Berechnung ist abhängig von vielen Parametern *). In erster Linie von der Wahl des "Container".
Wenn du den Standard-Container "container" ausgewählt hast, dann ist die max. Bildbreite 1320px.

Wenn du jedoch den "container-fluid" ausgewählt hast, musst du ggf. die folgende Konstante anpassen:

styles.content.textmedia.maxW = 2530

Damit werden die Bilder, die über die gesamte Bildschirmbreite gehen, auch auf einem 27″ Bildschirm in entsprechender Größe bereitgestellt.

Als Alternative kannst du einen technisch notwendigen Cookie mit der aktuellen Bildschirmbreite erstellen lassen.
Hierfür musst du folgende Konstante setzen: bootstrap.image.viewportWidthCookie = 1
Oder im Konstanten Editor unter "T3SB IMAGE SETTINGS"

Wenn ein solcher Cookie existiert und einen Wert aufweist, dann wird dieser zur Berechnung der Bildbreite genutzt!

*) Abhängige Parameter:

  • Backend-Layout - One Colum, Two Columns ...
  • Container-Auswahl - container, container-fluid ...
  • Gallery row width: 100%, 50% ...
  • Position and Alignment: In text, Above ...
  • Number of Columns: 1, 2 ...
  • Parent Gridelement: Two Colums, Three Columns ...
  • ... sowie weitere verschachtelte Gridelemente!

Aufgrund der vielen Parameter und Kombinationen kann es vorkommen, dass die Bildgröße nicht richtig berechnet wird!
Eine Überprüfung im Frontend und manueller Anpassung im Backend ist somit durchaus nützlich.

Mit dem Attribut "srcset" und "sizes" des img-Tags ist es möglich, dass auflösungsabhängig mehrere Bildquellen vorgehalten werden und der Browser nur das passende Bild lädt und anzeigt. Das Attribut "srcset" listet alternative Bildgrößen als Set von Bildern, unter denen der Browser ein Bild aussuchen kann und "sizes" setzt die Bedingungen, zu denen der Browser das Bild aussucht, z.B. nach Größe und Ausrichtung des ViewPorts.

Mit den folgenden Konstanten (Konstanten-Editor) kannst du dises individuell anpassen:

bootstrap.image {
	# Image Sizes for Desktop min-width 1200px: comma-separated list of either image widths specified in pixels.
	srcsetDesktop = 125, 255, 385, 576, 768, 992, 1200
	# Additional Image Sizes for Tablet min-width 576px: comma-separated list of either image widths specified in pixels.
	srcsetTablet = 125, 255, 385, 576, 768, 992, 1200
	# Additional Image Sizes for Mobile max-width 575px: comma-separated list of either image widths specified in pixels.
	srcsetMobile = 60, 100, 200, 385, 575
}

Mit der Option "Gallery row width in %" kannst du die Breite für die "Image-Gallery" in % für die Bilder in den Content Elementen "textmedia", "image" und "textpic" bestimmen.

Standardmäßig steht dieses Auswahlfeld auf "auto".
Damit "auto" (die automatische Berechnung der Galerie-Breite) funktioniert, muss dieses im Konstanten-Editor aktiviert werden.
Aktiviert wird "auto" durch die Deaktivierung von "Disable auto row".

Wenn "Disable auto row" aktiviert ist, entspricht die Auswahl "auto" keiner Auswahl ("none").

Bildschirmfoto-2020-07-03-um-21
Disable "auto row"
Konstanten-Editor unter "T3SB::IMAGE SETTINGS"

Falls du die Option "Image Ratio" nutzen möchtest, hast du zwei Möglichkeiten dieses zu aktivieren:

1. Extension Konfiguration (EM config)

Auswahlfeld aktivieren
Auswahlfeld für "Image Ratio" in der Extension Konfiguration aktivieren

Wenn "Image Ratio" aktiviert ist, erscheint ein Auswahlfeld in der Palette "Media Adjustments".
Hier können vorgegeben Verhältnisse (Breite : Höhe) ausgewählt werden.

Bildschirmfoto-2020-07-03-um-19

2. Konstanten Editor

Bildschirmfoto_2020-07-03_um_20

Im Konstanten-Editor unter "T3SB::IMAGE SETTINGS" kann "Ratio" aktiviert werden.
Danach wird die Eingabe von "Breite jedes Elements" und "Höhe jedes Elements" als Verhältnisse (Breite : Höhe) berechnet.

Die Option "Image Manipulation" wird bei Nutzung von "Ratio" nicht berücksichtigt!

Einstellungen im Konstanten-Editor:

bootstrap.image {
	# Min. width: if enabled the minimum "equalMediaWidth" is set to 575px and therefore 100% wide on mobile.
	minimumWidth = 0
	# Max. image width Media object: the default max. width for the media object.
	maxWidthMediaObject = 200
	# Max. image width Toast: the default max. width for Bootstrap toast.
	maxWidthToast = 20
}
Bildschirmfoto_2021-05-18_um_12

Einstellungen in der "Extension Configuration":

 

Hier hast du die Option ein Image im <img> Tag anstatt im <picture> Tag oder als Original (s.Screenshot).