Liferay 7.4 Adaptive Media schnell erklärt
Adaptive Media in Custom Services
Liferay 7.4 - Adaptive Media schnell erklärt
Adaptive Media
Wäre es nicht schön, wenn man immer die richtige Bildgröße im Benutzer-Interface zur Hand hätte und somit unnötige Datenmengen vermeiden könnte?
Vor allem Handy-Nutzer mit begrenztem Datenvolumen werden es Ihnen danken!
Liferay 7.4 liefert mit Adaptive Media eine "Out of the box"-Lösung an:
Benutzt man zur Entwicklung von Inhalten das Liferay CMS, sind nur ein paar wenige Einstellungen notwendig unter: Anwendungsmenü -> Kontrollbereich -> Anpassungsfähige Medien.
Hier trägt man nun alle gewünschten Bildformate ein, die man voraussichtlich auf seiner Website benötigen wird. Stellt man zu einem späteren Zeitpunkt fest, dass man ein weiteres Format benötigt, kann dieses nachgetragen und über das 3-Punkte-Menü im Header (Alle Bilder anpassen) erstellt werden.
Lädt man nun über Dokumente und Medien ein Bild hoch, wird dieses Bild automatisch in allen hier gelisteten Formaten angelegt und bei der Verwendung in Liferay-Inhalten mit der richtigen Größe ausgespielt. Bettet man zum Beispiel ein Bild in einem Webcontent ein und dieser wird im Benutzer-Interface gerendert, überprüft Liferay die Bildschirmauflösung des Nutzers und liefert das Bild in der optimalen Größe aus. Dies spart nicht nur Datenvolumen, sondern erhöht auch deutlich die Performance von medienlastigen Webseiten.
Adaptive Media in Custom Services
Benutzen wir nun Adaptive Media in Custom Services. Sei dies, weil ich zum Beispiel ein Custom VueJs-Portlet geschrieben habe, welches ich über Liferay einbinden oder weil ich für mein Frontend eine komplett andere Technologie und Liferay nur als Headless-Api benutzen möchte.
Möglichkeit 1: Direkte Einbindung
Bei Custom Portlets, die im Liferay Context eingebettet werden, kann man natürlich die Liferay-Logik verwenden und das Bild einbinden, wie es der Liferay-Dokumentation unter Using Adapted images in Site Content zu entnehmen ist. Bei generischer Bilddarstellung müsste man dann die groupId, die folderId, die fileEntryId und den Bildnamen (photo.jpeg) über einen Service holen und man könnte dann ein Bild wie folgt einbinden:
<picture>
<source media="(max-width:850px)" srcset="/o/adaptive-media/image/{fileEntryId}/med/photo.jpeg">
<source media="(max-width:1200px) and (min-width:850px)" srcset="/o/adaptive-media/image/{fileEntryId}/hd/photo.jpeg">
<source media="(max-width:2000px) and (min-width:1200px)" srcset="/o/adaptive-media/image/{fileEntryId}/ultra-hd/photo.jpeg">
<img src="/documents/{groupId}/{folderId}/photo.jpeg">
</picture> Die hier dargestellten URL-Abschnitte med, hd, ultra-hd sind zu erstezen mit den Ids der selbst erstellten Bildformate. Die Ids entsprechen den Namen aus der oberen Grafik mit Bindestrichen. will man also das Format Thumbnail 300x300 anzeigen, wäre die URL:
srcset="/o/adaptive-media/image/{fileEntryId}/Thumbnail-300x300/photo.jpeg"
Diese Vorgehensweise bläht den Code natürlich ein wenig auf. Weiß man bereits, dass man ein Bild an zwei unterschiedlichen Stellen in zwei Bestimmten Größen benötigt, könnte sich auch die 2. Möglichkeit als sinnvoll erweisen.
Möglichkeit 2: Indirekte Einbindung
Wollen wir zum Beispiel ein Bild als Preview einbinden (200x100) sowohl auf dem Handy, als auch auf dem Desktop und als größere Ansicht (Originalgröße) in einem Modal, können wir die entsprechenden URLs in einem Service zusammenbauen und an das Frontend ausliefern:
...
CustomImageDto imageDto = new CustomImageDto();
DLFileEntry image = DLFileEntryLocalServiceUtil.get...;
imageDto.setPreviewUrl("/o/adaptive-media/image/" + image.getFileEntryId() + "/My-Custom-Format-200x100/" + image.getFileName());
imageDto.setImageUrl("/documents/" + image.getGroupId() + "/" + image.getFolderId() + "/" + image.getFileName());
...
Im Frontend lässt sich nun das Bild in den unterschiedlichen Formaten über das src-Attribut eines normalen <img>-Tags einbinden.
Happy day and #keepITfast !
