bnomei / kirby3-srcset Goto Github PK
View Code? Open in Web Editor NEWKirby 3 Plugin for creating lazyloading image srcset
Home Page: https://forum.getkirby.com/t/kirby-3-srcset-lazyloading-image-srcset-element/23575
License: MIT License
Kirby 3 Plugin for creating lazyloading image srcset
Home Page: https://forum.getkirby.com/t/kirby-3-srcset-lazyloading-image-srcset-element/23575
License: MIT License
I'm using your plugin and everything is fine, but I'm using it for a french website where we use commas instead of periods for decimals. That breaks the css and I don't know what to do.
<style>.lazysrcset-ratio[data-ratio="37,51"]{padding-bottom:37,51%;}</style>
As soon as I install the plugin into a new Kirby installation that doesn't have the Editor installed, all I get when opening the site in a browser is a blank page, no error messages at all.
Question:
Why are the images lowrez/pixelated on first load using lazysizes auto-size option?
Answer:
img[data-sizes="auto"] { display: block; width: 100%; }
I've just updated some submodules in a Kirby3 web site.
I noticed that this change has broken my usage of kirby3-srcset: v3.3.3...v3.3.4
If I change back to v.3.3.3 the images load again.
I'm creating lazysrcset tags in a Kirby text field:
(lazysrcset: real-estate-banner.png imgclass: radius)
This works:
(image: real-estate-banner.png imgclass: radius)
Were there any other changes to make with v3.3.4 and up?
I'm getting a warning when installing your plugin:
Warning: include([…]site/plugins/kirby3-srcset/classes/Kirby/Editor/../../../tests/site/plugins/editor/lib/Block.php): failed to open stream: No such file or directory in […]/kirby/config/helpers.php on line 496
thought it might be because I haven't installed the Editor Beta yet, but it is also happens if the Editor Plugin is available. Might be related to an autoloader issue as I'm using kirby-cms-path and kirby-plugin-path to alter my composer setup.
Hi!
Thanks so much for your work on this plugin - been using it since the release of Kirby 3 and it's been great. With the new update it doesn't seem to be calling the picture tag snippet, I've tried all the file methods and all of them seem to only make an img srcset tag - no picture tag or sources.
I fiddled around a bit in the index.php, swapping out places you call the snippets and this seems to be the case - I got it to call the picture tag by snippet referenced on this line:
'plugin-srcset-img' => __DIR__ . '/snippets/srcset-img.php',
Hopefully you can figure out why.
As Kirby 3.6 will support AVIF and Webp image files natively it would be great to have an option to automatically provide the most optimized image format of an image source as possible. With a
I've an issue with the custom tag that will be injected if markdown extra is enabled. This inevitability is an issue when working with css grid as it breaks the layout. Support for custom tags is limited, srcsetplugin
is anyway not a valid custom tag without a dash, and it causes issues with css preprocessing and linting when I try to add a display:contents;
to it, taking it out of the render path.
What is the purpose of the tag, isn't there a more standardised option or can it be disabled?
kirby 3.1.0 introduces a core srcset
filemethod which the srcset plugin can not override. i will fix this asap.
Question
Override default Kibytext image tag
(image: myfile.jpg)
Answer
Overriding even just as an option might conflict with various other plugins.
Create a kirbytext:before hook and do a text replace if you really want this.
Or just use the srcset
tag right from the start.
(srcset: myfile.jpg)
(srcset: myfile.jpg preset: breakpoints)
(srcset: myfile.jpg lazy: true)
(srcset: myfile.jpg preset: breakpoints lazy: true)
/site/config/config.php
return [
'hooks' => [
'kirbytags:before' => function ($text, $data, $options) {
return str_replace('(image:', '(srcset:', $text);
}
]
]
just like (image:...)
does.
https://getkirby.com/docs/reference/text/kirbytags/image
When I use the kirbytag in connection with a class (srcset: 01.jpg class: w-1/2)
, the class is not added to the picture (or image) element.
When I use the kirbytag in connection with a class and a link (srcset: 01.jpg class: w-1/2 link: 01.jpg)
, the class is added to the enclosing a tag.
https://forum.getkirby.com/t/background-images-with-lazy-loaded-srcset/23301
azysizes’ bgset extension
Hey, me again ;) I'm getting the error thrown in /vendor/bnomei/kirby3-srcset/config.php
line 21.
add documentation thats lazy loading lib is not included and why.
I'm not sure what the cause is, so i don't have a lot to go from. If bnomei/kirby3-srcset ist installed, either via composer or direct download, distantnative/retour-for-kirby will break.
It disappears from the menu in the panel and the page for retour goes blank.
I confirmed this in a blank plainkit install. I am on kirby v3.3.6 with php v7.3.11.
If someone could point to a place i could look and provide more information, i'd be glad to do so!
Can the issue be recreated, or is this something on my site?
since version 3.3.7 the lazysrcset editor field was missing.
i changed the version to 3.3.6 in the composer.json and that fixed it.
i am sorry that i cannot give any further details since i don't know what causes the problem.
i am using the latest version of kirby3 (aug 29 2020) and editor (aug 29 2020) and the php version is 7.4
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.