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

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/

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

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. )

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.