Use Matrix field to output specific html

Question

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

Answer 1

In your code block.type is the matrix block type, ie homeSlider.

There's alot going on in your code that I'm not sure is intended or not, but let's say you had the fields mainImage and imageText as required fields in there, and have an optional whiteLogo (not sure where that link's suppose to go, it's not in your original html). Try something like this:

{% 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>
    {% set image = block.mainImage.first() %}
    <img src="{{ image.getUrl }}" alt="{{ image.title }}">

    {% if block.whiteLogo %}
      <div class="white-logo"></div>
    {% endif %}

    <div class="jcarousel-text"><p>{{ block.imageText }}</p></div>
  </li>
  {% endfor %}
</ul>
</div>

So, inside you're for loop, the fields you've created are accessible by block.fieldHandle. If you want to make a conditional based on if a field has a value or not, that is done in different ways depending on the type of field. So you'd do {% if block.lightswitchField %} if it's a lightswitch, {% if block.assetField | length %} if it's an assets field, or {% if block.textField != '' %} if it's a text field.

Hope that helps you in the right direction.