HDBLOG


Kategorien


Neueste Beiträge


Neueste Kommentare


Archive


HDNET GmbH & Co. KG


Ravensbeger Str. 22
33824 Werther (Westf.)
Impressum | Datenschutz

HDBLOG

/ 11

TYPO3

Der passende Bildausschnitt auf jedem Gerät

25th Juni 2015

Je kleiner das Gerät auf dem eine Website angezeigt wird, desto wahrscheinlicher, dass Details in Bildern verloren gehen. Ein Problem, dass sich nur mit der Veränderung des Bildausschnittes lösen lässt. Die automatisierte Anpassung liefert meist nicht die besten Ergebnisse, die manuelle Speicherung unterschiedlicher Versionen ist hingegen zu aufwändig und zeitintensiv. Die Kombination aus beidem bringt den Erfolg.

Mit FocusPoint den Bildausschnitt wählen

Das jQuery-Plugin FocusPoint von Johnathon Menz ermöglicht die Anzeige eines Bildes in unterschiedlichen Formaten, ohne Verlust des wichtigsten Bildbereichs. Um das zu realisieren, wird dem Bild eine sogenannter „Fokus-Punkt“ zugewiesen. Dazu wird eine XY-Achse von -1 bis +1 über das Bild gelegt und die entsprechende Koordinate inklusive der Bildgröße an einen DIV-Container übergeben. Innerhalb dieses Container befindet sich das Image-Tag.

<div class="focuspoint" data-focus-x="0.55" data-focus-y="-0.47" data-image-w="1200" data-image-h="700">
<img src="image.jpg" alt="Bild mit Fokus-Punkt" />
</div>

Zu Festlegung des Fokus-Punkt steht eine Helper Tool zur Verfügung. Das gewünschte Bild lässt sich per Bild-URL reinladen und durch die Wahl des gewünschten Fokus-Punkt wird der passende Code generiert. Gleichzeitig zeigt das Tool an, wie das Bild in unterschiedlichen Formaten beschnitten und dargestellt wird.

Der eingebundene Code und die Integration des Plugins führt anschließend zu dem Ergebnis, dass der gewählte Bildausschnitt on-the-fly berechnet und angezeigt wird.

FocusPoint als TYPO3-Extension

Bei HDNET hat Tim Lochmüller das Plugin genutzt um eine entsprechende TYPO3-Extension (focuspoint) zu entwickeln. Der Anwendungsfall bestand darin, dass Bilder in einen RSS-Feed geladen wurden und ein einheitiges Format erhalten sollten. Um die Arbeit des Redakteurs zu erleichtern, wurde das gezeigte Helper Tool für das TYPO3-Backend angepasst und eingebaut. Der Redakteur hat die Möglichkeit, ein Bild zu wählen und ihm mit nur einem Klick im Helper Tool einen Fokus-Punkt zuzuweisen.

focuspoint TYPO3-Extension

focuspoint TYPO3-Extension

Anschließend hat der Redakteur die Möglichkeit ein Format für das Bild zu wählen. TYPO3 speichert daraufhin eine Kopie des Bildes im gewählten Format und mit dem passenden Bildausschnitt ab.

In seinem YouTube-Channel erklärt Tim Lochmüller, wie genau die Extension verwendet werden kann:

Workflow für ein perfektes responsives Bild

Die Extension ist in erster Linie für das Bild-Processing im Backend von TYPO3 entwickelt worden. Durch die Aktivierung des jQuery-Plugins im Frontend ist aber auch eine Echtzeitverwendung über den ViewHelper möglich. Der ideale Ablauf für einen Redakteur besteht dann aus wenigen Schritten, um ein perfektes responsives Bild zu erhalten.

  1. Hochladen eines Bildes in einem beliebigen Format und einer beliebigen Auflösung
  2. Wählen eines Fokus-Punkt mit Hilfe der focuspoint-Extension
  3. (Optional) Wahl eines Formates und der gewünschten maximalen Auflösung
  4. Das Bild wird entsprechend neu gespeichert – gleichzeitig werden Versionen mit niedriger Auflösung gespeichert (Größen werden im Vorfeld definiert)

