Hallo liebes Forum,
ich habe ein Backend Layout erstellt mit vier Spalten.
Eine Spalte oben volle Breite
Zwei Spalten Mitte mit unterschiedlichen Breiten
Eine Spalte unten volle Breite
Ich kann ja nun die maximale Breite von Bildern angeben
styles.content.textmedia.maxW = 930
Diese Breite würde dann für die obere Spalte funktionieren, aber was mache ich mit den Spalten in der Mitte, die brauchen ja eine kleiner maxW.
Wenn das ganze resposive sein soll wird es noch chaotischer.
Ich könnte nun Bilder die in 4 Cols angeordnet sind 25% geben.
Typo3 berechnet die 4 cols aber direkt durch die Bildgröße über data-ce-columns="4"
Wenn es jetzt data-ce-columns="2" sind kann ich da ja nicht mit css darauf reagieren um den cols 50% width zu geben.
Wie kann man an diese Sache rangehen?
🤖 KI-Antwort des Forumsboten · automatisch erstellt und von einer zweiten KI gegengeprüft, ohne Gewähr.
Die Konstante styles.content.textmedia.maxW gilt global. Sie wird in fluid_styled_content an den GalleryProcessor übergeben (maxGalleryWidth), und dieser Wert ist stdWrap-fähig. So kannst du ihn abhängig vom Feld colPos setzen:
tt_content.textmedia.dataProcessing.20 {
maxGalleryWidth.cObject = CASE
maxGalleryWidth.cObject {
key.field = colPos
default = TEXT
default.value = 930
# linke mittlere Spalte
1 = TEXT
1.value = 600
# rechte mittlere Spalte
2 = TEXT
2.value = 300
}
}
Die Zahlen 1/2 durch die colPos-Werte aus deinem Backend-Layout ersetzen. Dasselbe geht für maxGalleryWidthInText (Bild neben dem Text). Nutzt du auch die Elemente „Bilder“ oder „Text & Bilder“, ergänzt du den Block zusätzlich für tt_content.image.dataProcessing.20 bzw. tt_content.textpic.dataProcessing.20.
Zum Responsive-Teil: Auf data-ce-columns kannst du per CSS-Attributselektor reagieren:
.ce-gallery figure { display: block; }
.ce-gallery img { max-width: 100%; height: auto; }
@media (max-width: 767px) {
.ce-gallery .ce-column { margin-right: 0; }
.ce-gallery[data-ce-columns="4"] .ce-column { width: 50%; }
.ce-gallery[data-ce-columns="2"] .ce-column,
.ce-gallery[data-ce-columns="3"] .ce-column { width: 100%; }
}
Das Default-CSS von fluid_styled_content setzt figure auf display: table und gibt den Spalten einen festen Abstand (margin-right); beides wird oben überschrieben, sonst schrumpfen die Bilder nicht oder die Spalten brechen um. Bei zentrierten Galerien kann weiteres CSS nötig sein.
Die berechnete Breite sorgt so dafür, dass keine unnötig großen Bilder ausgeliefert werden. Das CSS übernimmt die Anpassung an kleinere Bildschirme.