<p>In your code <code>block.type</code> is the matrix block type, ie <code>homeSlider</code>. </p>

<p>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:</p>

<pre><code>{% includeJsFile "/js/jquery.jcarousel.min.js" %}
{% includeJsFile "/js/jcarousel.responsive.js" %}
&lt;div class="jcarousel-wrapper"&gt;
&lt;div class="jcarousel"&gt;
&lt;ul&gt;
  {% for block in entry.homepageSlider %}
  &lt;li&gt;
    {% set image = block.mainImage.first() %}
    &lt;img src="{{ image.getUrl }}" alt="{{ image.title }}"&gt;

    {% if block.whiteLogo %}
      &lt;div class="white-logo"&gt;&lt;/div&gt;
    {% endif %}

    &lt;div class="jcarousel-text"&gt;&lt;p&gt;{{ block.imageText }}&lt;/p&gt;&lt;/div&gt;
  &lt;/li&gt;
  {% endfor %}
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>So, inside you're for loop, the fields you've created are accessible by <code>block.fieldHandle</code>. 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 <code>{% if block.lightswitchField %}</code> if it's a lightswitch, <code>{% if block.assetField | length %}</code> if it's an assets field, or <code>{% if block.textField != '' %}</code> if it's a text field.</p>

<p>Hope that helps you in the right direction.</p>

