Forum

Thread tagged as: Question, Problem

How to display image thumbnails in blog

Hi - I am creating image thumbnails for my blog author but I'm not sure how to display them. This is the command I'm using to display the actual image:

 <perch:if exists="author_image">
            <img src="<perch:blog id="author_image" />" width="150" height="auto" alt="<perch:blog id="authorGivenName" /> <perch:blog id="authorFamilyName" />">
        </perch:if>

The thumbnail has been generated but do I just append "thumb@2x" to the URL or is there another way?
Nick Capehorn

Nick Capehorn 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

You'll need to use type="image" at the very least, plus whatever image and crop options you use in the master template.

<perch:blog id="author_image" type="image" />
Nick Capehorn

Nick Capehorn 0 points

5 years ago

No that doesn't make any difference. This template is used to display the image not accept it.

The image that is served is still 3000px wide.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

What does the tag in your master template look like?
Nick Capehorn

Nick Capehorn 0 points

5 years ago

<perch:if exists="author_image"> <img src="<perch:blog id="author_image" type="image" label="Image" width="240" height="240" crop="true" density="2" order="5" />" width="120" height="120" alt="<perch:blog id="authorGivenName" type="text" label="Given name" order="1" /> <perch:blog id="authorFamilyName" type="text" label="Given name" order="2" />" /> </perch:if>
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Ok, so when you want to reuse the image, you'll need at least:

<perch:blog id="author_image" type="image" width="240" height="240" crop="true" density="2" />
Nick Capehorn

Nick Capehorn 0 points

5 years ago

No that doesn't make any difference - the image served is still 3000px wide which is slowing the website down. I'm fairly sure I need to pull in the image thumbnail. If there isn't a perch:blog command that will enable me to do this I will have to try appending to the URL.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Please show me both the templates you're using.
Nick Capehorn

Nick Capehorn 0 points

5 years ago

This is the template to display the author image for a blog post in a list:

<perch:before>
<ul class="hfeed listing"></perch:before>
    <li class="hentry">
        <perch:if exists="author_image">
            <img src="<perch:blog id="author_image" type="image" width="150" height="auto" crop="true" density="2" /> alt="<perch:blog id="authorGivenName" /> <perch:blog id="authorFamilyName" />">
        </perch:if>
        <div class="post-info">
            <a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><h2><perch:blog id="postTitle" /></h2></a>
            <div>
            <p class="entry-published date"><perch:blog id="postDateTime" format="%d %B %Y" /> | <a href="/resources/blog/archive/author/<perch:blog id="authorSlug" type="text" />"><perch:blog id="authorGivenName" type="text" label="Given name" /> <perch:blog id="authorFamilyName" type="text" label="Given name" /></a></p>
            <div class="description entry-summary">
                <perch:blog id="excerpt" type="textarea" textile="true" />
            </div>
        </div>
        <!--<p>Comments: <perch:blog id="postCommentCount"/></p>-->
        <!--<p>Categories: <perch:categories id="categories" set="blog" label="Categories" display-as="checkboxes">
        <perch:category id="catTitle" type="text" /></perch:categories>-->
            </p>
            <a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title read-button">Read More</a>
        </div>
    </li>
<perch:after>
    </ul>
</perch:after>

This is the template used to enter the image:

<div class="module author">
    <perch:if exists="author_image">
        <img src="<perch:blog id="author_image" type="image" label="Image" width="240" height="240" crop="true" density="2" order="5" />" width="120" height="120" alt="<perch:blog id="authorGivenName" type="text" label="Given name" order="1" /> <perch:blog id="authorFamilyName" type="text" label="Given name" order="2" />" />
    </perch:if>
    <div class="author hcard">
        <h2 class="fn n"><a href="/resources/blog/archive.php?author=<perch:blog id="authorSlug" type="text" />"><perch:blog id="authorGivenName" type="text" label="Given name" order="1" />  <perch:blog id="authorFamilyName" type="text" label="Given name" order="2" /></a></h2>
        <perch:blog id="author_biog" type="textarea" label="Biography" textile="true" editor="markitup" order="4" />
        <perch:blog id="job_title" type="text" label="Job Title" />
    </div>
</div>

<perch:blog id="author_twitter" type="text" suppress="true" label="Twitter account" />
<perch:blog id="author_linkedin" type="text" suppress="true" label="LinkedIn Profile" />
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Ok, so display the image you're doing this:

<perch:blog id="author_image" type="image" width="150" height="auto" crop="true" density="2" />

but it's been uploaded like this:

<perch:blog id="author_image" type="image" label="Image" width="240" height="240" crop="true" density="2" order="5" />

The size and crop options don't match. Also there's no auto option for height - just leave that attribute out.

To fix it, in your master template, add this:

<perch:blog id="author_image" type="image" width="150" density="2" suppress="true" />

and in your display template, use this:

<perch:blog id="author_image" type="image" width="150" density="2" />

Make sure you re-save the content after changing the template.