Forum

Thread tagged as: Question, Problem

Image template problem

I built a template for the client to put images in the right hand column of a page.

As it currently is, if the client enters an image caption, it will only be given an html tag in the markup (<a>), if they also want it to link to somewhere. So if there is no link, it has no html tag associated with it. How can I change this so that a caption without a link can just be a <p> tag?

<div class="main-img">

    <!-- Link to page -->
    <perch:if exists="link">
    <a href="<perch:content id="link" type="text" label="Link for Image - (page-name.php or https://...) or leave blank" />">
    </perch:if>

    <!-- Image upload -->
    <img src="<perch:content id="right-col-img" type="image" label="Right Column Image" />" alt="<perch:content id="title" type="text" label="Alt Tag (For SEO and Accessibility)" />" /></a>

    <!-- Image caption link-->
    <perch:if exists="captionlink">
        <a class="caption" id="caption" href="<perch:content id="captionlink" type="text" label="Link for Caption - (page-name.php or https://...) or leave blank" />">
    </perch:if>

    <!-- Image caption -->
    <perch:content type="text" id="caption2" label="Image Caption (if required)" /></a>

</div>
Chris James

Chris James 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Use a perch:else

<div class="main-img">

    <!-- Link to page -->
    <perch:if exists="link">
        <a href="<perch:content id="link" type="text" label="Link for Image - (page-name.php or https://...) or leave blank" />">
    <perch:else />
        <p>
    </perch:if>

    <!-- Image upload -->
    <img src="<perch:content id="right-col-img" type="image" label="Right Column Image" />" alt="<perch:content id="title" type="text" label="Alt Tag (For SEO and Accessibility)" />" />

    <perch:if exists="link"></a><perch:else /></p></perch:if>

    <!-- Image caption link-->
    <perch:if exists="captionlink">
        <a class="caption" id="caption" href="<perch:content id="caption link" type="text" label="Link for Caption - (page-name.php or https://...) or leave blank" />">
    <perch:else />
        <p>
    </perch:if>

    <!-- Image caption -->
    <perch:content type="text" id="caption2" label="Image Caption (if required)" />

     <perch:if exists="captionlink"></a><perch:else /></p></perch:if>

</div>
Chris James

Chris James 0 points

6 years ago

Thanks Drew, that does work but client also wants the text to be clickable too...??
Rachel Andrew

Rachel Andrew 394 points
Perch Support

6 years ago

Which text? What HTML output are you trying to get to? As that's always the best place to start.
Chris James

Chris James 0 points

6 years ago

With the template Drew has suggested, if a link is given for the caption, it doesn't work. So if a link is given the caption needs to be an <a> tag.

If I give a link in the 'image caption link' field, then save, the link just vanishes!
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Ok, maybe I misread your template, but the principal is the same.

<perch:if exists="a_field">
    ... do one thing ...
<perch:else />
    ... do something else ...
</perch:if>