Forum

Thread tagged as: Question, Problem, Blog

Image Cropping - Am I missing something?

Hi there,

I appear to be missing something when it comes to image cropping. I thought I was doing it right but doesn't appear to work. I'm trying to echo out a related posts section within my posts, I would like to use the same image as the listing but in a different size.

Here's what I've got in my post.html

<perch:blog id="listimage" type="image" label="Image for listing page" width="1440" height="1440" crop="true" supress="true" order="1" />

Then this is what I've put in my related.html

<perch:before>
<ul class="hfeed listing related"></perch:before>
    <li class="hentry">
        <a href="<perch:blog id="postURL" />" rel="bookmark"><perch:if exists="listimage"><img src="<perch:blog id="listimage" type="image" width="453" height="240" crop="true" />" alt="<perch:blog id="listimage" />" /></perch:if></a>
        <div class="description entry-summary">
             <h4><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h4>
            <perch:blog id="excerpt"/>
        </div>
    </li>
<perch:after>
    </ul>
</perch:after>

This doesn't appear to work as the images in related.html don't change to the new height I've specified. I don't know what I've missed? I've read through the documentation and I'm still no clearer on how to fix this. Any help would be greatly appreciated. :)
Cameron Duthie

Cameron Duthie 0 points

  • 4 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

4 years ago

You need to include all image sizes that you require in your post.html, then reuse them in other templates. Every add-on has a Master Template, see the section for Master Templates here: https://docs.grabaperch.com/templates/core-concepts/
Cameron Duthie

Cameron Duthie 0 points

4 years ago

Hi Rachel,

Thanks for getting back to me and clearing that up. I already tried that but with no luck,

post.html

<perch:blog id="listimage" type="image" label="Image for listing page" width="1440" height="1440" crop="true" supress="true" order="1" />
<perch:blog id="listimage" type="image" label="Image for listing page" width="453" height="240" suppress="true" />

related.html

 <a href="<perch:blog id="postURL" />" rel="bookmark"><perch:if exists="listimage"><img src="<perch:blog id="listimage" type="image" width="453" height="240" crop="true" />" alt="<perch:blog id="listimage" />" /></perch:if></a>

Any other ideas? Thanks for the help so far.
Simon Clay

Simon Clay 127 points

4 years ago

Hi Cameron,

You don't have crop="true" in post.html for your width="453" height="240" version, so that may be the issue.

(After altering post.html you'll need to re-save the blog post in admin. )
Cameron Duthie

Cameron Duthie 0 points

4 years ago

Thanks Simon. The crop="true" seems to have sorted it. :)

I've also been picked off by the re-save a few times in the past.

Thanks again.