Forum

Thread tagged as: Question, Problem

Showing Image Thumbnail

I'm trying to create a 'Meet The Team' page on my website.

I've created the region, and everything is being output to the screen OK. Part of the output data is an image, or a profile photo if you like.

I want to display the thumbnail that Perch creates of the 'profile photo' that the user uploads, as this reduces the risk of the user uploading a large image and breaking layout.

I'm currently using the following code:

<img src="<perch:content id="logo" type="image" label="Profile Picture" />" alt="<perch:content id="name" type="text" label="Name" />" height="150" width="150" crop="true" />

But the problem with this is that it links to the original image, using CSS / Markup to resize the image, meaning the image is distorted.

How can I link to the thumbnail that Perch creates when a user uploads an image?

As an additional add on, how do I control the dimension of the re-sized image?

Thanks in advance
Adtrak LLP

Adtrak LLP 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

You need to set width height and crop attributes on the <perch:content /> tag.
Adtrak LLP

Adtrak LLP 0 points

7 years ago

Thanks Drew,

That's solved the issues.

Just so I know for the future, is there no easy way to link through to the thumbnail that gets created when the user uploads a file?
Rachel Andrew

Rachel Andrew 394 points
Perch Support

7 years ago

That's just for admin purposes. If you want to create a thumbnail then add a second image field at the dimensions you require (reusing the ID) and you'll get another image created as a thumbnail.