Seitenverhältnis der Contentbilder über die TYPO3 Bildbearbeitung erzwingen

In vielen modernen Webdesigns sind festgelegte Seitenverhältnisse für die verwendeten Bilder vorgesehen. In Boxen nebeneinander angeordnet, etwa bei Newsbeiträgen, entsteht so ein einheitliches Bild. Stimmt das Seitenverhältnis nicht, werden die Bilder entweder mit unterschiedlicher Breite (bei festgelegter Höhe) oder mit unterschiedlicher Höhe (bei festgelegter Breite) angezeigt.

Bei der Pflege der Seite werden die Bilder jedoch meist von den Redakteuren verwendet, ohne dass sie vorher mit einer Bildbearbeitungssoftware ins richtige Format gebracht werden. Für die Ausgabe auf der Webseite wird deshalb oft das Format der Bilder in den TYPO3 Fluidtemplates festgelegt und die Bilder automatisch auf die richtige Größe zugeschnitten. So ist sichergestellt, dass die Bilder in das vorgegebene Format passen, die Darstellung auf der Webseite einheitlich wirkt. Der Nachteil dabei ist, dass der angezeigte Bildausschnitt nicht selbst gewählt werden kann. Bei einigen Bildern werden bei dieser Methode die wichtigen Bildelemente nicht angezeigt. 

Durch die  Bildbearbeitung, die mit der Version 7.6 ins TYPO3-Backend integriert wurde, gibt es deshalb die Möglichkeit, die Breite oder Höhe eines Bildes in TYPO3 festzulegen, sondern auch, das Bild auf ein bestimmtes Format zuzuschneiden.

Diese vordefinierten Bildformate, die dem Redakteur als Auswahl zur Verfügung stehen, kann man anpassen, so dass der Redakteur die Bilder genau so zuschneiden kann, wie es für die Webseite gebraucht wird. In der TSConfig der Seite werden die Varianten eingegeben, die zur Auswahl stehen sollen:

 

TCEFORM.sys_file_reference.crop.config.cropVariants {
  default {
    title = Default desktop
    selectedRatio = NaN
    allowedAspectRatios {
      NaN {
        title = Frei
        value = 0.0
      }
      1:1 {
        title = Teaserbild 25%
        value = 1.0
      }
      3:2 {
        title = Teaserbox Bild
        value = 1.159090909090909
      }
      2:3 {
        title = Teaserbild 50%
        value = 1.476063829787234
      }
      4:3 {
        title = Sliderimage
        value = 1.425
      }
      3:4 {
        title = Teaserbild 100%
        value = 1.785714285714286
      }
      16:9 {
        title = Contentbild Slider
        value = 2.22
      }
    }
  }
}