Updated img syntax #27
Conversation
Using the syntax shown in Grav documentation: https://learn.getgrav.org/content/media#cropresize-width-height
|
Oh I just noticed that the featured images still behave unexpectedly on the post. For me at least they're not actually cropped, but just resized to the 4 by 3 format so they turn up skewed. Is that the expected behaviour? |
|
Further investigation reveals that cropZoom has the anticipated behaviour ie that the images are actually cropped. |
templates/item.html.twig
Outdated
| @@ -18,7 +18,7 @@ | |||
|
|
|||
| {% if page.header.featured_image %} | |||
| <figure class="image is-4by3" style="margin-left: 0; margin-right: 0;"> | |||
| <img src="{{ page.url }}/{{ page.header.featured_image }}?cropResize=768,576" alt="{{ page.title }}"> | |||
| {{ page.media[page.header.featured_image].cropResize(768, 576).enableProgressive.html('',page.title|escape)}} | |||
There was a problem hiding this comment.
-
Please change
cropResizetocropZoom. As you mentioned in previous comment,cropZoomwill resize and crop the image to ensure the resulting image is the exact size we want. More info on cropResize vs cropZoom. -
What does
.enableProgressivedo here? Can't find anything about it in docs. Isn't this usually enabled by default in/system/config/media.yaml? I'm not sure but I've got this in mine:
default:
- enableProgressiveThere was a problem hiding this comment.
There was a guy in the Slack channel who suggested the .enableProgressive, but if it's hard to find documentation for and might even be redundant, I'm going to leave it out.
There was a problem hiding this comment.
Sounds good! If it's needed in specific use cases maybe it's best to leave it up to people to add it on their own instead 👍
templates/partials/post.html.twig
Outdated
| @@ -21,7 +21,7 @@ | |||
| {% if post.header.featured_image %} | |||
| <div class="media-right"> | |||
| <figure class="image"> | |||
| <img src="{{ post.url }}/{{ post.header.featured_image }}?cropResize=160,120" alt="{{ post.title }}"> | |||
| {{ post.media[post.header.featured_image].cropResize(160, 120).enableProgressive.html('',post.title|escape)}} | |||
There was a problem hiding this comment.
I actually think that cropResize works fine on the frontpage thumbnails.
Because it means that the images will just expand sideways if their format is too wide.
But maybe you can test that out, and see what you like?
There was a problem hiding this comment.
Personally I'd prefer using cropZoom here as well, since cropResize always respects the aspect ratio of the image it's hard to actually control the image output in width and height.
For example if I want to have the current demo image in a portrait format, it wont be cropped as I expect:
{{ post.media[image.jpg].cropResize(120, 160).html()}} will result in the demo image being cropped to 120x90 which isn't really what I'd want (I'd expect it to be in a portrait format).
This would probably be an issue when dealing with portrait images rather than landscape as well.
Personally I'd like that image to be resized and cropped to the exact width and height I specified. Maybe it's just all about personal preference :)
Removed the .enablePRogressive setting as well
templates/partials/post.html.twig
Outdated
| @@ -21,7 +21,7 @@ | |||
| {% if post.header.featured_image %} | |||
| <div class="media-right"> | |||
| <figure class="image"> | |||
| {{ post.media[post.header.featured_image].cropResize(160, 120).enableProgressive.html('',post.title|escape)}} | |||
| {{ post.media[post.header.featured_image].cropZoom(160, 120).html('',post.title|escape)}} | |||
There was a problem hiding this comment.
Sorry for being picky, but would you mind removing the extra/double indentation here before merging? 😊
There was a problem hiding this comment.
Heh that's no problem at all.
I'm used to following strict formatting rules at work :-)
But I'm not so used to work on php / twig.
|
Great work @floede ! Merged, thanks! 🎉 |
Using the syntax shown in Grav documentation:
https://learn.getgrav.org/content/media#cropresize-width-height