Comments (4)
rgba1111
commented on June 9, 2024
Hey @hansipete I have the exact same issue. Did you find any solution in the meantime? 🙏 Or maybe @johannschopplich got any hint?
from kirby-blurry-placeholder.
rgba1111
commented on June 9, 2024
For context I have seen the closed thread and added the 'format' => 'webp', but only get jpgs
<?php
return [
'johannschopplich.blurry-placeholder' => [
'pixel-target' => 60
]
];
return [
'thumbs' => [
'format' => 'webp',
'srcsets' => [
'default' => [
'300w' => ['width' => 450],
'600w' => ['width' => 900],
'900w' => ['width' => 1350],
'1200w' => ['width' => 1800],
'1800w' => ['width' => 2400],
'2400w' => ['width' => 3200],
'3000w' => ['width' => 4000]
],
'webp' => [
'300w' => ['width' => 450, 'format' => 'webp'],
'600w' => ['width' => 900, 'format' => 'webp'],
'900w' => ['width' => 1350, 'format' => 'webp'],
'1200w' => ['width' => 1800, 'format' => 'webp'],
'1800w' => ['width' => 2400, 'format' => 'webp'],
'2400w' => ['width' => 3200, 'format' => 'webp'],
'3000w' => ['width' => 4000, 'format' => 'webp']
],
'index-jpg' => [
'300w' => ['width' => 450],
'600w' => ['width' => 900],
'900w' => ['width' => 1350],
'1200w' => ['width' => 1800],
'1800w' => ['width' => 2400]
],
'core-webp' => [
'300w' => ['width' => 450, 'format' => 'webp'],
'600w' => ['width' => 900, 'format' => 'webp'],
'900w' => ['width' => 1350, 'format' => 'webp'],
'1200w' => ['width' => 1800, 'format' => 'webp'],
'1800w' => ['width' => 2400, 'format' => 'webp']
],
'core-jpg' => [
'300w' => ['width' => 450],
'600w' => ['width' => 900],
'900w' => ['width' => 1350],
'1200w' => ['width' => 1800]
],
'core-webp' => [
'300w' => ['width' => 450, 'format' => 'webp'],
'600w' => ['width' => 900, 'format' => 'webp'],
'900w' => ['width' => 1350, 'format' => 'webp'],
'1200w' => ['width' => 1800, 'format' => 'webp'],
],
'card-webp' => [
'300w' => ['width' => 450, 'format' => 'webp'],
'600w' => ['width' => 900, 'format' => 'webp']
],
'card-jpg' => [
'300w' => ['width' => 450],
'600w' => ['width' => 900]
],
]
]
];
from kirby-blurry-placeholder.
hansipete
commented on June 9, 2024
Unfortunately I can't remember how I fixed it at the end, but it is working now: I have blurry placeholders and webp images loaded afterwards.
See this (stripped down) snippet that I use:
<picture>
<source
type="image/webp"
data-srcset="<?= $image->srcset('webp') ?>"
sizes="<?= $sizes ?>"
data-lazyload
>
<img
src="<?= $image->placeholderUri() ?>"
data-src="<?= $image->resize(400)->url() ?>"
data-srcset="<?= $image->srcset() ?>"
sizes="<?= $sizes ?>"
data-lazyload
width="<?= $image->resize(1920)->width() ?>"
height="<?= $image->resize(1920)->height() ?>"
alt="<?= $image->alt() ?>"
>
</picture>
I had issues with loadeer so I moved over to lozad. Hope this helps!
from kirby-blurry-placeholder.
johannschopplich
commented on June 9, 2024
I had issues with
loadeerso I moved over tolozad. Hope this helps!
Sad. 😄 Would be great to know what the exact issue was!
Since I'm neither using the <picture> tag, nor WebP in this context, I unfortunately can't provide a solution (also don't have the time to test). Would be great to provide a minimal reproducible example to help the community test your setup and let the issue be found more easily
from kirby-blurry-placeholder.
Related Issues (20)
- [Question] Best Slider to use with this plugin (and thus loodeer) HOT 2
- Crop & resize on `placeholderUri()` HOT 6
- Handling static assets HOT 3
- Division by zero Error (image inside Structure Field) HOT 5
- Use `<noscript>` tag with default `<img>` element for browsers with disabled JS HOT 1
- Placeholders for GIFs render all frames, which results in larger data (since inlined)
- Add transition when lazily loaded image unveils HOT 3
- Slow loading blurry placeholder image and big file size on live server HOT 6
- Make placeholders smoother HOT 9
- Add asset methods
- Get placeholder data via API/KQL HOT 1
- Placeholder from external image HOT 1
- Update auto sizes on resize HOT 3
- Placeholder image as poster for video? HOT 1
- Artifacts when using transparent images HOT 7
- High-res image wont show up HOT 7
- Srcset conflict HOT 12
- Publish useLazyload as npm package HOT 3
- WebP & AVIF support via `srcset` HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 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.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
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.
from kirby-blurry-placeholder.