Forum
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:
<li>
<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>
</li>
It results in the following html:
<li>
<a href="/perch/resources/image11-1-w85%hauto.png">
<img src="/perch/resources/image11-1-w100%h100%.png" alt=""></a>
</li>
That's obviously not right. What am I doing wrong?
Actual path to the original source file is "/perch/resources/image11.png"
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.
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.