Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Content & Markdown

When using responsive images, is it possible to crop to as aspect ratio?

Solved by Karmalakas View solution

Started by João Ribeiro Vaz 5 years ago · 8 replies · 1076 views
5 years ago

Hi, New user here!

I am implementing responsive images using the 'Sizes with media queries using derivatives’ method.

[edit: I am implementing this in the template / twig]

Is there a way to crop the image(s) to a specific aspect ratio?
I use this for a thumbnail gallery and would prefer to not serve extra pixels, when they will be hidden through css.

Thank you!

last edited 04/09/21 by João Ribeiro Vaz
5 years ago

@jrzav, What happens if you do the following in Twig?

TXT
image.crop(100,100,300,200).derivatives([100, 200, 300]).html()
5 years ago Solution

I guess this and this (@pamtbaau, check the latter 😉) are related and still not fixed/developed. As mentioned, probably won't happen until Grav 2.0

5 years ago

@Karmalakas, I totally forgot about the issue I contributed to... :man_facepalming:

5 years ago

I only remembered it because it was my issue 😅

/forum/plugins/plugin-to-resize-image-and-create-srcset-t5754?u=karmalakas

5 years ago

What about the image content? If you always crop a 4:3 ratio to 3:2 and cut the same amount on each side, an 4:3 image with a persons head near the cropped side would be cut - what results a non pleasing image content. So, just cropping might be an overall goal missing jump.

5 years ago

But if you have 6000x4000 px (3:2) image and you want to keep original, I doubt you'd want to output a list of lets say 20 images 24MB each. That's where cropZoom(1800, 1200) comes in

Suggested topics

Topic Participants Replies Views Activity
Content & Markdown · by Jochen, 8 months ago
6 99 8 months ago
Content & Markdown · by Ton Haarmans, 1 year ago
10 186 1 year ago
Content & Markdown · by Jan L'Am, 1 year ago
4 148 1 year ago
Content & Markdown · by Leonardo, 1 year ago
3 62 1 year ago
Content & Markdown · by belthasar, 1 year ago
4 257 1 year ago