DEPRECATED: Contao Plugin for loading images with LazySizes.js while preventing reflow in the browser, whenever an image is loaded.
License: GNU Lesser General Public License v2.1
The shipped lazysizes script has the version 4.0.2. There is version 4.1.8 availalbe - this provides some fixes for issues using the IE. Would be great if the lib could be updated.
First thank you very much for this great plugin!
If "Convert image formats" is enabled in Contao 4.8, the images will not be displayed in Safari. If the image setting "Disable Lazy Images" is enabled, the images will be displayed in Safari.
Ein wirklich super Modul! Danke dafür! Es wäre noch toll, wenn man bei den Bild-Elementen von Contao lazy-images auch deaktivieren könnte, so wie dass auch bei den Text-Elementen unter den Bildeinstellungen machen kann.
If this extension is active it overwrites the "CSS classes" in "Image size settings".
Found in: Contao 4.4.30, contao-lazy-images 3.0.3
Sobald in den Einstellungen Inaktive Erweiterungen wie Kalender oder Events angeklickt sind, kommt folgende Fehlermeldung und nichts geht mehr:
The module dependencies could not be resolved.
Array
(
[lazy-images] => Array
(
[0] => core
[1] => news
[2] => calendar
[3] => faq
)
)
Für alle, die gleiches problem hatten, einfach ein leeres .skip File in den Modulordner legen und die Inaktiven Erweiterungen wieder aktivieren.
Der Validator bei w3c sagt immer, dass:
When the srcset attribute has any image candidate string with a width descriptor, the sizes attribute must also be present.
So sieht mein Picture-Tag aus:
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAbCAYAAACAyoQSAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAGklEQVRIie3BMQEAAADCoPVPbQhfoAAAAC4DDFcAAd2PMawAAAAASUVORK5CYII= 290w" data-srcset="assets/images/f/jobs-5b139f54.jpg" media="(max-width: 321px)">
<source srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAC0lEQVQImWNgwAUAABoAAaQ3efYAAAAASUVORK5CYII= 450w" data-srcset="assets/images/c/jobs-8f72018b.jpg" media="(max-width: 480px)">
<source srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABdCAYAAADg8yluAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAX0lEQVR4nO3BAQ0AAADCoPdPbQ43oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAI4NIwwAAXn2wOkAAAAASUVORK5CYII= 538w" data-srcset="assets/images/0/jobs-9de1f3d9.jpg" media="(max-width: 568px)">
<source srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAZCAYAAACSP2gVAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAHUlEQVRYhe3BAQEAAACCIP+vbkhAAQAAAAAAAPcGHDkAAfPsfJ0AAAAASUVORK5CYII= 720w" data-srcset="assets/images/7/jobs-9f2e79b0.jpg" media="(max-width: 991px)">
<source srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAADElEQVQImWNgGEAAAAB9AAFIIvWFAAAAAElFTkSuQmCC 300w" data-srcset="assets/images/5/jobs-6b0d68d5.jpg" media="(max-width:1199px)">
<!--[if IE 9]></video><![endif]-->
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAACECAYAAADVwmSJAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAfUlEQVR4nO3BAQ0AAADCoPdPbQ8HFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG8GnRMAATjetekAAAAASUVORK5CYII="
data-src="assets/images/1/jobs-85fc9b4a.jpg"
width="366" height="241" alt="Blog"
title="Blog" class="lazyload "
/>
</picture>
w3c meckert, dass hinter dem srcset noch ein z.b.: "300w" angefügt wird. Es ist dann praktisch kein valides html.
Wenn ich dagegen nur folgendes ausgebe:
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="assets/images/f/jobs-5b139f54.jpg" media="(max-width: 321px)">
<source srcset="assets/images/c/jobs-8f72018b.jpg" media="(max-width: 480px)">
<source srcset="assets/images/0/jobs-9de1f3d9.jpg" media="(max-width: 568px)">
<source srcset="assets/images/7/jobs-9f2e79b0.jpg" media="(max-width: 991px)">
<source srcset="assets/images/5/jobs-6b0d68d5.jpg" media="(max-width:1199px)">
<!--[if IE 9]></video><![endif]-->
<img src="assets/images/1/jobs-85fc9b4a.jpg" alt="Blog" title="Blog" itemprop="image">
</picture>
ist das html valide.
Ist das Verhalten hinter dem srcset noch eine Breite auszugeben ein Fehler oder ein Feature?
Hallo,
diese Anfrage bezieht sich auf https://github.com/derhaeuptling/contao-mobilecontent, hat allerdings evtl. etwas hiermit zu tun.
Ich habe die Herausforderung, dass diese Option mit den folgenden Parametern (siehe Anhang) nicht funktioniert. Standardmäßig wird ein Hochkant-Bild geladen, das zeigt es allerdings auch auf meinem Smartphone an. Dort müsste es eigentlich Querformat haben. Ich kann auch das Bild für mobile Endgeräte nicht ausblenden, diese Option funktioniert bei mir auch leider nicht.
Zusätzlich habe ich u.a. folgende Erweiterung installiert, vielleicht ist das auch nicht miteinander kompatibel?
Ich nutze Contao 4.4.18 und jeweils die neuesten Versionen der Plugins.
Danke für die Hilfe und viele Grüße!
Hi, wenn ich eigene Content-Elemente über die Erweiterung von RockSolid baue, werden alle Bilder automatisch mit eurer Erweiterung "lazygeloaded", wie kann ich dafür sorgen das meine eigenen Elemente davon ausgenommen werden? Das Standard "picture_default" Template ist doch nicht verändert, oder?
Maybe the following problem is helpful to avoid conflicts between other contao extensions:
I install "contao-lazy-images" and "contao-bootstrap". I enter "img-fluid" into the backends expert>class>field of an ce_image element. The extension "contao-bootstrap" usually takes the class "img-fluid" from the ce_image deeper into the DOM and moves it directly to the img class. But the "lazyloaded" class seems to be stronge ;-). The "img-fluid" doesn't occure, neither on the ce_image element nor on the img element.
I deinstall "contao-lazy-images" and the "img-fluid" is added as expected to the img class.
Ich verwende lazy-sizes 2.0.0 Build 7 (mit ER2) unter Contao 3.5.12 und erhalte folgende Fehlermeldung:
PHP Warning: imagedestroy() expects parameter 1 to be resource, boolean given in /htdocs/contao-3.5.25/system/modules/lazy-images/src/DerHaeuptling/classes/LazySizes.php on line 270
#0 [internal function]: __error(2, 'imagedestroy() ...', '/homepages/27/d...', 270, Array)
#1 /htdocs/contao-3.5.25/system/modules/lazy-images/src/DerHaeuptling/classes/LazySizes.php(270): imagedestroy(false)
#2 /htdocs/contao-3.5.25/system/modules/lazy-images/src/DerHaeuptling/classes/LazySizes.php(115): Contao\LazySizes::_gdTransparentImage(NULL, NULL)
#3 /htdocs/contao-3.5.25/system/modules/lazy-images/src/DerHaeuptling/classes/LazySizes.php(73): Contao\LazySizes->_preparePlaceholder()
#4 /htdocs/contao-3.5.25/system/modules/core/library/Contao/Template.php(273): Contao\LazySizes->init(Object(Contao\FrontendTemplate))
#5 /htdocs/contao-3.5.25/system/modules/core/classes/FrontendTemplate.php(46): Contao\Template->parse()
#6 /htdocs/contao-3.5.25/system/modules/core/library/Contao/BaseTemplate.php(281): Contao\FrontendTemplate->parse()
#7 /htdocs/contao-3.5.25/templates/news_latest.html5(11): Contao\BaseTemplate->insert('picture_default', Array)
#8 /htdocs/contao-3.5.25/system/modules/core/library/Contao/BaseTemplate.php(88): include('/homepages/27/d...')
#9 /htdocs/contao-3.5.25/system/modules/core/library/Contao/Template.php(277): Contao\BaseTemplate->parse()
#10 /htdocs/contao-3.5.25/system/modules/core/classes/FrontendTemplate.php(46): Contao\Template->parse()
#11 /htdocs/contao-3.5.25/system/modules/news/modules/ModuleNews.php(218): Contao\FrontendTemplate->parse()
#12 /htdocs/contao-3.5.25/system/modules/news/modules/ModuleNews.php(247): Contao\ModuleNews->parseArticle(Object(NewsCategories\NewsModel), false, ' even', 3)
#13 /htdocs/contao-3.5.25/system/modules/news/modules/ModuleNewsArchive.php(198): Contao\ModuleNews->parseArticles(Object(Contao\Model\Collection))
#14 /htdocs/contao-3.5.25/system/modules/core/modules/Module.php(287): Contao\ModuleNewsArchive->compile()
#15 /htdocs/contao-3.5.25/system/modules/news/modules/ModuleNewsArchive.php(70): Contao\Module->generate()
#16 /htdocs/contao-3.5.25/system/modules/news_categories/modules/ModuleNewsArchive.php(34): Contao\ModuleNewsArchive->generate()
#17 /htdocs/contao-3.5.25/system/modules/core/elements/ContentModule.php(59): NewsCategories\ModuleNewsArchive->generate()
#18 /htdocs/contao-3.5.25/system/modules/core/library/Contao/Controller.php(484): Contao\ContentModule->generate()
#19 /htdocs/contao-3.5.25/system/modules/core/modules/ModuleArticle.php(213): Contao\Controller::getContentElement(Object(Contao\ContentModel), 'main')
#20 /htdocs/contao-3.5.25/system/modules/core/modules/Module.php(287): Contao\ModuleArticle->compile()
#21 /htdocs/contao-3.5.25/system/modules/core/modules/ModuleArticle.php(67): Contao\Module->generate()
#22 /htdocs/contao-3.5.25/system/modules/core/library/Contao/Controller.php(417): Contao\ModuleArticle->generate(false)
#23 /htdocs/contao-3.5.25/system/modules/core/library/Contao/Controller.php(277): Contao\Controller::getArticle(Object(Contao\ArticleModel), false, false, 'main')
#24 /htdocs/contao-3.5.25/system/modules/core/pages/PageRegular.php(133): Contao\Controller::getFrontendModule('0', 'main')
#25 /htdocs/contao-3.5.25/system/modules/core/controllers/FrontendIndex.php(285): Contao\PageRegular->generate(Object(Contao\PageModel), true)
#26 /htdocs/contao-3.5.25/index.php(20): Contao\FrontendIndex->run()
#27 {main}
Bisher konnte ich noch nicht erkennen wie der Fehler zustande kommt.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.