I am quite new to this so, please be patient. I am wanting to output the following html:
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/jcarousel.responsive.js"></script>
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li>
<img src="images/home-slider-1.jpg" alt="home slider image">
<div class="white-logo"></div>
<div class="jcarousel-text">
<p>Helping you to establish your outdoor brand in the world of retail and e-commerce</p>
</div>
</li>
<li>
<img src="images/home-slider-2.jpg" alt="home slider image">
<div class="white-logo"></div>
<div class="jcarousel-text">
<p>One of our top brands</p>
</div>
</li>
<li>
<img src="images/home-slider-3.jpg" alt="home slider image">
<div class="white-logo"></div>
<div class="jcarousel-text">
<p>We also have a design service</p>
</div>
</li>
<li>
<img src="images/home-slider-4.jpg" alt="home slider image">
<div class="white-logo"></div>
<div class="jcarousel-text">
<p>Visit us at our new site</p>
</div>
</li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev"><img src="images/nivo-nav-buttons.png"></a>
<a href="#" class="jcarousel-control-next"><img src="images/nivo-nav-buttons.png"></a>
</div>
I have a Matrix field set up as follows:
Field handle: homepageSlider
Block type handle: homeSlider
Field name handles: mainImage, whiteLogo, imageText and mainImage.
mainImage has a field type of 'Assets'
whiteLogo has a field type of 'Lightswitch'
imageText has a field type of 'Plain Text'
mainImageLink has a field type of 'Linkit' (from a plugin).
So far, I have written:
{% block content %}
{% includeJsFile "/js/jquery.jcarousel.min.js" %}
{% includeJsFile "/js/jcarousel.responsive.js" %}
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
{% for block in entry.homepageSlider %}
<li>
{% if block.type == "mainImage" %}
{% set image = block.mainImage %}
<img src="{{ image.getUrl }}" alt="{{ image.title }}">
{% endif %}
{% if block.type == "whiteLogo" %}
<div class="white-logo">
{% set imagetwo = block.mainImage %}
<img src="{{ imagetwo.getUrl }}" alt="{{ imagetwo.title }}">
</div>
{% endif %}
{% if block.type == "imageText" %}
<div class="jcarousel-text"><p>{{ block.imageText }}</p></div>
{% endif %}
{% if block.type == "mainImageLink" %}
{% set yourLink = entry.mainImageLink %}
{{ yourLink.link|raw }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
<a href="#" class="jcarousel-control-prev"><img src="images/nivo-nav-buttons.png"></a>
<a href="#" class="jcarousel-control-next"><img src="images/nivo-nav-buttons.png"></a>
</div>
This outputs html as I want, BUT, is empty between <li>
and </li>
. I have tried following this post, but am so far getting nowhere.
Any help that anyone can offer would be most appreciated.
With kind regards,
Mark