Need help to get cropZoom and IMG tag working

1

Hello, I’m trying to get cropzoom working on my front page. I have this img tag that brings me the image of the respective blog post but I can’t get it to work with cropzoom.

Here it is:
<img src="{{ header_image_url }}" width="{{ header_image_width }}" height="{{ header_image_height }}">

and I’m trying to make either of the code below work with it but can’t. The one just below works when used inside the content part of a page.

![Sample Image](sample-image.jpg?cropZoom=600,200)

And I’ve tried to use the one below to get it to work in all sorts of ways.

{{ page.media['sample-image.jpg'].cropZoom(600,200).html()|raw }}

Thanks!

2

@ezpz,

And I’ve tried to use the one below to get it to work in all sorts of ways.
{{ page.media['sample-image.jpg'].cropZoom(600,200).html()|raw }}

Above Twig snippet should work. But where did you run above snippet?

3

@pamtbaau

I ran it in this file: summary.html.twig under the /templates/partials/item/ folder

Which is the file that displays the list of all of my blog posts on front page.

Sorry if I’m going against what’s recommended but for now this is how I have it.

Edit: Also, what you posted, is that supposed to display the image without the need for html <img> tags?

4

@ezpz

I ran it in this file: summary.html.twig under the /templates/partials/item/ folder

Ah, you’re not using Quark… Always handy to mention the context.

Sorry if I’m going against what’s recommended but for now this is how I have it.

It needs to be placed where it suits your design best…

Edit: Also, what you posted, is that supposed to display the image without the need for html <img> tags?

Yes, function .html() generates a complete <img> tag.

5

@pamtbaau

Thank you. But for this code:
{{ page.media['sample-image.jpg'].cropZoom(600,200).html()|raw }}
What is exactly supposed to replace the sample-image.jpg?

I am trying this code for instance and nothing is being rendered on the screen.
{{ page.media['https://thumbor.forbes.com/thumbor/fit-in/900x510/https://www.forbes.com/home-improvement/wp-content/uploads/2022/07/download-23.jpg'].cropZoom(600,200).html()|raw }}

6

@ezpz,

What is exactly supposed to replace the sample-image.jpg ?

Usually, images are stored in the folder of the page (blog item is also a page). In that case, you can use the filename of the image. No path needed.

You might consider taking another look at the docs on Media…

7

@pamtbaau

I’m struggling to get it working with a regular https://example.jpg to replace the sample-image.jpg but is there a way to use {{ header_image_url }} so that I don’t have to manually choose?

Is filename optional or will it NOT work if there is a FQDN in the path?

8

@ezpz,
The snippet page.media['sample-image.jpg'] tells Grav to get file sample-image.jpg from the existing set of media files available inside the folder of the page.

Grav won’t download the image pointed at using a url.

9

@pamtbaau

Thanks but is there any way to tell that snippet tool to just grab the LEFT MOST image (that sits under the page media like in the screenshot) and use that, without me having to put the actual image filename in that sample-image.jpg place?

image

10

@ezpz, I think you could try the following:

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

{% if image %}
{{ image.cropZoom(600,200).html()|raw }}
{% endif %}
1 Like
11

@pmoreno

WOW, thank you! It works perfectly!!!

:grin: