Forum

Thread tagged as: Question, Problem

Add a button to my nivoslider template?

Here's the template code, I want to add a button to each slide but everything I've tried breaks the slider.

<perch:before>
<div id="slider" class="nivoSlider theme-default">
</perch:before>
<perch:content id="order" type="text" label="Slide Order" suppress="true" help="Number order for slides: 1, 2, 3,...." />
<img src="<perch:content type="image" id="image" label="Image" />" alt="<perch:content type="text" id="alt-text" label="Alt text" required="true" help="describe your image" title="true" />" 
border="0" title="<perch:content type="text" id="caption" html="true" label="Caption" required="false" help="Optional: You can provide a caption." title="true"/>" />
<perch:after>
</div><!-- /slider -->
</perch:after>

Has anyone managed to do this?

Darren Cusdin

Darren Cusdin 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

What are you tying to add, and how does it break?

I'm trying to add an anchor tag which I will style into a button. I would like to add it underneath the caption. When adding this it either appears outside of the slide, or stops the slide from displaying all together - depending where it goes. I'm using title="" to create the caption, but can't add any further HTML this way. I need to update the way the captions work in the template, but can't seem to figure it out.

Drew McLellan

Drew McLellan 2638 points
Perch Support

This really sounds more like a nivoslider question than a Perch one. I don't really know anything about nivoslider, so you might be better asking them.

Thanks Drew

The Nivoslider documentation advises this syntax to add a link to a slide image:

<a href="https://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>

But this doesn't work in my template. I think the issue is with the way I've implemented the Perch tags, not Nivoslider.

Drew McLellan

Drew McLellan 2638 points
Perch Support

If you add it as HTML, what result do you get?