Forum

Thread tagged as: Question, Field-Types

Image cropping for perch:category

Hello guys, i have two templates. One for the categories:

<perch:before>
<section class="teaser--categories">
    <ul class="grid">
</perch:before>
        <li class="grid__1-4">
            <a href='/produkte/<perch:category id="catSlug" type="hidden" replace="/|" />' title='<perch:category id="catTitle" type="hidden" />'>
                <img src="<perch:category id="image" type="image" label="Image" width="580" height="580" density="1.5" crop="true"/>" alt="<perch:category type="text" id="alt" label="Image Description" />" />
                <h3><perch:category id="catTitle" type="smarttext" label="Title" required="true" /></h3>
                <perch:category id="catSlug" type="slug" for="catTitle" suppress="true"/>
                <perch:category id="desc" type="textarea" label="Description" editor="markitup" markdown="true" suppress="true"/>
            </a>
        </li>
<perch:after>
    </ul>
</section>
</perch:after>

And one for for a category intro which shows on the specific category overview page:

<section class="intro-category">
    <figure>
        <img src='<perch:category id="image" type="image" label="Image" width="300" height="300" density="1.5" crop="true"/>' alt='<perch:category id="alt"/>' />
    </figure>
    <div class="intro__info">
        <h1><perch:category id="catTitle" type="smarttext" label="Title" required="true" /></h1>
        <hr>
        <perch:category id="desc" type="textarea" />
    </div>
</section>

On my category overview page the image cropping works as expected and outputs the image in 580x580 (with density = 870x870). But on the category page the image wont get cropped to 300x300 for some reason.

Isnt this possible or am i just doing something wrong?

Thanks in advance! Greets, Bastian
Bastian Silbereis

Bastian Silbereis 0 points

  • 4 years ago
Duncan Revell

Duncan Revell 78 points
Registered Developer

4 years ago

You need to add the various image sizes together in the same template that is called when the images are uploaded

So, if your images are essentially uploaded when the first template is used, add all sizes there (suppress the sizes you don't want to be displayed in the front end).

Then reference the image size you want to see in the second template.

Image cropping occurs at the point of upload, in short.
Bastian Silbereis

Bastian Silbereis 0 points

4 years ago

Well even if i try to reference the 580x580 image from the category template by id, it doesnt work. It just outputs the correct image but with the original file resolution.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Can you give us an example of how you're doing that?
Bastian Silbereis

Bastian Silbereis 0 points

4 years ago

Hello again, sry that i didnt answer but i had a lot to do the last months. Unfortunately i still couldnt figure out how to solve this problem. In my category template i use

<img src='<perch:category id="image" type="image" label="Image" width="580" height="580" density="1.5" crop="true"/>' alt="<perch:category type="text" id="alt" label="Image Description" />" />

which works just fine. But in my category-title template i have an image output but not cropped.

<perch:category id="image"/>

Thanks in advance.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

You need to specify the size you want to use:

<perch:category id="image" width="580" height="580" density="1.5" crop="true" />