Forum

Thread tagged as: Question

specify image dimensions in html

Maybe it's obvious, but can't figure how to specify the width and height of an image in the HTML. Is it possible to add something in the image tag ?
DEVAUX Nicolas

DEVAUX Nicolas 0 points

  • 6 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

6 years ago

Look under Output Options in the documentation for image: https://docs.grabaperch.com/docs/templates/attributes/type/image/
DEVAUX Nicolas

DEVAUX Nicolas 0 points

6 years ago

Yes, i tried it this way :

<img src="<perch:content id="logo" type="image" width="300" label="Logo" />" alt="<perch:content id="logoalt" type="text" label="Alt text" />" height="<perch:content output="h" />">

Ok... I am so tired... I have to put the height instead of "h". But is there a way to output the dimensions automatically, i mean without specifying manually the w and h ?
Rachel Andrew

Rachel Andrew 394 points
Perch Support

6 years ago

Most people are doing responsive design and do not want the height and width output, so we have given you a way to do it if you want it - rather than doing so automatically.
DEVAUX Nicolas

DEVAUX Nicolas 0 points

6 years ago

Most people are doing responsive design and do not want the height and width output

I do ! But for SEO purposes the good practice is to minimize load time by specifying image dimensions in the HTML. Responsiveness is a matter of CSS, even if an image dimension is specified. Nevermind.

But can't figure the way i can do that, the documentation is not obvious to me for this thing. Thanks for helping.
Rachel Andrew

Rachel Andrew 394 points
Perch Support

6 years ago

The documentation explains how to output the height and width. For example for an image with an id of logo, your width attribute would contain:

width="<perch:content id="logo" type="image" label="Logo" output="w" />"

That's the exact example pasted from the docs. I'm not sure what else I can suggest, as that's the way to do what you are asking.
DEVAUX Nicolas

DEVAUX Nicolas 0 points

6 years ago

Ok, i am sorry, it works. I thought i had a bad output number because the native image resolution was bigger than the one perch outputted, as i resized it with width="300"...

So i had to write :

<img 
src="<perch:content id="logo" type="image" width="300" label="Logo" />" 
alt="<perch:content id="logoalt" type="text" label="Alt text" />"  
width="<perch:content id="logo" type="image" label="Logo" output="w" />"
height="<perch:content id="logo" type="image" label="Logo" output="h" />"
>

Thanks a lot. Thanks to this i realized that my native image was way too big ! By the way, you would surely appreciate my responsive skills ;-) (just kidding...)