[responsive_images] Erweiterung um Bilder für Mobilgeräte zu verkleinern
Es ist ja immer wieder Thema und wir haben das auch hier im Forum schon ein paar mal diskutiert: Adaptive Images.
Also die Möglichkeit, anhand von einer bestimmten Bildschirmauflösung die Bilder entsprechend zu verkleinern.
Ich starte hier jetzt mal eine Feld Studie ;) Habe keine Ahnung ob die Erweiterung funktioniert und was dabei herauskommt.
Mein Plan ist eine Erweiterung zu erstellen welche ohne mod_rewrite auskommt. Die Erweiterung soll das Framework von Contao verwenden um kleinere Bilder auszuliefern. Ebenso das ganze noch mit dem Cache unter einen Hut bringen.
Spannend wird es wenn es dann ans CSS geht...
Im schlimmsten Fall lösche ich das ganze wieder.
Stichpunkte:
- CONTAO Version ab > 3 getestet.
Evtl. geht es auch mit 2.11 - Bilschirmbreite mit Cookie auslesen (evtl. später mal noch mit einer anderen Mehthode)
- In den Einstellungen die Breakpoints angeben (Bsp: 800,1200,2000)
- Mithilfe der "$GLOBALS['TL_CONFIG']['maxImageWidth']" die Bildbreite überschreiben
- Breakpoint an Cache Key anhängen um das Cachen zu ermöglichen mit den unterschiedlichen Auflösungen. (Pagespeed)
- CSS Bilder auch verkleinern
- Probleme mit definierter Bildhöhe (wird auf 0 gesetzt)
- Eingebettete Bilder im TinyMCE (Gallerie Bilder über "image" inserttag werden unterstützt) (
Wird das überhaupt von jemand verwendet? ;))
Das grüne kann die Erweiterung schon, allerdings bin ich mir nicht sicher obs was taugt.
Das rote muss man prüfen ob das überhaupt geht, bzw. sich umsetzen lässt.
Da es eine Studie ist, gibt es die Erweiterung momentan nicht im ER. Dort wird sie erst reinkommen, wenn ich / wir feststellen, dass es was taugt und nahezu alles damit abgedeckt werden kann.
Im Erweiterungs Repo: https://contao.org/de/extension-list...ve_images.html
Ihr findet sie auf Github: https://github.com/Zeromax/responsive_images
Danke für euere Mithilfe ;)
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo
ich habe eine kleinen Fehler gefunden ob er jetzt genau von der Erweiterung kommt kann ich nicht sagen aber er tritt nur dann auf wenn ich die Erweiterung installiert habe.
Und zwar wenn ich ein Formular abschicke dann bekomme ich folgende Meldung:
Anhang 11935
Wenn ich noch was dazu helfen kann dann kann ich gerne helfen.
Gruß
space
Überarbeitung der Erweiterung [responsive_images]
Nun denn. Ein paar Anregungen:
- Der momentane Stand wird nicht mehr weiterentwickelt
- Es wird eine komplette Überarbeitung geben, da die Momentane Lösung nicht richtig funktioniert
- Das liegt am Cookie -> iOS blockiert das Cookie beim ersten Aufruf mit default Sicherheitseinstellungen (selbes Problem hat auch adaptive Images)
- Durch das vorladen eines Snippets um das Cookie zu setzen kommt es zu mehr Problemen als man lösen kann...
- Habe zwei Ideen in Aussicht:
Ich stelle diese Beide Ideen mal hier zur Diskussion. Das aus dem Grund da beide jeweils einen enormen Nachteil haben.
Bei Picture Polyfill bin ich mir nicht sicher was das für SEO Auswirkunegen hat. Evtl. hat hier jemand mal einen Erfahrungsbericht?
Bei Srcset Polyfill kommt es zu dem Problem, dass ein Bild 2x heruntergeladen wird, sollte eine andere Auflösung angefordert werden. -> https://github.com/borismus/srcset-polyfill/issues/11
Evtl. hat hier jemand mal einen Erfahrungsbericht?
Ich zerbreche mir hier schon länger den Kopf und habe außer diesen beiden Lösungen noch nichts weiterführendes.
Weiterführende Links:
Jetzt bin ich gespannt auf eure Ideen. So wie die Erweiterung momentan ist, kann und wird sie nicht bleiben.
Liste der Anhänge anzeigen (Anzahl: 5)
Neue Version im Anmarsch
So. Nun mal ein paar Neuigkeiten. Habe soweit fast alles implementiert, was ich mir vorgenommen habe ;)
Das Modul Integriert sich im Theme direkt.
Anhang 13287
Somit kann man für jedes Modul und auch Element ein Responsive Image Set erstellen.
Gerade werden noch keine Multi SRCs unterstützt. Das kommt noch.
In einem Responsive Image Set kann man alle Felder angeben, welche für das bild verwendet werden sollen. Das hat den vorteil, dass man eigene Module einfach integrieren kann.
Anhang 13286
Die Breakpoints können komfortabel über einen MCW Fieldset verwaltet werden. Hier ein herzliches Danke and die MCW Entwickler ;).
Anhang 13289
Das Modul arbeitet folgendermaßen
- Es liefert die Image sets für die Inhaltselemente Text, Akkordion (Einzel element) und Bild mit. Das bedeutet die Feldzuordnungen sind fix Programmiert.
- Als Breakpoints werden die Globalen verwendet.
Anhang 13290 - Die default image sets können durch anlegen eines Image sets im Theme überschrieben werden und erlauben dann mehrere Einstellmöglichkeiten.
- Aus diesen angaben wird dann das PictureFill erstellt.
Die Konfiguration
- Das Modul liefert die entsprechenden Core Templates mit ce_accordion, ce_image und ce_text
Es wird um das image Tag das entsprechende Markup ergänzt:
PHP-Code:
<?if ($this->pictureFillSingleSRC): ?>
<span data-picture data-alt="<?=$this->pictureFillSingleSRC[0]->alt; ?>"<?if ($this->title): ?> data-title="<?=$this->pictureFillSingleSRC[0]->title; ?>"<?endif; ?>>
<?foreach ($this->pictureFillSingleSRC as $key=>$picture): ?>
<span data-src="<?=$picture->src; ?>"<?if ($picture->breakPoint && $key > 0): ?> data-media="(min-width: <?=$picture->breakPoint; ?>)"<?endif; ?>></span>
<?endforeach; ?>
<noscript>
<?endif; ?>
<img src="<?=$this->src; ?>"<?=$this->imgSize; ?> alt="<?=$this->alt; ?>"<?if ($this->title): ?> title="<?=$this->title; ?>"<?endif; ?>>
<?if ($this->pictureFillSingleSRC): ?>
</noscript>
</span>
<?endif; ?>
- Es muss also geprüft werden, ob diese Templates angepasst wurden und gegebenenfalls muss der fehlende Code ergänzt werden.
- Aus Entwicklertechnischen Gründen und diversen eigenanpassung habe ich mich dafür entschieden, den Feldnamen des Bildes in die Variable einfließen zu lassen. Für das Feld singleSRC wird folgende Variable befüllt '$this->pictureFillSingleSRC'
Ich hoffe ich habe nichts vergessen ;)
Das Modul landet hoffentlich die nächsten Tage als beta im Repo.
Testen kann man es schon jetzt wenn man den master Zweig auscheckt und installiert.
Zur Info: man kann die Breakpoints auch bei den Bildern direkt konfigurieren. Allerdings ist das noch nicht implementiert... das kommt dann mit der beta ;) Ist als Hinweis für die alpha Tester gedacht...
Ich garantiere nicht für einwandfreies verhalten und für Schäden muss jeder selber haften ;)
Beta 2.0.0-b1 veröffentlicht
Endlich eine Beta ;)
https://contao.org/de/extension-list...ve_images.html
Fehler am besten gleich hier posten:
https://github.com/Zeromax/responsive_images/issues
Oder hier im Forum ;)
Viel Spaß beim testen.
Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:
Zitat von
Luminanz
Hi
Wird bei dieser Erweiterung in irgendeiner Form berücksichtigt, ob es sich um ein hochauflösendes display (retina) handelt?
In der Beschreibung habe ich diesbezüglich keine Angaben gefunden.
Danke für die Angabe.
Sicher ;). Es wird folgendes HTML generiert:
HTML-Code:
<figure class="image_container">
<span data-alt="" data-picture="">
<span data-src="assets/images/b/Screenshot-e8ed56db.png"></span>
<span data-media="(min-width: 1000px)" data-src="assets/images/f/Screenshot-24f8290f.png"></span>
<span data-media="(min-width: 1200px)" data-src="assets/images/1/Screenshot-349ea301.png">
<img alt="" src="assets/images/1/Screenshot-349ea301.png">
</span>
<noscript>
<img src="files/bilder/Screenshot.png" width="1920" height="1200" alt="">
</noscript>
</span>
</figure>
Dass nun ein Bild dargestellt wird, muss immer eine bestimmte Mindesbreite im Browser vorhanden sein. Die Mindestbreite sind die Breakpoints, welche man definieren kann.
Für das obige Beispiel habe ich folgende Konfiguration vorgenommen:
Anhang 13340
Das bedeutet in dem obigen HTML Code: Bei einer Browser Fenster mindestbreite von 1200px wird ein Bild mit einer Auflösung von 300px × 300px geladen.
Du kannst nahezu konfigurieren was du willst. Und es wird Abhängig von der Browserbreite das Passende Bild per Javascript geladen.
Ergänzung:
Eben nochmal nachgelesen und es gibt die Möglichkeit die Eigenschaft Pixel-Ratio hinzuzufügen. https://github.com/scottjehl/picture...-media-queries
Das ist allerding nicht implementiert.
Fehlermeldung auf dem Iphone
Ich habe folgende Fehlermeldung bei aufruf der Startseite.
Auf dem Webserver läuft PHP 5.5 und MySQL 5.x
Contao Version 3.2.3
-- Hier die Fehlermeldung --
HTML-Code:
PHP Warning: preg_match_all(): Compilation failed: unrecognized
character after (?< at offset 13 in
/home/www/html/system/modules/responsive_images/classes/ResponsiveImages.php
on line 195
#0 [internal function]: __error(2, 'preg_match_all(...',
'/home/www/html...', 195, Array)
#1 /home/www/html/system/modules/responsive_images/classes/ResponsiveImages.php(195):
preg_match_all('/(src=("|')(?<f...', '<img src="asset...', '')
#2 /home/www/html/system/modules/responsive_images/classes/ResponsiveImages.php(103):
Contao\ResponsiveImages->getFileToReplace('/<img([^>]|(?<=...',
'/(src=("|')(?<f...', '<!DOCTYPE html>...', 'img')
#3 /home/www/html/system/modules/core/classes/FrontendTemplate.php(164):
Contao\ResponsiveImages->replaceImages('<!DOCTYPE html>...',
'fe_page')
#4 /home/www/html/system/modules/core/pages/PageRegular.php(183):
Contao\FrontendTemplate->output(true)
#5 /home/www/html/index.php(249):
Contao\PageRegular->generate(Object(Contao\PageModel), true)
#6 /home/www/html/index.php(432): Index->run()
#7 {main}
Hat jemand ein Hinweis?
Viele Grüße
aadursun