Wenn das Bild anschließend verwendet wird, erstellt TYPO3 den bereits bekannten Code. Im Image-Tag muss lediglich noch ein srcset mit den kleineren Bildversionen hinzugefügt werden.

<div class="focuspoint" data-focus-x="0.55" data-focus-y="-0.47" data-image-w="1200" data-image-h="700">
<img src="image_small.jpg" srcset="image_small.jpg 360w, image_medium.jpg 640w, image_large.jpg 1200w" alt="Bild mit Fokus-Punkt und verschiedenen Auflösungen" />
</div>

Die Formatierung des srcset bietet TYPO3 seit Version 6.2 von Haus aus und ermöglicht es modernen Browsern selbst zu entscheiden, welche Bildgröße benötigt und geladen wird. Dieser Schritt und das Speichern in verschiedenen Auflösungen ist derzeit noch nicht mit der focuspoint-Extension (Version 1.2.1) möglich, sie kann aber um diese Funktion erweitert werden.

Die Vorteile der Fokus-Punkt Methode

  • Redakteure brauchen Bilder im Vorfeld nicht aufwändig/mehrfach zu beschneiden/hochzuladen
  • Durch den Fokus-Punkt ist immer der gewünschte Bildbereich sichtbar – unabhängig der Displaygröße und Auflösung
  • Wenn sich der Ausschnitt auf einem Display ändert, wird keine weitere Bilddatei benötigt

Die Verwendung der focuspoint-Extension erleichtert und beschleunigt die Arbeit eines Redakteurs und sorgt für die passende Darstellung der Bilder auf einer Website.

