Forum

Thread tagged as: Question, Problem, Blog

Should images be resized when using the width/height attributes on perch:blog ta...

If I have the following in a blog template (specifically post_in_list.html in this case), should the served image be resized (ie, before it gets to the browser):

<img src="<perch:blog id="image" type="image" width="250" height="250" crop="true" />" width="250" height="250">

What I'm finding is that the downloaded image is the original size (in this case, >3000x3000px and 6MB!). I would instead expect it to send a 250x250 image.

Is there a step that needs to be performed to get the ~250x250 image?

Darryl Hein

Darryl Hein 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

The same tag needs to appear in the post.html template, as that's the master template for the content.

Duncan Revell

Duncan Revell 78 points
Registered Developer

You need to add the different image sizes to the template that is used to upload the image (for blog, a master template).

https://docs.grabaperch.com/perch/content/templates/upload-one-image-generate-many-sizes/

As Drew says. Who posted first.

Okay...that helped, but not really.

I added the following the post.html:

 <perch:blog id="image" type="image" width="250" height="250" crop="true" suppress="true" />

The resized image has been created in the resources folder, but the original size is still be used on the page. It's still referencing the original image in the output HTML.

Any ideas?

Duncan Revell

Duncan Revell 78 points
Registered Developer

How are you now calling the image in post_in_list.html?

It's used as the main blog page listing the posts (https://www.honiva.com/knowledge-hub/), the archive page (https://www.honiva.com/knowledge-hub/archive) and then also on the home page (https://www.honiva.com/) using:

perch_blog_recent_posts(1);
Duncan Revell

Duncan Revell 78 points
Registered Developer

Sorry, I meant - in your post_in_list.html, repeat the same image tag from post.html, but remove suppress="true"

<perch:blog id="image" type="image" width="250" height="250" crop="true" />

We do. My original post is copied from post_in_list.html. Here are all the image tags from the 2 files:

post_in_list.html

 <img src="<perch:blog id="image" type="image" width="250" height="250" />" width="250" height="250" alt="<perch:blog id="postTitle" />">

post.html

<perch:blog id="image" type="image" width="50" height="50" label="Image" order="4" crop="true" suppress="true" />
<perch:blog id="image" type="image" width="250" height="250" crop="true" suppress="true" />

I also tried adding an image tag that wasn't suppressed but nothing changed.

Would the issue be that the tag in post_in_list.html doesn't have crop="true" ?

Duncan Revell

Duncan Revell 78 points
Registered Developer

Possibly - give it a try...

It seems to and that's what's in the addon template.

Kinda weird, but I guess it's a solution that semi makes sense.

And thanks!

Drew McLellan

Drew McLellan 2638 points
Perch Support

An image variant is defined by the combination of width, height and crop - so when you need to reuse a certain size, you need to make sure you use the same combination as the original.

The reason being a non-square image sized with width="200" height="200" results in a completely different result than one sized with width="200" height="200" crop="true" and there's no reason you wouldn't want both available.