Lazy image resize Prototyp

Lazy resize, also das Verkleinern von Bildern beim Laden eines Bildes, anstatt beim Laden der Seite ist oft diskutiert worden.
Heute hätte ich es in einem Projekt mal wieder gebrauchen können ... ich habe eine "spezielle" Lösung gebaut, aber danach hat es mich dann doch gereizt eine "richtige" Lösung zu bauen.

Den Prototypen habe ich aktuell noch auf github. Eigentlich ist es total einfach und in einer Music Academy funktioniert es auch (wenn ich noch ein paar Bilder mehr hinzufüge, merkt man auch den Unterschied).

Über Meinungen und Testberichte würde ich mich freuen, dann würde ich das ganze nämlich auch mal ins ER stellen. :)

Hi Tril,
scheint erstmal sehr gut zu funktionieren.

Nun eine Frage:
Ich entwickle gerade ein universelles Slider/Contentslider Framework für contao, in das man jeden beliebigen jquery etc. Slider als Erweiterung einklinken kann. Also eine Art Slider-Core, den man beliebig mit Slidern aufstocken kann.
Innerhalb dieses Frameworks stelle ich auch eine Funktion bereit aus gegebenen Bildmaterial thumbnails generieren zu lassen und im weiteren Schritt ein Suffix an den Dateinamen zu hängen. z.B. "_thumb". Manche Slider wollen das so. :)
Die thumbs werden über die getImages() Funktion generiert. Dort greif dann auch dein lazyResize. Dannach kommt das Umbenennen aus dem neuen Cache-Namen.

Lange Rede. Die umbenannten Bilder sind weiss. Was ja erstmal auch stimmt, da Du ja erstmal leeres Bildmaterial mit Weiss füllst. Allerdings werden sie nicht entsprechend gefüllt.

Das lazyResize macht einen spürbaren unterschied beim Bereitstellen von ganzen Galerien innerhalb des Sliders, die alle generiert werden müssen und dazu nochmal Thumbnails.

Any idea?

Grüße aus Berlin,
Tim
ps. Bilder, die einfach durch getImages() laufen, sind prima.

Nachtrag: Die Vorschaubilder im BE für ein Inhaltselement Galerie bleiben ebenfalls weiss.

Ich vermute mal, du verschiebst das Ergebnis von getImages so:

PHP-Code:

<?php $image = getImages(..); rename($image. 'X_thumb.jpg');

?

Das Problem ist, dass lazyResize dann nicht mehr die Beziehung erkennen kann, da die Meta Informationen aktuell in einer zusätzlichen .meta Datei gespeichert werden. Ich hatte erst gedacht, die Informationen in die EXIF Daten zu hinterlegen, allerdings ist EXIF 1. sehr beschränkt in seinen Inhalten und 2. gibt es EXIF so nur in JPEG und TIFF Dateien. In PNG macht EXIF wohl viele Probleme und GIF scheint EXIF Daten gar nicht zu kennen.

Für das was du vor hast ist eigentlich der $target Parameter von getImages da, allerdings wird wenn $target gesetzt ist lazyImages ausgehebelt. Für lazyImages ist es erforderlich, dass das Bild in system/images/ liegt, was mit dem $target Parameter nicht garantiert werden kann.

In deinem Fall würde ich vorschlagen, dass du die .meta Datei mit verschiebst.

Hi,
Jup, ich nutze die Files Klasse dafür, aber die macht genau das.

PHP-Code:

// rename $this->import('Files'); $renamed = $this->Files->rename($strImage, $strNew); if($renamed) { $strImage = $strNew; }

Mit dem $target Parameter habe ich auch experimentiert. Aber aus dem bin ich nicht schlau geworden.
Drüber steht:

PHP-Code:

// Resize the original image if ($target) { $this->import('Files'); $this->Files->rename($strCacheName, $target); return $this->urlEncode($target); }

