Forum
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?
The same tag needs to appear in the
post.htmltemplate, as that's the master template for the content.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: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?
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:
Sorry, I meant - in your post_in_list.html, repeat the same image tag from post.html, but remove
suppress="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.htmlpost.htmlI also tried adding an image tag that wasn't suppressed but nothing changed.
Would the issue be that the tag in
post_in_list.htmldoesn't havecrop="true"?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!
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 withwidth="200" height="200" crop="true"and there's no reason you wouldn't want both available.