Schnellere Bereitstellung von Seiten mit Bildvarianten

Definition von Bildvariationen
Generierung der Bild-URL
- In Freemarker
- Im kopflosen Modus
Ein Beispiel aus unserer Travel Demo
Schlussfolgerung

Eine sinnvolle Anforderung für jede Webanwendung ist die Bereitstellung von Bildern in unterschiedlicher Größe je nach Gerät des Besuchers. Sie können viel Bandbreite einsparen, indem Sie Bilder in einer kleineren Auflösung bereitstellen, wenn ein Mobilgerät oder Tablet auf Ihre Website zugreift, wodurch sie schneller geladen wird.

Dieser Blog-Artikel zeigt Ihnen, welche Optionen Magnolia für die Bildauflösung bietet und wie Sie diese nutzen können.

Definition von Bildvariationen

Um Bilder in Magnolia in verschiedenen Auflösungen bereitzustellen, müssen Sie zunächst Bildvariationen in einem Thema definieren. Die Definition ist sehr einfach und besteht aus

Der Name der Variante
z. B. ihre Breite
der Einfachheit halber
Die Klasse SimpleResizeVariation
Die Breite des Bildes

Beispiel:

  [...] imaging: class: info.magnolia.templating.imaging.VariationAwareImagingSupport variations: "1600": class: info.magnolia.templating.imaging.variation.SimpleResizeVariation width: 1600 "1366": class: info.magnolia.templating.imaging.variation.SimpleResizeVariation width: 1366 [...]

Wenn Sie Ihrer Website noch kein Thema zugewiesen haben, folgen Sie bitte unserer Dokumentation, um dies zu tun.

Generierung der Bild-URL

In Freemarker

Wir bieten Templating-Funktionen an, um einen einfachen Zugriff auf digitale Assets wie Bilder zu ermöglichen. Diese Funktionen generieren für Sie die URL eines Bildes und seine gewünschte Variante. Ich werde Ihnen später zeigen, wie Sie sie verwenden können.

Im kopflosen Modus

Unsere Liefer-API unterstützt Bildvariationen auch im Headless-Modus. Unser Asset Resolver generiert automatisch die URL der Bildvariation. Dann liegt es in der Verantwortung des Frontends, das Bild korrekt zu platzieren.

Ein Beispiel aus unserer Travel Demo

Ich möchte die Implementierung von Bildvariationen in unserer Reisedemo mit Ihnen teilen, um Ihnen zu zeigen, wie Sie Variationen definieren und unsere Templating-Funktionen effizient nutzen können.

Beispiel: Festlegung des Themas

So definieren wir Variationen eines Themas.

Auszug aus travel-demo-theme.yaml:

  cssFiles: [...] jsFiles: [...] lazysizes: addFingerPrint: true link: /.resources/travel-demo-theme/libs/lazysizes/lazysizes.min.js [...] imaging: class: info.magnolia.templating.imaging.VariationAwareImagingSupport variations: "1600": class: info.magnolia.templating.imaging.variation.SimpleResizeVariation width: 1600 "1366": class: info.magnolia.templating.imaging.variation.SimpleResizeVariation width: 1366 "960": class: info.magnolia.templating.imaging.variation.SimpleResizeVariation width: 960 "480": class: info.magnolia.templating.imaging.variation.SimpleResizeVariation width: 480 [...]

Neben den Bildvariationen selbst ist auch die JavaScript-Bibliothek !#lazysizes#! erwähnenswert. Sie sorgt später dafür, dass Magnolia je nach Bildschirmgröße des Besuchers die beste Bildvariante anbietet. Damit dies funktioniert, müssen wir den korrekten HTML-Code des Bildes generieren, wie ich Ihnen im Folgenden zeigen werde.

Building a Custom Integration for an External DAM in Magnolia

Do you want to easily use images, videos, and other documents across your apps and digital channels? Read our blog to learn how to connect any external Digital Asset Management (DAM) platform to Magnolia.

Jetzt lesen

Beispiel: Generierung des HTML-Bildes

Wir verwenden ein Makro namens responsiveImageTravel in unserer Demo. Es bestimmt, welche Bildvariationen zu berücksichtigen sind und welche Variation als Fallback verwendet werden soll. Wir werden dieses Makro in unserer Komponentenvorlage verwenden.