Wenn ich z.B. '_thumb' übergebe, 1. macht er bei mir nichts, fehlt sicherlich ein Pfad :) und 2. würde doch maximal nur der ganze Name des Bildes geändert werden. Ich wollte ja ergänzen. Und aus dem comment // Resize the original image, wurde ich noch weniger schlau, weil das macht er ja erst recht nicht.

Du würdest vorschlagen, wenn mit lazyResize gearbeitet wird, alle .meta files gleich mit umbenennen?
Verschieben tue ich ja nichts. bleibt alles im system/html Ordner.

Ich zerlege lediglich den String, der von getImages() kommt und ergänze ein z.B. '_thumb'. Da lazyResize auch einen String sendet, dachte ich es würde onTheFly funktionionieren.

lazyResize an -> getImage() -> Pfad von lazyResize -> umbenennen -> fertig. (so wie ohne lR :) )

Das geht auch analog, allerdings erstellt lazyResize 2 Dateien, anstatt nur eine Datei.
Die 2. Datei hat einfach noch den Suffix .meta

Aber erstmal zum $target, um $target zu benutzen musst du einen vollständigen Dateipfad übergeben, nicht einfach nur einen Suffix.

PHP-Code:

<?php $source = 'tl_files/foo.png'; $target = 'tl_files/bar.png'; $pfad = $this->getImage($source, 100, 100, 'crop', $target); ?>

Dann ist hinterher $pfad === $target.

Aber zurück zu lazyResize, bei lazyResize werden 2 Dateien in system/images/ (nicht in system/html/) erstellt.
Z.B.:

PHP-Code:

<?php $source = 'tl_files/foo.png'; $pfad = $this->getImage($source, 100, 100, 'crop'); ?>

Dann gibt es 2 Dateien:

PHP-Code:

<?php $image = $pfad; $meta = $pfad . '.meta'; ?>

Bedeutet für dich Analog:

PHP-Code:

<?php $source = 'tl_files/foo.png'; $image = $this->getImage($source, 600, 500); $thumb = preg_replace('#(\.\w+)$#', '_thumb$1', $image); if (!file_exists(TL_ROOT . '/' . $thumb)) { $this->getImage($source, 100, 100, '', $thumb); } ?>

Die Dateien zu Verschieben ist eine ganz dumme Idee, weil Contao dann IMMER die Datei neu erstellen wird, weil diese Bedingung nicht mehr greift.

Mir ist aber im Zusammenhang mit $target gerade auch aufgefallen, dass die Datei immer neu erstellt wird, deshalb habe ich oben auch ein file_exists eingebaut. Ich habe dafür einen entsprechenden Pull Request geschickt.

MfG Tristan

Hey,
vielen Dank für die Mühe.

$target zu benutzen um ein file mit zusätzlichem _thumb zu erhalten, macht auch nicht weniger Mühe, als nach dem getImage ohne $target das file umzubenennen. Damit wird auf jeden Fall nur ein file erzeugt.

Ich bau deinen Lösungsweg ein, als Weg wenn lazyResize aktiviert und scharf ist.

Danke Dir!!!

Weiße Bilder

Hi,

ich hab die Erweiterung zum Testen in einen aktuellen Projekt eingebaut, das MetaPalettes über das ER installiert und NUR Adaptive Auflösung in den Einstellungen gewählt.

Bilder sind weiß und die jeweilige Meta wird erzeugt aber ohne Inhalt.

Was fehlt mir noch?

Danke, Gruß Ainschy

Also ein weißes Bild wird tatsächlich erzeugt, damit Contao die Bildgrößen hat. Wie ist denn die generierte URL zu dem Bild?

Hi Tril,

die URL zum Bild lautet: src="system/images/platzhalter_kinder-132e425c.jpg"

Ein Problem im Ganzen ist, das selbst im Backend die Bilder weiß sind ;) müsste hat für den BE_Mode das Module ausschalten.