Kommentare

  • Tobias Schorr
    12:25 am 25. Juni 2015
    Tobias Schorr
    Antworten Autor

    Guten Tag!
    Was kostet die Einrichtung/Anpassung der Extension an eine existierende Typo3-Installation?
    V.G.
    T. Schorr

    • Benjamin Hirsch
      13:59 am 25. Juni 2015
      Benjamin Hirsch
      Antworten Autor

      Hallo Herr Schorr,
      beachten Sie bitte den Kommentar von Tim Lochmüller.

  • Tim Lochmüller
    13:56 am 25. Juni 2015
    Tim Lochmüller
    Antworten Autor

    Hallo Herr Schorr,
    unter der Bedingung, dass es sich um ein TYPO3 System > 6.2 handelt, kann die Extension installiert und benutzt werden (für ältere TYPO3 Systeme geht die Extension nicht!). Geprüft werde müsste zum einen, ob die Extension im Konflikt zu einem anderen Mechanismus steht, welcher die Bilder bearbeitet. Zum anderen kann es an einigen Stellen individuelle Anpassungen geben, welche im Moment noch nicht von der Extension erfasst werden (z.B. HTML/CSS Cropping via Image Content Element). Die Basis-Funkionen mit einem echten Crop liegen bereits in der Extension vor. Wenn Sie detaillierte Infos explizit zu Ihrem Projekt brauchen, können Sie gerne Kontakt mit uns aufnehmen: https://www.hdnet.de/agentur.html
    Beste Grüße,
    Tim Lochmüller

  • Dieter Porth
    22:34 am 4. Januar 2016
    Dieter Porth
    Antworten Autor

    Hallo Herr Lochmüller,

    die Erläuterungen im Video sind kurz knapp und prägnat. Super.
    .
    Insbesondere der Hinweis auf den Viewhelper mit dem Crop-Mechanismus hat mich neugierig werden lassen. Damit wären also fokussierte Bilder in unterschiedlichen Proportionen in Responsive-Designs möglich, auch wenn ein kundenorientierter Webentwickler mit Blick auf die Marktpräsenz des Internet Explorers das srcset-Attribut nicht verwenden will.

    Aber auch die Schieberegler im TYPO3-Backend fand ich spannend sowie die optische Darstellung zur Unterstützung der Fokus-Point-Findung.

    Ein cooles Projekt.

    • Tim Lochmüller
      9:46 am 5. Januar 2016
      Tim Lochmüller
      Antworten Autor

      Hallo Herr Porth,
      freut mich sehr, dass Sie gefallen an der Erweiterung finden. Grundsätzlich ist die Findung des passenden Ausschnitts erst einmal unabhängig von dem HTML Markup. Das Markup kann dann entsprechend der Browser (-Kompatibilität) aufbereitet werden. Ein Beispiel sehen Sie z.B. hier http://www.schuberth.com
      Beim skalieren lässt sich erkennen, dass unterschiedliche Bildausschnitte für verschiedene Auflösungen gewählt werden. Gearbeitet wurde mit „picture -> data-srcset (JS) + Lazy loading“. Resultat: sehr cool 🙂
      Ich wünsche Ihnen viel Spaß mit der Erweiterung,
      Tim Lochmüller

  • Dirk Wohlrabe
    11:50 am 26. April 2016
    Dirk Wohlrabe
    Antworten Autor

    Wird es auch eine Version geben die mit fluid_styled_content funktioniert?

    Gruß

    • Tim Lochmüller
      13:52 am 26. April 2016
      Tim Lochmüller
      Antworten Autor

      Hallo Herr Wohlrabe,

      grundsätzlich sollte die Benutzung von focuspoint innerhalb von fluid_styled_content möglich sein. Ähnlich wie an anderen Stellen (eigenen Templates, Dritt-Extensions) auch, muss die Ausgabe des Bildes entsprechend angepasst werden. Dies sollte aber aufgrund der Fluid Templates und des Focuspoint-Image ViewHelper relativ leicht von der Hand gehen…

      Beste Grüße,
      Tim Lochmüller

      • alex
        12:49 am 16. Februar 2017
        alex
        Antworten Autor

        Hallo,

        gibt es denn eine Lösung bzw. ein Update für fluid_styled_content ?

        schöne Grüße – alex

        • Tim
          13:09 am 16. Februar 2017
          Tim
          Antworten Autor

          Hallo Alex,

          der Mechanismus sollte unabhängig von FLuid Styled Content sein und auch funktionieren. Es wird aber wahrscheinlich keine Version mehr für TYPO3 8.x geben, da ein neuer Crop-Wizard (incl. Focusarea) gerade in den Core aufgenommen wird.

          Beste Grüße,
          Tim

  • Guido Jansen
    18:21 am 16. Mai 2017
    Guido Jansen
    Antworten Autor

    Hallo Tim,

    Danke für diese tolle Extension. Allerdings funktioniert sie ja nicht, wie Du auch oben sagst, in TYPO3 8.x.

    Wo finde ich denn die erwähnte Alternative. Ich benötige nur ‚Focusarea‘ aber kein Crop. Das berechne ich mir selber.

    • Tim Lochmüller
      10:05 am 17. Mai 2017
      Tim Lochmüller
      Antworten Autor

      Hallo Guido,
      es wird auch eine Version für TYPO3 CMS 8 LTS geben, weil wir inzwischen gemerkt habt, dass viele es gerne so weiter benutzen wollen. Die Version ist jedoch im Moment in Planung und wir haben noch keine Tests gemacht.
      In TYPO3 8.x im Kern gibt es ein CropWizard. Mit diesem kann man beschneiden, aber auch den Ausschnitt für die Beschneidung frei lassen und nur eine Focusarea wählen. Diese Area beschneidet das Bild nicht aktiv, sondern liefert nur Informationen in die Ausgabe, sodass der Focus im Frontend (mit JS) weiter verarbeitet werden kann.
      Ist technisch ein wenig anderes, da der Redaktkeur im „freien Crop-Modus“ auch immer Bescheiden könnte. Zudem ist der Focus nicht ein Punkt, sondern eine Fläche, welche sich zudem von Inhaltselement zu Inhaltselement unterscheiden kann (per Konfiguration).

      Hilft dir diese Info weiter?

      Beste Grüße,
      Tim