Forum

Thread tagged as: Question

Multiple images

hi,

I want to create multiple images when I upload an image. How do I make them at upload time, and how do I access the different sized images later on through other templates?
Adam Menczykowski

Adam Menczykowski 1 points

  • 7 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

7 years ago

Just use the same ID with different heights and widths. Then use the same perch template tag along with the width and height in other templates.
Adam Menczykowski

Adam Menczykowski 1 points

7 years ago

Thanks, I see that I have to include the different sizes in my original template, but if I do as below, then my code outputs all versions. I tried using suppress="true" but they still output.

<perch:content type="image" id="header-image" width="1200" height="600" crop="true" density="2" label="Course Header Image - please upload an image that is 600px H x 1200px W, and has been compressed to roughly 100kb in size."/>
<perch:content type="image" id="header-image" width="600" height="300" crop="true" suppress="true"/>
Adam Menczykowski

Adam Menczykowski 1 points

7 years ago

Can you suggest a method to create multiple sizes at upload time but only display one on the page? Do I need to create two templates for the same page?
James Tedder

James Tedder 0 points

7 years ago

Worked for me? I just wrapped the original Perch:Content in an IMG tag.

<img src="<perch:content type="image" id="header-image" width="1200" height="600" crop="true" density="2" label="Course Header Image - please upload an image that is 600px H x 1200px W, and has been compressed to roughly 100kb in size."/> " />

<perch:content type="image" id="header-image" width="600" height="300" crop="true" suppress="true"/>
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

suppress="true" is the way to do it. Can you show me evidence of it not working?
Adam Menczykowski

Adam Menczykowski 1 points

7 years ago

Figured it out.

The image was being used to change a div's background image in line.

<section class="courses" style="background-image: url('<?php perch_content('Course Navigation Background Image'); ?>');">

This didn't work as it was over 2 lines, the output html was not seen to be valid property value:

<perch:content type="image" id="header-image" width="1200" height="600" crop="true" density="2" label="Course Header Image - please upload an image that is 600px H x 1200px W, and has been compressed to roughly 100kb in size."/>
<perch:content type="image" id="header-image" width="800" height="400" crop="true" suppress="true"/>

However this worked having the 2 different sized images on one line:

<perch:content type="image" id="header-image" width="1200" height="600" crop="true" density="2" label="Course Header Image - please upload an image that is 600px H x 1200px W, and has been compressed to roughly 100kb in size."/><perch:content type="image" id="header-image" width="800" height="400" crop="true" suppress="true"/>
James Tedder

James Tedder 0 points

7 years ago

You don't actually need to have the 'Suppressed" images in the same line.

I tend to put all my suppressed images at the bottom of the template so I can see them at a glance. Have a look at the default BLOG template for 'post.html' and you will see the following outside of the required code:

<perch:blog id="excerpt" type="textarea" label="Excerpt" textile="true" order="3" suppress="true" size="s" />
<perch:blog id="image" type="image" width="50" height="50" crop="true" suppress="true" />