Crop Images in Typo3 Backend. Bildausschnitt im Typo3 Backend. Bilder beschneiden im Backend.

 


Die Sache mit dem Ausschnitt

Typo3 bietet in Fluid einen wunderbaren ViewHelper, um Bilder zu verkleinern und beschneiden. Allerdings führt der Anschnitt eines Bildes – je nach Endformat – immer wieder zu unschönen Ausschnitten. Dieses Fluid-Template…

<f:image src="{image.uid}" maxHeight="200" treatIdAsReference="1" alt="Titel 1" />
<f:image src="{image.uid}" width="100" height="200c" treatIdAsReference="1" alt="Titel 1" />
<f:image src="{image.uid}" width="200" height="200c" treatIdAsReference="1" alt="Titel 2" />
<f:image src="{image.uid}" width="400" height="200c" treatIdAsReference="1" alt="Titel 3" />

… sieht im Hochformat noch gut aus, allerdings wäre es beim Querformat besser, wenn der Bildaussschnitt weiter oben wäre:


 


Der c-Minus-Parameter

Klar: Dazu gibt es einen Parameter, den man hinter das “c” hängen kann. “200c-100″ bedeutet: Beschneide das Bild auf eine Höhe von 200px und nimm den Bild-Ausschnitt von der oberen Kante. Um das Bild von unten anzuschneiden wäre es “200c+100″. So sieht es dann im Fluid aus…

<f:image src="{image.uid}" maxHeight="200" treatIdAsReference="1" alt="Titel 1" />
<f:image src="{image.uid}" width="100" height="200c" treatIdAsReference="1" alt="Titel 2" />
<f:image src="{image.uid}" width="200" height="200c-80" treatIdAsReference="1" alt="Titel 3" />
<f:image src="{image.uid}" width="400" height="200c-50" treatIdAsReference="1" alt="Titel 4" />

… und das Ergebnis ist deutlich besser:

 


Der klassische Workaround

Um das Problem in den Griff zu bekommen ist der häufigste Weg: Innerhalb einer Extension getrennte Datei-Upload-Felder für verschiedene Bildformate. Dadurch kann z.B. das quadratische Bild der ListView einen anderen Bildausschnitt haben als das Bild in der SingleView. Unschön ist daran aber, dass man viele redundante Kopien eines Bildes auf dem Server liegen hat und im Fluid den Fallback von einem Format auf ein anderes relativ umständlich umsetzen muss, abhängig davon in welche Felder Bilder hochgeladen wurden.

 


Eine Extension muss her

Allerdings macht das in der Praxis wenig Sinn, weil man sich meistens in einer ListView mit vielen Bildern befindet, bei dem es schwer wird, eine Einstellung zu finden, die für alle Bilder gleich gut geeignet ist. Besser wäre es, wenn man den Bildausschnitt individuell im Backend von Typo3 bestimmen könnte. Hierzu haben wir eine Extension entwickelt (t3pimper).

Nach dem Upload eines Bildes im FAL erscheinen Masken in verschiedenen Formaten, mit denen man für das Bild den optimalen Bildausschnitt angeben kann:

Das erste Feld “Standard” ist der allgemeine Anschnitt des Bildes. Der Rahmen kann hier frei gesetzt werden. Damit können z.B. störende Ränder oder optische Geräusche aus dem Bild abgeschnitten werden. Die anderen Formate sind in den Proportionen von der Höhe / Breite festgelegt. Man gibt die gewünschten Ausschnitte einfach per Drag & Drop wie beim Beschneidungswerkzeug in Photoshop an:

Danach kann man im ImageViewHelper komplett auf die Angabe des c-Minus-Parameters verzichten. Man gibt einfach die gewünschte Höhe und Breite des Bildes an. Da die Extension den Standard Fluid Typo3-Image-ViewHelper und Uri.Image-ViewHelper manipuliert, wird die Einstellung für den Bildausschnitt für jedes Bild individuell ermittelt. Das macht es sehr einfach und flexibel…

<f:image src="{image.uid}" maxHeight="200" treatIdAsReference="1" alt="Titel 1" />
<f:image src="{image.uid}" width="100" height="200c" treatIdAsReference="1" alt="Titel 1" />
<f:image src="{image.uid}" width="200" height="200c" treatIdAsReference="1" alt="Titel 2" />
<f:image src="{image.uid}" width="400" height="200c" treatIdAsReference="1" alt="Titel 3" />

… ergibt genau die Bildausschnitte, die im Backend festgelegt wurden:

Die Formate für die Beschneidungsrahmen im Backend können bequem per TypoScript-Setup festgelegt werden. Es können beliebig viele Formate angegeben werden – was aber gar nicht nötig ist, wie man gleich sehen wird:

config.t3pimper.imgvariants {
  presets {
    default {
      label = Standard  
    }
 
    square {
      label = Quadrat
      aspectratio = 1:1
    }
 
    landscape {
      label = Querformat
      aspectratio = 2:1
    }
 
    portrait {
      label = Hochformat
      aspectratio = 1:2
    }
  }
}

 


Intelligentes Interpolieren der Formate

Der neue ImageViewHelper vergleicht alle im Backend angegebenen Rahmen und Beschneidungs-Formate mit der in Fluid angegebenen Breite und Höhe. Er entscheidet nicht nur, welcher Ausschnitt am Besten geeignet ist sondern interpoliert auch zwischen den Formaten. Dadurch sind die Bildausschnitte auch für alle Zwischengrößen perfekt:

 


Wo gibt es die Extension?

Die Extension ist zur Zeit noch als “Experimental” gekennzeichnet. Falls Sie Interesse haben, die Extension auszuprobieren, melden Sie sich einfach bei uns!

5 Antworten zu “Crop Images in Typo3 Backend. Bildausschnitt im Typo3 Backend. Bilder beschneiden im Backend.”

  1. Georg Theiss sagt:

    Hallo,

    ich hätte grosses Interesse die Extension zum Beschneiden der Bilder im BE auszuprobieren :-)

    mit besten Grüssen
    Georg Theiss

  2. Hannes Lau sagt:

    Das geht mir genau so. Ich finde die Extension sieht sehr interessant aus und bietet eine Möglichkeit, die ich beim nativen Image Editor in TYPO3 7.5 noch vermisse: Das Speichern mehrerer Ausschnitte zu einem Bild.
    Ich würde mich freuen wenn ich die Extension mal ausprobieren kann. Läuft sie denn schon unter TYPO3 7?

    Nette Grüße
    Hannes

  3. Maik sagt:

    Genau was ich gesucht habe! Ich hätte auch sehr großes Interesse :)

  4. Carsten sagt:

    Ich würde sie auch gern testen.

  5. Christian sagt:

    Ich würde diese Extension sehr gerne testen, genau was ich suche

Eine Antwort hinterlassen