Forum

Thread tagged as: Problem

class="falling" - image not responding in template

My template which isn't producing a responsive image:

<div class="projects-pic-d projects-pic-t projects-pic-m">

<img src="<perch:content type="image" id="Projects list image" label="Image" width="980" height="600" crop="true"  class="fullimg" />" alt="<perch:content type="text" id="alt" label="Description" required="true" help="Briefly describe the image" title="true" />" />


<h3><perch:content id="project-name-location" type="text" label="Heading" required="true" help="Example: New Build, Lincoln " title="true" /></h3>

</div>
Daniel Hurley

Daniel Hurley 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

What HTML are you getting, and how does it differ from what you're expecting?

I don't think you should have spaces in your image ID... I think your Label and ID are mixed up.

Wayne I think you're right and i have changed that. This was creating another problem where I couldn't load an image from within perch.

the above is for class="fullimg"

html I'm getting is: <img src="/perch/resources/dsc00048-w980h600.jpg" alt="Griff Build extension photo" />

my static pages differs here, (i'm want class="falling" to be included): <img src="assets/images/Gail-&-Cory-001.jpg" alt="alt text for image" class="fullimg"/>

Rachel Andrew

Rachel Andrew 394 points
Perch Support

Please post your updated template.

You need to take the class="fullimg" out of the perch:content area. Put it just before alt= bit and resave the region.

Code now looks like this:

<div class="projects-pic-d projects-pic-t projects-pic-m">

<img src="<perch:content type="image" id="image" label="Main projects list image" width="980" height="600" crop="true"/>" class="fullimg" alt="<perch:content type="text" id="alt" label="Description" required="true" help="e.g. Griff Build extension photo" title="true" />" />

<h3><perch:content id="project-name-location" type="text" label="Project Type, Location" required="true" help="Example: New Build, Lincoln " title="true" /></h3>

</div>

Images are now responding!

issue resolved

thanks very much indeed