Contao-News

Wir informieren Dich hier regelmäßig zu Updates, stellen Best-Practice-Arbeiten vor und berichten über Aktuelles aus dem Contaoversum.

Die 3 Varianten der Bildanpassung in TYPOlight 2.8

Maskottchen der TYPOlight Tipps & Tricks Ecke

Seit der Version 2.8 ermöglicht TYPOlight bei der Bildverkleinerung die Wahl der Verkleinerungsart. Ich möchte hier die Unterschiede der drei Varianten beschreiben, damit klarer ist, wie sie funktionieren. Zur Auswahl stehen:

  • Exaktes Format
  • Proportional
  • An Rahmen anpassen

Wenn man in TYPOlight beim Einbinden eines Bildes Maße für Breite und Höhe angibt, definiert man damit die grundsätzliche Rahmenbox. Diese Box ist nicht sichtbar, sondern dient TYPOlight nur als theoretische Basis für die Berechnung der Verkleinerung.

Für diese Erklärung gehen wir von einem Originalbild mit den Maßen 500x400 (B/H) und einer Rahmenbox mit den Maßen 200x100 (B/H) aus.

Exaktes Format

Dieser Verkleinerungstyp ist am einfachsten zu verstehen, da TYPOlight hierbei das Bild einfach exakt an die Maße der Rahmenbox anpasst (im Beispiel also 200x100). Der Nachteil dabei ist, dass das Bild unter Umständen beschnitten wird und dadurch möglicherweise einen ungeschickten Bildausschnitt aufweist.

Daraus ergibt sich für das Beispiel folgende Berechnung:

  • 500 (Bildbreite Original) wird zu 200 (Breite der Rahmenbox)
  • 400 (Bildhöhen Original) wird zu 100 (Höhe der Rahmenbox)

Proportional

Bei der proportionalen Verkleinerung passt TYPOlight die längere Seite des Bildes an die Rahmenbox an. Im Beispiel wäre das eine Verkleinerung der Bildbreite von 500 auf 200 (entsprechend der Breite der Rahmenbox). Im zweiten Schritt verkleinert TYPOlight dann die andere Seite proportional zum originalen Seitenverhältnis, wobei diese über die Abmessungen der Rahmenbox hinaus ragen kann.

Daraus ergibt sich für das Beispiel folgende Berechnung:

  • 500 (Bildbreite Original) wird zu 200 (Breite der Rahmenbox)
  • 400 (Bildhöhe Original) : Seitenverhältnis 2.5 = 160 (Bildhöhe ragt aus der Rahmenbox heraus)

An Rahmen anpassen

Beim Verkleinerungstyp "An Rahmen anpassen" wird die kürzere Seite des Bildes an die Rahmenbox angepasst. Im Beispiel wäre das eine Verkleinerung der Bildhöhe von 400 auf 100 (entsprechend der Höhe der Rahmenbox). Im zweiten Schritt verkleinert TYPOlight dann die andere Seite wieder proportional zum originalen Seitenverhältnis. Diese Seite wird im Gegensatz zum Verkleinerungstyp "Proportional" jedoch niemals über die Abmessungen der Rahmenbox hinaus ragen.

Daraus ergibt sich für das Beispiel folgende Berechnung:

  • 400 (Bildhöhe Original) wird zu 100 (Höhe der Rahmenbox)
  • 500 (Bildbreite Original) : Seitenverhältnis 4 = 125 (Bildbreite passt immer in die Rahmenbox)

Übrigens …

Wenn ihr bei der Rahmenbox nur einen Wert angebt, ist es irrelevant welchen Verkleinerungstyp ihr wählt. TYPOlight wird automatisch eine proportionale Verkleinerung durchführen, bei der für die Endgröße die Seite ausschlaggebend ist, für die ihr einen Wert definiert habt (auch wenn sie vielleicht die kürzere Seite ist).

Zurück zur News-Übersicht.

Kommentare

Kommentar von Yanick Witschi |

Vielen Dank, Nina!

Kommentar von Oliver Hauser |

danke nina für den aufklärenden und gut erklärten artikel.
genau das brauchen wir für zukünftige TYPOlight schulungen.
oliver

Kommentar von Alexander |

Denke mir gerade, es wäre doch super, wenn solche 'Tipps' über ein Modul direkt in TL im BE angezeigt werden würden. Dann hätten Redakteure immer mal wieder kleine Hilfestellungen.

Grüße nach Berlin
Alexander

Kommentar von Sebastian |

Auch von mir danke für den Tipp. Das „exakte Format“ ist mir aber nicht ganz klar. Wir dabei das Bild verzerrt? Eher nicht, oder? Welcher Teil des Bildes wird dann abgeschnitten? Auf beiden Seiten etwas, oder wird eine Ecke verwendet?

@Alexander: backendhelper

Kommentar von Nina Gerling |

Das Bild wird nicht verzerrt, sondern TYPOlight schneidet ein Stück heraus, wenn es nicht anders machbar ist. Es hängt also davon ab, welches Format das Originalbild hat und welches Format das Bild nach der Anpassung haben soll.

Wenn du ein quadratisches Bild in ein quadratisches Endformat bringst, kann TYPOlight das schön skalieren. Wenn du hingegen z. B. ein absolutes Hochkantbild in ein kleines Quadrat zwängen willst, würde das beim exakten Format dazu führen, dass TYPOlight (ausgehend von der Mitte des Originalbildes - soweit ich das weiß) nur einen Ausschnitt vom Bild anzeigt. Das kann natürlich zu einem sehr unschönen Ergebnis führen (abgeschnittene Köpfe, etc.). Deshalb sollten Redakteure natürlich immer darauf achten, dass möglichst keine extremen Formatwechsel stattfinden wenn sie das exakte Format nutzen möchten.

Kommentar von Sebastian |

Ah, danke Nina!

Kommentar von Leoni |

Genau danach habe ich gesucht. Schön erklärt... vielen lieben Dank.

Kommentar von Bernhard Eckl |

Ich habe bis jetzt noch nicht sooviel mit Contao gemacht und wollte nachfragen, ob es auch möglich ist, den Redakteuren zwei bis drei Bildgrößen vorzuschreiben. Ich bin da etwas verwöhnt mit TYPO3 und Templavoila, da ist das einfach traumhaft was man alles anstellen kann. Ich hätte es mit dma_elementgenerator versucht, ist es damit möglich, die Bildgrößen vorzuschreiben?

Kommentar von Nina Gerling |

Das hängt von der Situation ab. Du kannst beispielsweise für eine News-Liste fix in den Moduleinstellungen dieser Liste vordefinieren, in welcher Größe das News-Bild ausgegeben wird.

Am besten beschreibst du im Contao-Forum deinen gewünschten Anwendungszweck, dann bekommst du sicher Hilfe :)

Einen Kommentar schreiben

Bitte rechnen Sie 3 plus 2.