Image size / thumbnails
Permalink Browser Info Environment
I'm rebuilding my running club website with the modena theme. What I noticed is that in lot's of blocks you use the original uploaded image directly in the views. For example in the offscreen hero unit, or the masonry blog page list template.
In the file manager I have photo's uploaded in 2560x2560 max. I use those in different places, blog posts, the hero units, headers etc. For lots of places the 2560x2560 version is way too big. The images render in the correct size (css), but the large originals are loaded. Offcourse I can resize the images in the filemanager or before uploading. But it would be easier if the blocks / views just resize them to a more sane size for that block.
In order to accomplish this I overrode some of the views locally and used the c5 basic thumbnailer to resize the images in the view where needed. This is cached in c5, so the initial page load will resize the image and cache the resize version.
As an example in the offscreen hero unit view. The image tag in the view is this:
Where $heroImage is the file object of the original full-size image.
I replaced that with:
This will resize (and crop 3rd argument) the image to 1280x700.
I used a different resolution that in the docs (1425x700). Since this will completely fill a 1440p screen in width, and leave some width in a 4k screen just like the suggested size.
Besides this method there is also the thumbnail options built-in to the file manager. You can also specify new thumbnail types. That way the thumbs will be pre-generated when uploading (or rescanning) the files. Then you can use the pre-generated thumbs in the view as well. I did this approach for the masonry blog. I added a thumbnail type "pagelist_3_col" that will resize and crop to 390x292. Then in the view you can just call the thumbnail type handle:
In the file manager I have photo's uploaded in 2560x2560 max. I use those in different places, blog posts, the hero units, headers etc. For lots of places the 2560x2560 version is way too big. The images render in the correct size (css), but the large originals are loaded. Offcourse I can resize the images in the filemanager or before uploading. But it would be easier if the blocks / views just resize them to a more sane size for that block.
In order to accomplish this I overrode some of the views locally and used the c5 basic thumbnailer to resize the images in the view where needed. This is cached in c5, so the initial page load will resize the image and cache the resize version.
As an example in the offscreen hero unit view. The image tag in the view is this:
Where $heroImage is the file object of the original full-size image.
I replaced that with:
$im = $app->make('helper/image'); $thumb = $im->getThumbnail($heroImage, 1280, 700, true); $tag = new \HtmlObject\Image(); $tag->src($thumb->src)->width($thumb->width)->height($thumb->height); $tag->addClass('animated')->addClass($contentAnimation); echo $tag
This will resize (and crop 3rd argument) the image to 1280x700.
I used a different resolution that in the docs (1425x700). Since this will completely fill a 1440p screen in width, and leave some width in a 4k screen just like the suggested size.
Besides this method there is also the thumbnail options built-in to the file manager. You can also specify new thumbnail types. That way the thumbs will be pre-generated when uploading (or rescanning) the files. Then you can use the pre-generated thumbs in the view as well. I did this approach for the masonry blog. I added a thumbnail type "pagelist_3_col" that will resize and crop to 390x292. Then in the view you can just call the thumbnail type handle:
$type = Type::getByHandle('pagelist_3_col'); $src = $thumbnail->getThumbnailURL($type->getBaseVersion()); $tag = new \HtmlObject\Image(); $tag->src($src); $tag->addClass('overlay__image overlay__image--skew'); echo $tag;
| Type: | Discussion |
|---|---|
| Status: | In Progress |
Sorry for the delay in getting back to you.
Thanks for taking the time to pass this on, and thank you for the detailed rationale it's super helpful, we will definitely add this to the roadmap and get it into Modena.
Best regards
David