Gruß Ainschy

Ok Kommando Zurück :(

Das scheint wohl in meinem Fall am Kunden Webhosting Paket zu liegen (kein mod_rewrite), Upgrade ist bestellt. Ich melde mich dann später wieder *facepalm*

Gruß Ainschy

Sehr gut, wenn es nicht an mir liegt bin ich glücklich :p

Na schauen wir mal :D ...

hast du eine Lösung wie ich das einsetzen kann bei unterschiedlichen Bildschirmgrößen oder hab ich da eine Einstellung übersehen?

Gruß Ainschy

Wie meinen?

Ich habe die Erweiterung so verstanden, das mit ihr je nach Bildschirm größe die Bilder entsprechend skaliert werden für Fluid-/Prozent Grids.

Oder bin ich da auf dem Holzweg!? Meine mich daran zu erinnern, das die Erweiterung für Responsiv Designs passend ist.

Gruß Ainschy

Ja, das ist richtig, das ist die "Adaptive Images" Einstellung in den Systemeinstellungen ;)

Wald != Bäume kein Druchblick

Gut, soweit war ich schon. Aber irgend wie steh ich trotzdem auf dem Schlach.

In meinem Fall habe ich zwei verschiedene CSS Dateien eine für eine Seite unter 1280 Bildschirmbreite und eine für über 1280

die Bild Größe gebe ich im jeweiligen Inhaltselement ein z.B. 200 proportional. An welcher Stelle greift dein Modul ein und passt das Bild entsprechend an. Ein Link dazu würde mir schon reichen.

Gruß Ainschy

Groschen,fallen, langsam und so ...

Autsch, da hab ich wohl was durcheinander gebracht.

Der Artikel: http://www.elmastudio.de/programmier...ns-optimieren/

beschreibts noch mal ganz genau (ist zwar WP aber egal)

Mein Problem muss ich anderes lösen.

Danke Tril, Gruß Ainschy

na dann :)

Hallo Tril,

ich bin eben am testen deiner Erweiterung. Ich wollte eben ein Textblock mit einem Bild versehen und bekomme jetzt bei der Auswahl der Bilder quas in der Bildliste folgende Fehlermeldung geworfene:

Code:

Warning: json_encode() expects exactly 1 parameter, 2 given in /homepages/26/XXX/htdocs/system/modules/lazyResize/LazyResize.php on line 210

Kannst du mir da weiterhelfen? Kann ich irgendwie überprüfen ob alles richtig installiert ist ?

Hi Creativx,

versuch mal unter Einstellungen, nur eine der zwei Möglichkeiten auszuwählen. Die werden bei der Installation standartmäßig beide aktiviert.

Adaptive Auflösung oder Adaptives Pixelverhältnis

damit hats bei mit geklappt.

Viele Grüße Ainschy

Hi Ainschy,

danke für den Hinweis.. mal blöde Frage: Ist die Erweiterung schon auch für die 2.11.4 möglich? Ich bekomme beim Aufruf des System die Fehlermeldung

HTML-Code:

Fatal error: Could not load class MetaPalettes in /homepages/26/XXX/htdocs/system/functions.php on line 104

...

Zitat:

Zitat von creativx

Hi Ainschy,

danke für den Hinweis.. mal blöde Frage: Ist die Erweiterung schon auch für die 2.11.4 möglich? Ich bekomme beim Aufruf des System die Fehlermeldung

HTML-Code:

Fatal error: Could not load class MetaPalettes in /homepages/26/XXX/htdocs/system/functions.php on line 104

...

Ja, ist sie.

Das was dir fehlt (wie die Fehlermeldung schon sagt) ist die Erweiterung MetaPalettes.

Viele Grüße und Erfolg

Ainschy

mmmmmmmh.. okay die Erweiterung hab ich drin - die Einstellungen auch angepasst. Jetzt erhalten ich aber beim Abspeichern eines Inhaltselemente mit Bild folgende Meldung:

