Update: Responsive Images mit pimcore 2 und high-ppi displays

Lukas [php, Tricks und Tools, Pimcore]

Geändert hat sich im Javascript aus dem vorigen Blog-Eintrag nur wenig. Und zwar ist einerseits die Zeile, in dem die Bilder-Source gesetzt wird und andererseits etwas zuvor die Zeile, in welcher die Pixeldichte geprüft wird, damit wir falls angebracht das Bild mit der besseren Auflösung bereitstellen.

var density = '';
if (window.devicePixelRatio > 1) {
    density = '@2x';
}
img.attr("src", "/website/var/tmp/image-thumbnails/" + assetid + "/thumb__" + thumbname + "/" + title + density + "." + extension);

Sobald ein Thumbnail ein @2x am Ende des Filenamen trägt, sorgt der Thumbnail Generator vom pimcore automatisch dafür, dass das Bild mit der doppelten Auflösung erzeugt wird.

Anpassungen am pimcore Plugin

Das Plugin muss auch nur minim angerührt werden. Nämlich ebenfalls in der Zeile, in der die URL für das Thumbnail ohne Javascript erzeugt wird.

$img->setAttribute("src", '/website/var/tmp/image-thumbnails/'.$id.'/thumb__imageloader-600/'.$filename.'');

.

zurück