Comments (6)
Sorry, but I can't follow or make out the cause of your issue. Please provide an example so I may dig in.
On a side note: You can always crop your image first and generate the placeholder image afterwards: .$image->crop(50, 40)->placeholderUri()
from kirby-blurry-placeholder.
<img src="<?= $file->crop(600,400)->placeholderUri() ?>" data-src="<?= $file->focusCrop(600,400)->url() ?>" alt="<?= $file->alt() ?>" width="600" height="400" class="lazyload">
with the Crop the placeholderUri is supposed to also be using 600x400px, because when having the lazyload effect, the ratio is not the same with my data-src, which results in the palceholderUri being the original width/height ratio and therefor the image (as well as the surrounding container - quite default column div) will change in size.
Here we can see the placeholderUri, where as the original format of the right picture is portrait. but using the (focus)Crop the final image basically is changed to 600x400 which will then result in the container adjusting the height after lazyloading the image:
After the Image has been lazyloaded, you can see the outside container with the navigation, obviously get closer to the pictures because the placeholderUri height has been more than the originals, even though i have changed my code to $image->crop(600,400)->placeholderUri()
Where then I would assume this placeholder should also be 600x400
(the Original Picture is Landscape- so even though i am using the crop function, it still uses the original ratio)
(Maybe there's a slight Caching going on, however see the next comment)
from kirby-blurry-placeholder.
Thus i notice when i use the $image->crop(600,400)->placeholderUri()
method the src image seems not to load (broken image symbol before lazyload), the output says src(unknown) before lazyload happens.
When checking the Sourcecode using
$image->crop(600,400)->placeholderUri()
Results in empty src
<div class="p-4 w-1/3">
<img src="" data-src="..." class="lazyload">
</div>
where as
$image->placeholderUri()
outputs the correct data:image/svg....
<div class="p-4 w-1/3">
<img src="data:image/svg+xml;charset=utf-8...." data-src="..." class="lazyload">
</div>
I think $image->crop(600,400)->placeholderUri()
would be my solution to having the same ratio for the blurry src but it seems there's something not working (for me)
I just did a composer update as well and it seems like i am up-to-date.
from kirby-blurry-placeholder.
You are right, using crop()
or resize()
will not return a \Kirby\Cms\File
, rather \Kirby\Cms\FileVersion
. Will dig into the latter class and how to parse them for the placeholder URI.
from kirby-blurry-placeholder.
At the very beginning i thought maybe placeholderUri(600,400) may be available, then I also played around with resize, focuscrop, crop, but since that kinda broke the whole thing i was directly using the palceholderUri whereas we can see the different ratio from here
so finally make an issue, came back finally finding crop/resize not functioning with placeholderUri, which is a step forward already.
Quite the roundabout. Sometimes it's a challenge finding the issue :-)
from kirby-blurry-placeholder.
Added an option to pass the image ratio to the placeholder methods. See https://github.com/johannschopplich/kirby-blurry-placeholder#cropped-images.
Please update to v1.4.0. Thanks!
from kirby-blurry-placeholder.
Related Issues (20)
- [Question] Best Slider to use with this plugin (and thus loodeer) HOT 2
- 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
- Blurry placeholder with WebP and `<picture>` tag HOT 4
- 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.