CC BY-SA 3.0
2016-02-17T15:54:46.823Z
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?
ADigitalMark
CC BY-SA 3.0
2016-02-17T16:08:58.933Z
Sorry, you're right. I was going to add a line of code, and forgot. Fixed it now. :)
André Elvan
CC BY-SA 3.0
2016-02-17T16:40:55.190Z
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](https://craftcms.com/docs/matrix-fields)
ADigitalMark
CC BY-SA 3.0
2016-02-18T09:20:31.053Z
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
CC BY-SA 3.0
2016-02-18T10:04:40.040Z
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.
ADigitalMark
CC BY-SA 3.0
2016-02-17T15:28:49.090Z
2016-02-17T16:07:45.703Z
2016-02-17T16:07:45.703Z
André Elvan
<p>I am quite new to this so, please be patient. I am wanting to output the following html:</p>

<pre><code>&lt;script type="text/javascript" src="js/jquery.jcarousel.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jcarousel.responsive.js"&gt;&lt;/script&gt;
&lt;div class="jcarousel-wrapper"&gt;
    &lt;div class="jcarousel"&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;img src="images/home-slider-1.jpg" alt="home slider image"&gt;
                &lt;div class="white-logo"&gt;&lt;/div&gt;
                &lt;div class="jcarousel-text"&gt;
                    &lt;p&gt;Helping you to establish your outdoor brand in the world of retail and e-commerce&lt;/p&gt;
                &lt;/div&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;img src="images/home-slider-2.jpg" alt="home slider image"&gt;
                &lt;div class="white-logo"&gt;&lt;/div&gt;
                &lt;div class="jcarousel-text"&gt;
                    &lt;p&gt;One of our top brands&lt;/p&gt;
                &lt;/div&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;img src="images/home-slider-3.jpg" alt="home slider image"&gt;
                &lt;div class="white-logo"&gt;&lt;/div&gt;
                &lt;div class="jcarousel-text"&gt;
                    &lt;p&gt;We also have a design service&lt;/p&gt;
                &lt;/div&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;img src="images/home-slider-4.jpg" alt="home slider image"&gt;
                &lt;div class="white-logo"&gt;&lt;/div&gt;
                &lt;div class="jcarousel-text"&gt;
                    &lt;p&gt;Visit us at our new site&lt;/p&gt;
                &lt;/div&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;a href="#" class="jcarousel-control-prev"&gt;&lt;img src="images/nivo-nav-buttons.png"&gt;&lt;/a&gt;
    &lt;a href="#" class="jcarousel-control-next"&gt;&lt;img src="images/nivo-nav-buttons.png"&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>I have a Matrix field set up as follows:</p>

<p>Field handle: <strong>homepageSlider</strong><br>
Block type handle: <strong>homeSlider</strong><br>
Field name handles: <strong>mainImage</strong>, <strong>whiteLogo</strong>, <strong>imageText</strong> and <strong>mainImage</strong>.</p>

<p><strong>mainImage</strong> has a field type of 'Assets'<br>
<strong>whiteLogo</strong> has a field type of 'Lightswitch'<br>
<strong>imageText</strong> has a field type of 'Plain Text'<br>
<strong>mainImageLink</strong> has a field type of 'Linkit' (from a plugin).</p>

<p>So far, I have written:</p>

<pre><code>{% block content %}

{% includeJsFile "/js/jquery.jcarousel.min.js" %}
{% includeJsFile "/js/jcarousel.responsive.js" %}
&lt;div class="jcarousel-wrapper"&gt;
&lt;div class="jcarousel"&gt;
&lt;ul&gt;

{% for block in entry.homepageSlider %}
&lt;li&gt;

{% if block.type == "mainImage" %}
{% set image = block.mainImage %}
&lt;img src="{{ image.getUrl }}" alt="{{ image.title }}"&gt;
{% endif %}

{% if block.type == "whiteLogo" %}
&lt;div class="white-logo"&gt;
{% set imagetwo = block.mainImage %}
&lt;img src="{{ imagetwo.getUrl }}" alt="{{ imagetwo.title }}"&gt;
&lt;/div&gt;
{% endif %}

{% if block.type == "imageText" %}
&lt;div class="jcarousel-text"&gt;&lt;p&gt;{{ block.imageText }}&lt;/p&gt;&lt;/div&gt;
{% endif %}

{% if block.type == "mainImageLink" %}
{% set yourLink = entry.mainImageLink %}
{{ yourLink.link|raw }}
{% endif %}

&lt;/li&gt;

{% endfor %}
&lt;/ul&gt;
&lt;/div&gt;
&lt;a href="#" class="jcarousel-control-prev"&gt;&lt;img src="images/nivo-nav-buttons.png"&gt;&lt;/a&gt;
&lt;a href="#" class="jcarousel-control-next"&gt;&lt;img src="images/nivo-nav-buttons.png"&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>This outputs html as I want, BUT, is empty between <code>&lt;li&gt;</code> and <code>&lt;/li&gt;</code>. I have tried following <a href="https://craftcms.stackexchange.com/questions/9207/output-matrix-field-data">this post</a>, but am so far getting nowhere.</p>

<p>Any help that anyone can offer would be most appreciated.</p>

<p>With kind regards,</p>

<p>Mark</p>

<matrix><field><output>
Use Matrix field to output specific html
# Use Matrix field to output specific html

(Asked by: username_0 on 2016-02-17)

I am quite new to this so, please be patient. I am wanting to output the following html:



    
        
            
                
                
                
                    Helping you to establish your outdoor brand in the world of retail and e-commerce
                
            
            
                
                
                
                    One of our top brands
                
            
            
                
                
                
                    We also have a design service
                
            
            
                
                
                
                    Visit us at our new site
                
            
        
    
    
    


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" %}




{% for block in entry.homepageSlider %}


{% if block.type == "mainImage" %}
{% set image = block.mainImage %}

{% endif %}

{% if block.type == "whiteLogo" %}

{% set imagetwo = block.mainImage %}


{% endif %}

{% if block.type == "imageText" %}
{{ block.imageText }}
{% endif %}

{% if block.type == "mainImageLink" %}
{% set yourLink = entry.mainImageLink %}
{{ yourLink.link|raw }}
{% endif %}



{% endfor %}






This outputs html as I want, BUT, is empty between  and . 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

**Tags:** matrix, field, output


---

## 1 answers

### Answer by username_1 on 2016-02-17. Score: 4 | Accepted answer

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" %}



  {% for block in entry.homepageSlider %}
  
    {% set image = block.mainImage.first() %}
    

    {% if block.whiteLogo %}
      
    {% endif %}

    {{ block.imageText }}
  
  {% endfor %}



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.

> **Comments:**
> **username_0**: 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?  
> **username_1**: Sorry, you're right. I was going to add a line of code, and forgot. Fixed it now. :)  
> **username_0**: 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](https://craftcms.com/docs/matrix-fields)  
> **username_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. :)  
> **username_0**: 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.  

---

