3

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

4

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.

| improve this answer | |
  • Thanks for your rapid response. Sorry, the Linkit field shouldn't have been included, it's not now required ... I'm REALLY new to this and not sure how to make use of your answer. With the img src part, don't I need to make reference to the field handle, 'mainImage,' in someway? – SYPOMark Feb 17 '16 at 15:54
  • Sorry, you're right. I was going to add a line of code, and forgot. Fixed it now. :) – André Elvan Feb 17 '16 at 16:08
  • I've just implemented your code exactly as it was, and it worked! ... Well, with the exception that one of the field name handles I gave should have been whitelogo and NOT whiteLogo, but once I'd realised my mistake the outputted html was spot on! My more complicated code was trying to use the example from the craft cms docs – SYPOMark Feb 17 '16 at 16:40
  • 1
    Great. The example in the craft docs is related to outputting different types of matrix blocks in one loop. If you only have one block type, most of that example is irrelevant. :) – André Elvan Feb 18 '16 at 9:20
  • Thanks Andre. That explains why I couldn't get it to work! I particularly liked your solution because it's so sparse. I love code that works with the minimum of characters. – SYPOMark Feb 18 '16 at 10:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.