Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-17T15:54:46.823Z
Answers.Text: 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?
Answers.UserDisplayName: ADigitalMark
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-17T16:08:58.933Z
Answers.Text: Sorry, you're right. I was going to add a line of code, and forgot. Fixed it now. :)
Answers.UserDisplayName: André Elvan
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-17T16:40:55.190Z
Answers.Text: 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)
Answers.UserDisplayName: ADigitalMark
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-18T09:20:31.053Z
Answers.Text: 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. :)
Answers.UserDisplayName: André Elvan
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-18T10:04:40.040Z
Answers.Text: 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.
Answers.UserDisplayName: ADigitalMark
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-17T15:28:49.090Z
Answers.LastActivityDate: 2016-02-17T16:07:45.703Z
Answers.LastEditDate: 2016-02-17T16:07:45.703Z
Answers.UserDisplayName: André Elvan
Body: <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>
  
Tags: <matrix><field><output>
Title: Use Matrix field to output specific html
ThreadText: # 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:
  
  ```
  <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](https://craftcms.stackexchange.com/questions/9207/output-matrix-field-data), 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" %}
  <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.
  
  > **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.  
  
  ---
  
  