Auszug aus imageResponsive.ftl:

  [...] [#-- Makro zum Rendern eines responsiven Bildes mit den im Thema konfigurierten Variationen. --] [#macro responsiveImageTravel asset alt="" title="" cssClass="" additional="" constrainAspectRatio=false] [#if constrainAspectRatio ] [#assign srcs = [ {"name":"480x360", "Breite": "480"}, {"name": "960x720", "Breite": "960"}, {"name": "1366x1024", "Breite": "1366"}, {"name": "1600x1200", "Breite":"1600"}]] [#assign fallback="960x720"] [@responsiveImageLazySizes asset alt title cssClass srcs fallback additional /] [#else] [#assign srcs = [ {"name": "480", "width": "480"}, {"name": "960", "width":"960"}, {"name": "1366", "Breite": "1366"}, {"name": "1600", "Breite": "1600"}]] [#assign fallback="960"] [@responsiveImageLazySizes asset alt title cssClass srcs fallback additional /] [/#if] [/#macro] [...]

Dieses Makro ruft ein zweites Makro mit dem Namen responsiveImageLazySizes auf, das die Vorlagenfunktion the getRenditions für jede Variante und den Fallback verwendet.

Auf diese Weise generieren wir das Bild-HTML wie im Beispiel "responsive image with srcset and automatic sizes attribute" in der Dokumentation !#lazysizes#! beschrieben.

Auszug aus imageResponsive.ftl:

   
[#-- Makro zum Rendern von responsive image mit lazysizes javascript library. Verwenden Sie data-srcset Attribut, um nur die Größe des Bildes zu laden, die die aktuelle Bildbreite erfordert --] [#macro responsiveImageLazySizes asset alt="" title="" cssClass="" srcs="" fallbackName="" additional="" ] [#if asset?exists] [#assign cssClass = cssClass + " lazyload"] [#assign rendition = damfn.getRendition(asset, fallbackName)!]      <noscript>
        <img class="${cssClass}" src="${rendition.link}" alt="${alt}" title="${title}" ${additional} />
      </noscript>
     <img data-sizes="auto" class="${cssClass} lazyload" ${additional} src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="${alt}" title="${title}"
            data-srcset="[#compress]
               [#list srcs as src]
                   [#assign rendition = damfn.getRendition(asset, src.name)!]
                   [#if rendition?exists && rendition?has_content]
                       ${rendition.link} ${src.width}w,
                   [/#if]
               [/#list]
           [/#compress]" />
    [/#if] [/#macro]

Wir können das Makro responsiveImageTravel nun überall verwenden. Schauen wir uns also ein Beispiel an: das Tour Teaser Makro. Dieses Makro verwendet das vorherige Makro, um das HTML-Bild zu erzeugen.

Auszug aus tourTeaser.ft:

  [#macro tourTeaser tour additionalWrapperClass="col-md-6"] [#include "/travel-demo/templates/macros/imageResponsive.ftl"] [#include "/tours/templates/macros/tourTypeIcon.ftl" /] [#assign imageHtml][@responsiveImageTravel tour.image "" "" "tour-card-image" "data-ratio='1.33'" true /][/#assign] <!-- Tour Teaser --><div class="${additionalWrapperClass} tour-card card">
      <div class="tour-card-background">
        ${imageHtml}      </div>
      <a class="tour-card-anchor" href="${tour.link!}">
        <div class="tour-card-content-shader"></div>
        <div class="tour-card-content">
          <h3>${tour.name!}</h3>
          <div class="category-icons">
            [#list tour.tourTypes as tourType]         <div class="category-icon absolute-center-container">
                [@tourTypeIcon tourType.icon tourType.name "" /]  </div>
            [/#list]        </div>
          <div class="card-button">
            <div class="btn btn-primary">${i18n['tour.view']}</div>
          </div>
        </div>
      </a>
    </div>
  [/#macro]

Beispiel: Verwendung des Makros in einer Komponente

Sehen wir uns nun an, wie man die Makros in einer tatsächlichen Komponente verwendet.

Durch ihre Aufnahme werden sie in der Komponentenvorlage verfügbar. Während wir die Liste der Touren durchgehen, erstellen wir für jede Tour eine "tourTeaser"-Komponente mit dem Makro "tourTeaser".

tourList.ftl:

  [#-------------- ASSIGNMENTS --------------] [#include "/tours/templates/macros/tourTeaser.ftl"] [#include "/travel-demo/templates/macros/editorAlert.ftl" /] [#if def.parameters.tourType??] [#assign category = model.getCategoryByName(def.parameters.tourType)] [#else] [#assign category = model.getCategoryByUrl()!] [/#if] [#assign tours = model.getToursByCategory(category.identifier)] [#assign title = content.title!i18n.get('tour.all.tours', [category.name!""])!] [#-------------- RENDERING --------------] <!-- Tour List --><div class="container tour-list">
    <h2>${title}</h2>
    <div class="row">
      [#list tours as tour] [@tourTeaser tour /] [/#list]    </div>
   [@editorAlert i18n.get('note.for.editors.assign.category', [category.name!"]) /]  </div>
 <script>
    jQuery(".tour-card-image").objectFitCoverSimple();
  </script>

Am Ende dieser Komponente führen wir die jQuery-Funktion !#objectFitCoverSimple#! mit der CSS-Klasse tour-card-image aus, die wir bei der Erstellung des HTML in dem Makro tourTeaser.ftl übergeben haben.

Schlussfolgerung

Mit Magnolia ist es einfach, je nach Bildschirmgröße des Benutzers unterschiedliche Bildauflösungen zu liefern. Diese Funktionalität ist nicht auf Freemarker beschränkt, sondern funktioniert auch bei modernen Headless-Implementierungen. Dies ist ein weiteres Beispiel für die Flexibilität von Magnolia, mit der sich reale Szenarien umsetzen lassen.