Thread tagged as: Question

Trouble with Perch image paths when creating a simple gallery

Hello, I'm following the tutorial 'Create a simple image gallery'. I think I'm following it to the letter.

When using the template:

      <a href="<perch:content id="image" type="image" label="Image" width="85vw" >">
        <img src="<perch:content id="image" type="image" label="Image" width="100%" height="100%" crop>" alt=""></a>

It results in the following html:

      <a href="/perch/resources/image11-1-w85%hauto.png">
        <img src="/perch/resources/image11-1-w100%h100%.png" alt=""></a>

That's obviously not right. What am I doing wrong?

Actual path to the original source file is "/perch/resources/image11.png"

kyle cadotte

kyle cadotte 0 points

  • 3 years ago

I think the image width and height attributes will need to be in pixels, i.e a number without units. I don't know that you can use vw or % units.

Thnk you. It seems you cannot use relative units, which makes it a challenge for the modern, responsive web. I'll have to try to do this with breakpoints I guess.

Rachel Andrew

Rachel Andrew 394 points
Perch Support

Perch can't crop an image using viewport units, as that doesn't make any sense at the time of creating the image files. If you want to display it using viewport units or anything else that's fine.

Ok, I think I get it. The inline height/width styling in the Perch template determines the crop and hence the filename? So a typical image path would be '/perch/resources/image11-1-w45pxh45px.png' ? And omitting either height or width results in 'wauto' or 'hauto'? I'm reverting to a fixed width/breakpoint strategy.