Comments (8)
gchtr
commented on June 9, 2024
1
Yeah, honestly I didn’t test this yet with the new editor. We’re using Gutenberg ourselves a lot, but not with the default image block.
I hope I can have a look at this in the next few days, because this is really something that we want to support.
from timmy.
gchtr
commented on June 9, 2024
1
@sque89 I just added a pull request to add support for Responsive Content Images in #29.
You should be able to test it out by loading that branch:
composer require mindkomm/timmy:dev-block-imagesI’d be glad to get some feedback on whether this works for you. I had to add some special handling for cases like
- When you have both Image Blocks and images in a Classic Editor Block.
- When you add an alt text to the image.
- If you resize an image manually using the drag handlers or select a preset. In that case, Timmy will keep the
widthandheightattributes that are set on an image by WordPress.
from timmy.
gchtr
commented on June 9, 2024
Hey @sque89
I quickly tried it out with a very basic setup of WordPress and Timmy. And for me, changing the size in the editor seems to work for me. So, I have the following questions:
- What version of Timmy are you using?
- Can you show me your image configuration?
- Does this happen with newly uploaded images as well?
Making the image responsive in the frontend isn’t working yet, but that’s another thing to look at.
from timmy.
sque89
commented on June 9, 2024
Hi @gchtr
- 0.14.1
- i tried it with a freshly uploaded image (after creating the image config) and selecting the new size is indeed working fine. Thanks for the hint!
[
'thumbnail' => [
'resize' => [ 500 ],
'name' => 'Thumbnail',
'post_types' => [ 'all' ],
],
'medium' => [
'resize' => [ 300 ],
'name' => 'Medium',
],
'large' => [
'resize' => [ 1024 ],
'name' => 'Large',
],
'post' => [
'resize' => [ 1024 ],
'name' => 'Post',
],
'featured-row-img-33' => create_timmy_size('(min-width: 801px) 33.33vw, 100vw'),
'featured-row-img-50' => create_timmy_size('(min-width: 801px) 50vw, 100vw'),
'featured-row-img-66' => create_timmy_size('(min-width: 801px) 66.66vw, 100vw'),
'callouts-row-3-desktop' => create_timmy_size('(min-width: 801px) 33.33vw, 1px'),
'callouts-row-3-mobile' => create_timmy_size('(max-width: 800px) 100vw, 1px'),
'callouts-row-4-desktop' => create_timmy_size('(min-width: 1009px) 25vw, 1px'),
'callouts-row-4-mobile' => create_timmy_size('(max-width: 1008px) 100vw, 1px'),
'callouts-row-5-desktop' => create_timmy_size('(min-width: 1009px) 20vw, 1px'),
'callouts-row-5-mobile' => create_timmy_size('(max-width: 1008px) 100vw, 1px'),
'hero' => create_timmy_size('100vw'),
'latest-update' => create_timmy_size('(min-width: 801px) 16vw, (min-width: 496px) 50vw, 15rem'),
'event-list' => create_timmy_size('(max-width: 496px) 100vw, (max-width: 688px) 50vw, (max-width: 1008px) 33vw, (max-width: 1200px) 25vw, calc(1200px / 4)'),
'staff-row' => create_timmy_size('240px'),
'quotes-row' => create_timmy_size('240px'),
'timeline' => create_timmy_size('(max-width: 496px) calc(100vw - 4rem), (max-width: 900px) calc(50vw - 4rem), (max-width: 1200px) 25vw, calc(1200px / 4)'),
'upcoming-events-row' => create_timmy_size('240px'),
'investigation-item' => create_timmy_size('(max-width: 688px) 100vw, (max-width: 1008px) 50vw, (max-width: 1200px) 33vw, calc(1200px / 3)'),
'footer-signup' => create_timmy_size('(max-width: 496px) 1px, (max-width: 33rem) calc(5vw/12), calc((5 / 12) * 33rem)'),
'media-coverage-row' => create_timmy_size('12rem'),
'press-release-row' => create_timmy_size('(max-width: 801px) calc(100vw - 4rem), (max-width: calc((45rem + 12rem) * (1 + 5 / 7))) calc((7 / 12) * 100vw - 12rem), 45rem'),
'blog-list' => create_timmy_size('500px'),
'news-list' => create_timmy_size('820px'),
'container-33-50-100' => create_timmy_size('(max-width: 496px) 100vw, (max-width: 801px) 50vw, (max-width: 1200px) 33vw, calc(1200px / 3)'),
'container-33-100-100' => create_timmy_size('(max-width: 801px) 100vw, (max-width: 1200px) 33vw, calc(1200px / 3)'),
'container-66-100-100' => create_timmy_size('(max-width: 801px) 100vw, (max-width: 1200px) 66vw, calc(1200px * (2/3))'),
'full-25-50-100' => create_timmy_size('(max-width: 496px) 100vw, (max-width: 801px) 50vw, 25vw'),
'full-66-50-100' => create_timmy_size('(max-width: 496px) 100vw, (max-width: 801px) 50vw, 66vw'),
]
function create_timmy_size($sizes)
{
return [
'resize' => [ 3000 ],
'srcset' => [ [ 375 ], [ 500 ], [ 750 ], [ 800 ], [ 1000 ], [ 1125 ], [ 1500 ], [ 1800 ], [ 2100 ], [ 2400 ], [ 2700 ], [ 3000 ] ],
'sizes' => $sizes,
'show_in_ui' => false,
'oversize' => [
'allow' => false,
'style_attr' => false,
],
];
}
from timmy.
gchtr
commented on June 9, 2024
Alright! I assume that the new image works, because of the way meta data is handled since since version 0.14.0.
Could you try and run Regenerate Thumbnails in a test environment to check whether this fixes the issue that the image size doesn’t change for existing images?
I’ll still have to look at how to make it work in the frontend.
By the way, cool approach with the create_timmy_sizes() helper function ;).
from timmy.
sque89
commented on June 9, 2024
Regenerating media solved the problem. Perfect, thanks a lot for your time to investigate! I assume this bug can be closed then.
Is there another ticket to track the progress of the actual implementation?
Thanks!
from timmy.
sque89
commented on June 9, 2024
@gchtr comment in the PR
from timmy.
gchtr
commented on June 9, 2024
This is fixed with the 0.14.5 release.
from timmy.
Related Issues (20)
- Undefined index: file_src when uploading file HOT 7
- Running filters during upload HOT 3
- "sizes" attribute set even when no "srcset" is availible, violating w3 check HOT 3
- wp_make_content_images_responsive() deprecated in version 5.5 of Wordpress HOT 3
- get_timber_image_responsive_acf doesn't deliver image but error message HOT 1
- Support wordpress loading="lazy" feature (since 5.5) HOT 2
- Do not upscale/overize in filter_image_downsize HOT 6
- Timmy tries to resize video files HOT 6
- PHP warning in timber_should_resize HOT 2
- Content images from Gutenberg are not always detected due to wrong regex HOT 3
- Media Library Thumbnail Size not working HOT 3
- How to allow custom image size or disable custom image size within admin
- Cannot use timmy responsive content images with wordpress responsive images in combination HOT 1
- When the timmy/generate_srcset_sizes is set to true the 'oversize' option is ignored HOT 2
- Provide a Timmy::VERSION constant HOT 1
- Responsive remote/external/CDN image HOT 4
- lazy_src in picture_responsive HOT 1
- Notice: Trying to access array offset on value of type bool in mindkomm/timmy/lib/Image.php on line 499 HOT 2
- Class 'Timmy\Image' not found when using v1.0 HOT 1
- .
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 timmy.