Code:

Warning: json_encode() expects exactly 1 parameter, 2 given in /homepages/26/xxx/htdocs/system/modules/lazyResize/LazyResize.php on line 210

Fehlt da nochmal was ? Das Bild wird im übrigen im Backend und im Frontend nicht angezeigt...

Schau mal das du unter System Wartung ggf. die Bilder bereinigst.

Das Hosting Paket braucht zwingend mod_rewirte, das war bei mir einer der Fehler gewesen.

Viele Grüße Ainschy

Bilder hab ich bereinigt, mod-rewrite müsste auch passen... URL Umschreibung ist aktiviert und funktioniert. Leider kommt immer noch im Backend beim Aufruf des Artikels mit dem Bild die o.g. Fehlermeldung :(

Welche der beiden Optionen unter Einstellungen hast du gewählt? Bei mir funzts mit:

Adaptives Pixelverhältnis

ggf. die Cookies löschen (lokal).

Viele Grüße Ainschy

HI,
so jetzt Cookies und Cache gelöscht. Ja die Einstellung hab ich auch gewählt - leider kommt immer noch die gleiche Meldung wie vorhin ...

Hast du an den Cookie Namen was geändert? Der muss in der .htaccess bei Änderungen angepasst werden. Nutzt du die orginal und entspechend angepasste .htaccess?

Diese funtz bei mir:

Code:

## # Contao Open Source CMS # Copyright (C) 2005-2012 Leo Feyer # # Formerly known as TYPOlight Open Source CMS. # # This program is free software: you can redistribute it and/or # modify it under the terms of the GNU Lesser General Public # License as published by the Free Software Foundation, either # version 3 of the License, or (at your option) any later version. # # This program is distributed in the hope that it will be useful, # but WITHOUT ANY WARRANTY; without even the implied warranty of # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU # Lesser General Public License for more details. # # You should have received a copy of the GNU Lesser General Public # License along with this program. If not, please visit the Free # Software Foundation website at <http://www.gnu.org/licenses/>. # # PHP version 5 # @copyright Leo Feyer 2005-2012 # @author Leo Feyer <http://www.contao.org> # @license LGPL ## ## # Disable ETags # @see http://developer.yahoo.com/performance/rules.html#etags ## FileETag None <IfModule mod_headers.c> Header unset ETag </IfModule> ## # Prevent access to the Contao template files ## <FilesMatch "\.(tpl|html5|xhtml)$"> Order allow,deny Deny from all </FilesMatch> ## # Set the proper MIME types # @see https://github.com/h5bp/html5-boilerplate ## <IfModule mod_mime.c> # JavaScript AddType application/javascript js jsonp AddType application/json json # Audio AddType audio/ogg oga ogg AddType audio/mp4 m4a f4a f4b # Video AddType video/ogg ogv AddType video/mp4 mp4 m4v f4v f4p AddType video/webm webm AddType video/x-flv flv # SVG AddType image/svg+xml svg svgz AddEncoding gzip svgz # Webfonts AddType application/vnd.ms-fontobject eot AddType application/x-font-ttf ttf ttc AddType font/opentype otf AddType application/x-font-woff woff # Assorted types AddType image/x-icon ico AddType image/webp webp AddType text/cache-manifest appcache manifest AddType text/x-component htc AddType application/xml rss atom xml rdf AddType application/x-web-app-manifest+json webapp AddType text/x-vcard vcf AddType application/x-shockwave-flash swf </IfModule> ## # Gzip compression # @see https://github.com/h5bp/html5-boilerplate ## <IfModule mod_deflate.c> # Current Apache versions (>= 2.2) <IfModule filter_module> FilterDeclare COMPRESS FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml FilterProvider COMPRESS DEFLATE resp=Content-Type $text/x-component FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript FilterProvider COMPRESS DEFLATE resp=Content-Type $application/json FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xml FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml FilterProvider COMPRESS DEFLATE resp=Content-Type $application/rss+xml FilterProvider COMPRESS DEFLATE resp=Content-Type $application/atom+xml FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml FilterProvider COMPRESS DEFLATE resp=Content-Type $image/x-icon FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype FilterChain COMPRESS FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no </IfModule> # Legacy Apache versions <IfModule !mod_filter.c> AddOutputFilterByType DEFLATE text/html text/plain text/css application/json AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/xml application/xml text/x-component AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype </IfModule> </IfModule> ## # Expires headers (for better cache control) # @see https://github.com/h5bp/html5-boilerplate ## <IfModule mod_expires.c> ExpiresActive on ExpiresByType text/cache-manifest "access plus 0 seconds" ExpiresByType text/html "access plus 0 seconds" # Data ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" # Feed ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/atom+xml "access plus 1 hour" # Media: images, video, audio ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/x-icon "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # HTC files (css3pie) ExpiresByType text/x-component "access plus 1 month" # Webfonts ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" # CSS and JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" </IfModule> ## # Add a Vary Accept-Encoding header for the compressed resources. If you # modify the file types above, make sure to change them here accordingly. # @see http://developer.yahoo.com/performance/rules.html#gzip ## <IfModule mod_headers.c> <FilesMatch "\.(js|css|xml|gz)$"> Header append Vary Accept-Encoding </FilesMatch> </IfModule> ## # URL rewriting ## <IfModule mod_rewrite.c> RewriteEngine On ## # Change the RewriteBase if your Contao installation is in a subdirectoy and # the rewrite rules are not working properly. Usage examples: # # RewriteBase /contao-2.11.0 # RewriteBase /path/to/contao # # Depending on your server, you might have to remove the line entirely. ## RewriteBase / ## # Uncomment the following lines and replace "domain.com" with your domain # name to redirect requests without "www" to the correct domain. ## #RewriteCond %{HTTP_HOST} ^domain\.com [NC] #RewriteRule (.*) http://www.domain.com/$1 [R=301,L] ## # If you cannot use mod_deflate, uncomment the following lines to load a # compressed .gz version of the aggregated Contao JavaScript and CSS files. ## #AddEncoding gzip .gz #<FilesMatch "\.js\.gz$"> # AddType "text/javascript" .gz #</FilesMatch> #<FilesMatch "\.css\.gz$"> # AddType "text/css" .gz #</FilesMatch> #RewriteCond %{HTTP:Accept-encoding} gzip #RewriteCond %{REQUEST_FILENAME} \.(js|css)$ #RewriteCond %{REQUEST_FILENAME}.gz -f #RewriteRule ^(.*)$ $1.gz [QSA,L] ## # Do not rewrite requests for static files or folders such as style sheets, # images, movies or text documents. Do not add the URL suffix here! ## RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d ## # By default, Contao adds ".html" to the generated URLs to simulate static # HTML documents. If you change the URL suffix in the back end settings, make # sure to change it here accordingly! # # RewriteRule .*\.html$ index.php [L] # URL suffix .html # RewriteRule .*\.txt$ index.php [L] # URL suffix .txt # RewriteRule .*\.json$ index.php [L] # URL suffix .json # # If you do not want to use an URL suffix at all, you have to add a second # line to prevent URLs that point to folders from being rewritten (see #4031). # # RewriteCond %{REQUEST_FILENAME} !-d # # If you are using mod_cache, it is recommended to use the RewriteRule below, # which adds the query string to the internal URL: # # RewriteRule (.*\.html)$ index.php/$1 [L] # # Note that not all environments support mod_rewrite and mod_cache. ## RewriteCond %{REQUEST_FILENAME} !-f RewriteRule .*\.html$ index.php [L] ## # The following rules are required if you want to pass the language as first # URL parameter (added in Contao 2.11). The first rule rewrites an empty URL # to the front end controller, the second one adds a missing trailing slash. ## RewriteRule ^[a-z]{2}/$ index.php [L] RewriteRule ^([a-z]{2})$ $1/ [R=301,L] ## # Lazy Resize ## RewriteCond %{REQUEST_FILENAME} system/images/([^_].*\.(png|jpe?g|gif))$ RewriteRule .* system/images/_%1 # Rewrite pixel ratio changes RewriteCond %{REQUEST_FILENAME} !pixelRatio RewriteCond %{HTTP_COOKIE} lazyResizePixelRatio=(\d+) [NC] RewriteRule system/images/(.*) system/images/_pixelRatio%1$1 # Rewrite resolution changes RewriteCond %{REQUEST_FILENAME} !resolution RewriteCond %{HTTP_COOKIE} lazyResizeResolution=(\d+) [NC] RewriteRule system/images/(.*) system/images/_resolution%1$1 # Generate image if not exists RewriteCond %{REQUEST_FILENAME} system/images/ RewriteCond %{REQUEST_FILENAME} !-f RewriteRule (.*)/.* system/modules/lazyResize/resize.php [L] </IfModule>

Ansonsten wüsse ich jetzt nicht was es sonst noch sein könnte, werden die Bilder im Verzeichnis html/images angelegt?

Viele Grüße Ainschy

Ich hab deine htaccess mal genommen. Scheint aber immer noch nicht zu funktionieren. Also im "images"-Verzeichnis werden die Bilder angelegt. Ich bin jetzt eben mal in die Dateiverwaltung rein und beim ersten "Aufklappen" eines Ordner hat es gleich wieder die Fehlermeldungen geschmissen - die betreffenden Bilder wurden aber abgelegt. Und beim nächsten "öffnen" der Dateiverwaltung und des gleichen Ordners kam keine Fehlermeldung mehr. Kann es sein, das die Erweiterung mit schon vorhandenen Bildern ein Problem hat? Wobei das ja auch blöd wäre oder?

Was mir noch aufgefallen ist: Die META Dateien im Ordner images sind alles 0kb groß. Ist das okay so?

Hast Du noch ne Idee was es sein könnte?

Settings?

Hello, I am testing out this extension, but do not see any settings as mentioned in previous postings, am I missing something? I have this is installed in v3.01.

Thanks for any help you can provide and sorry I don't speak German (thank goodness for Google Translate!) ;)

Greg

Hello thibodeaux,

you find a simple how to use tutorial in the readme in the repository.
https://github.com/bit3/contao-lazyResize#readme

But this extension is still a proof of concept.

Best regards
Tristan

Hallo Tristan, gibt es News bezüglich dieser spannenden Extension? Kann ich das in Contao 3.1 zum Laufen bringen oder ist es noch in der Entwicklungsphase …?

Eine Lösung für die «on the fly» Bildauslieferung an den Client drängt sich ja heute für responsive Design fast auf. Zwecks Bandbreite aber auch zwecks der «Retina»-Auflösung mancher Geräte. :rolleyes:

bin auch daran interessiert wg. contao 3.1
der github link funktioniert leider nicht!

Schaut mal nach der Erweiterung Lazy Images (https://contao.org/de/extension-list...000009.de.html). Ich hatte sie mal instaliert, aber nicht tiefergehend ausprobiert. Kann daher zur "Qualität" nichts weiter sagen, aber laut Beschreibung bietet sie ein Sammelsurium an Möglichkeiten Bilder später zu Laden, Auflösungen zu skalieren usw.

Die Erweiterung liegt mittlerweile in meinem Archiv.
https://github.com/bit3archive/contao-lazyResize

Was so viel bedeutet, dass ich dieser Erweiterung nicht mehr nach gehe.
Die Idee mag gut sein, aber Konzeptionell komme ich damit nicht weiter.