Module: Responsive Image und Focal Point

Ausgangslage

In der ersten Fassung wurden die Fullwidth Bilder einzige über css beschnitten und je nach screenbreite in verschiedenen Aspect ratios ausgegeben. Dabei wird immer das Originalbild geladen, was viel zu gross ist und einen weiteren Nachteil hat, dass man den Beschnitt nicht bestimmen kann. Mit FocalPoint, können wir jedem Bild sagen, ob er aus der Mitte heraus beschneidet, oder oben, unten, links oder rechts.

Benötigte Module

• Focal point (focal_point) installieren und enablen
• Responsive image (responsive_image) enablen (Core)

Setup

• Image Styles festlegen
  Configuration > Media > Image Styles
  • Gewünschte Image Styles erstellen. Für Modestia haben wir drei Regeln, die wir als «Focal Point Scale and Crop» definieren. Wir verwenden die 1:1 Bildgrössen, die wir in den Mediaqueries gesetzt haben.

    • bis 800px:    4:3
      bis 1400px:   2:1
      > 1400px:     1:0.75
      
      per -- Fullwidth 4:3 → 800 × 600
      per -- Fullwidth 2:1 → 1400 × 700
      per -- Fullwidth 8:3 → 2400 × 900

• Breakpoints definieren
  Zuerst legen wir die von uns benötigten Breakpoints in einer Datei <theme>.breakpoints.yml fest. Ins Theme root speichern.

  • modestia.fullwidth.tablet:           freier Name, muss aber eindeutig sein
      label: Fullwidth tablet            Wird im Backend in der Liste angezeigt
      mediaQuery: '(min-width: 800px)'   HTML-Output im <source> Tag
      weight: 1                          Reihenfolge im Code kleinere Gr. kl. Zahl
      multipliers:						 HTML-Output für Pixeldichte
        - 1x
      group: modestia.fullwidth          Output im Backend für wählbare Gruppe
    
    
    modestia.fullwidth.desktop:
      label: Fullwidth desktop
      mediaQuery: '(min-width: 1400px)'
      weight: 2
      multipliers:
        - 1x
      group: modestia.fullwidth

• Responsive image styles festlegen
  Configuration > Media > Resonsive image styles
  • Add > z.B. per -- Fullwidth Responsive
    bezieht sich dann auf dieses Bildfeld
  • Breakpoint group: modestia.fullwidth
    Die Querygruppe wird in *.breakpoints.yml definiert und hier als einzelne Blöcke ausgegeben, um Image-Style zuzuordnen
  • Fallback image: Dieser Bildstil wird im img Tag innerhalt picture als Fallback angezeigt.
• Responsive Verhalten dem image field zuweisen
  • Manage display:
    • Format: Responsive image
      • Settings: gewünschten Responsive image style auswählen
        (wurde zuvor in den Config > Media > Responsive image styles erstellt)
• Focal point
  Nach Installation vom Modul steht Focal Point an zwei Stellen zur Auswahl:
  • Image Styles:
    Hier gibt es neben den Standardmethoden zusätzlich Focal point Crop, Focal point Crop by width und Focal point Scale and Crop zur Verfügung.
  • Image field > manage form display:
    • Widget: Image (Focal Point)
      • Settings: Vorschaubild auswählen, wo man dann den Focalpoint setzt. Da reicht in der Regel eine kleine 100x100px Preview
        Display preview link: An
        Wenn Preview aktiviert ist, werden dem Benutzer direkt die definierten Vorschauen angezeigt, was sehr hilfreich beim korrekten Positionieren des Focal points ist.