Forum

Thread tagged as: Problem

html missing

I have this markup in one of my templates:

<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" label="Image Caption (if required)" /></a>
</div>

I need to be able to add a caption that can be a link, but only if required. This solution here doesn't seem right and it doesn't even produce any markup for the caption, although the caption does appear!

How can I do this better?

Thanks
Chris James

Chris James 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Your caption field is missing an ID.
Chris James

Chris James 0 points

7 years ago

Thanks Ive fixed that, but its producing this markup:


<div class="main-img">

    <!-- Link to page -->
    <a href="history-book.pdf">

    <!-- Image upload -->
    <img src="/perch/resources/history-thumb.png" alt="" /></a>

    <!-- Image caption link-->


    <!-- Image caption -->
    Caption

 </div><!-- .main-img -->

I cant target the caption for styling because the <a> tag is not outputting (because its being shared by 'image caption link' and 'image caption'...?

I cant figure out how to combine the two.
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

You could do something more like:

<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:content id="caption" type="text" label="Image Caption (if required)" />
    </a>
<perch:else />
    <perch:content id="caption" type="text" label="Image Caption (if required)" />
</perch:if>
Chris James

Chris James 0 points

7 years ago

Thanks Drew. I've replaced the caption section with your suggestion but the caption renders without its <a> tags still!

??
Chris James

Chris James 0 points

7 years ago

I tell a lie. Seems to be working fine now. Thanks!