Forum

Thread tagged as: Problem, Blog

Image cropping

I have tried looking through the forum to find something similar but don't seem to be able to.

I have a custom blog listing on the homepage. However the image needs to be resized. Within the actual blog post the image acts like a full width banner, however want the image to display in a smaller listing on the homepage.

So I am trying to use this - <perch:blog id="image" type="image" width="270" height="175" crop="true" /> - to try and get the image to re size however it just stays at the same dimensions.

Should what I am doing work? Or is there a different approach to this.

Thanks, Martin
Martin Murphy

Martin Murphy 0 points

  • 5 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

5 years ago

Please post your full template and Diagnostics Report - thanks!
Robert Ketter

Robert Ketter 103 points

5 years ago

Martin,

Make sure your including the full tag in your additional templates where you want the cropped image to display. Without all the size and crop attributes perch will display the full size image.

That being said, please post information as requested by Rachel to get additional help. :)
Martin Murphy

Martin Murphy 0 points

5 years ago

Hi guys,

Thanks for the response so far. Robert as far as I know I think I am using the full tag. Anyways here is the extra information. Still can't work it out.

Custom template:

<perch:before>
    <div class="row blog-post-row">
</perch:before>

<div class="col-md-3 music-blog-post">
    <div class="music-blog-image">
        <a href="<perch:blog id="postURL" />">
            <img src="<perch:blog id="image" type="image" width="270" height="175" crop="true" />" alt="<perch:blog id="postTitle" type="text" />">
            <div class="music-hover-play"><i class="fa fa-hand-peace-o"></i></div>
        </a>
    </div>
    <div class="music-blog-detail">
        <h1><a href="<perch:blog id="postURL" />"><perch:blog id="postTitle" type="text" /></a></h1>
        <h2><i class="fa fa-bookmark-o"></i> <perch:blog id="postDateTime" format="j M y" /> <i class="fa fa-commenting-o"></i> <perch:blog id="postCommentCount"/></h2>
        <perch:blog id="excerpt" type="textarea" textile="true" />
    </div>
</div>

<perch:every count="4">
    </div>
    <div class="row blog-post-row">
</perch:every>

<perch:after>
    </div>
</perch:after>
Mike Harrison

Mike Harrison 37 points

5 years ago

Hi Martin,

One thing I have missed previously is that you need to generate the various image sizes / crops in the blog post template, before using them elsewhere. These are supressed in the post so don't show. Details of that are here:

https://solutions.grabaperch.com/architecture/upload-one-image-generate-many-sizes
Martin Murphy

Martin Murphy 0 points

5 years ago

Thanks Mike, this is what I was looking for.. Sorry about that guys! Makes sense now.

Martin