cropResize an image from (0,0)

Support
1

I have some portrait images that I want to resize to 640x640 and crop the bottom. The media crop operation accepts a starting point for the crop but requires exact pixel sizes rather than a dimension.

I have tried cropZoom, which works but cuts around the centre of the image. I have also tried combining cropResize and crop with .cropResize(640, 640).crop(0, 0, 640, 640), but that adds black space on the right, even though cropResize on its own gives the right width (just too high).

I hope I explained all that OK.

Is there a trick I am missing?

2

@hughbris, Not sure if I understand all of it…

crop the bottom

Do you mean you only want to keep the bottom of the image and cut away the top?

requires exact pixel sizes rather than a dimension.

What do you mean by dimension?

If you want to crop from the bottom to cut away the top, you could try the following:

{% set original = page.media|first %}
{{ original.html | raw }}

{% set image = page.media|first %}
{% set height = image.height %}

{{ image.crop(0, height - 300, 300, 300).html | raw }}

yields the following images:
Untitled

Is that what you are looking for?

3

I suck at graphics and explaining visual concepts. I wanted to scale the image down and then remove the bottom (the other way to your example).

I did achieve this taking inspiration from your example. In fact, I crop it first and then do a simple resize, something like:

{% set image_square = image.crop(0, 0, image.width, image.width).resize(640, 640) %}

Thanks!

Edit: the reason for this is so that I can use the same image in two different templates, rather than having to make a copped/resized version of each.