Answers.Body: <p><a href="https://craftcms.com/docs/matrix-fields" rel="nofollow noreferrer">Matrix fields</a> are definitely the way to go for repeatable content.  Matrix lets the user mix and match different kinds "block types". You might set up an image block, a text block, pull quote block, etc. </p>
  
  <p>To help answer your question, the basic premise for Matrix is you loop through the different blocks and depending on which block it is, you spit out different code to make that block type.</p>
  
  <p>I've robbed this from the <a href="https://craftcms.com/docs/matrix-fields" rel="nofollow noreferrer">Craft docs on Matrix</a> and added some comments:</p>
  
  <p>This loops through a Matrix field called <code>myMatrixField</code>:</p>
  
  <pre><code>{% for block in entry.myMatrixField %}
  </code></pre>
  
  <p>You can check which type of <code>block</code> is is with <code>.type</code>:</p>
  
  <pre><code>{% if block.type == "heading" %}
  
      &lt;h3&gt;{{ block.heading }}&lt;/h3&gt;
  </code></pre>
  
  <p>Check for a block called <code>text</code>:</p>
  
  <pre><code>{% elseif block.type == "text" %}
  
      {{ block.text|markdown }}
  </code></pre>
  
  <p>Check for a block called <code>image</code>:</p>
  
  <pre><code>{% elseif block.type == "image" %}
  </code></pre>
  
  <p><a href="https://craftcms.com/docs/assets-fields#examples" rel="nofollow noreferrer">Assets/images</a> in Craft are all basically "stored" as groups of images (even if you have only one image) so you need to Craft it which one to get. <code>.first()</code> gets the first image. </p>
  
  <pre><code>    {% set image = block.image.first() %}
      {% if image %}
          &lt;img src="{{ image.getUrl('thumb') }}" width="{{ image.getWidth('thumb') }}" height="{{ image.getHeight('thumb') }}" alt="{{ image.title }}"&gt;
      {% endif %}
  </code></pre>
  
  <p>Check for a block called <code>quote</code>:</p>
  
  <pre><code>{% elseif block.type == "quote" %}
  
      &lt;blockquote&gt;
          &lt;p&gt;{{ block.quote }}&lt;/p&gt;
          &lt;cite&gt;– {{ block.cite }}&lt;/cite&gt;
      &lt;/blockquote&gt;
  
  {% endif %}
  
  {% endfor %}
  </code></pre>
  
  <p>In addition to the CreateSean's suggestion above to check out Ryan Irelan's Mijingo series, also download and play with the <a href="https://github.com/pixelandtonic/HappyLager" rel="nofollow noreferrer">Happy Lager</a> demo site. </p>
  
  <p>Happy Lager lets you peek behind the scenes and get a really great overview of how to use and template many of Craft's features including <a href="https://craftcms.com/features/relations" rel="nofollow noreferrer">relations</a> and Matrix. It has some great inspiration for how to code up reusable modules that also do alignment and how you could pull it off via Twig and CSS.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-08-20T20:07:58.613Z
Answers.LastActivityDate: 2017-08-20T20:07:58.613Z
Answers.UserDisplayName: RitterKnight
Body: <p>Good evening, I am new to Craft CMS. I have been a MODX builder for a while and decided to make the move to Craft. I have begun building and I am trying to make a simple way for the user to manage tabs. Do excuse the syntax as I am moving it from MODX. First the visual 
  <a href="https://i.sstatic.net/uR9Wn.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/uR9Wn.png" alt="What I would like to make super easy for the content people"></a></p>
  
  <p>Again the code will be in MODX but I will try to get the main points</p>
  
  <pre><code> &lt;section class="corporate-standards no-padding-bottom wow fadeIn"&gt;
   &lt;div class="container"&gt;
   &lt;div class="row"&gt;
   &lt;!-- section title --&gt;
   &lt;div class="col-md-12 text-center"&gt;
   &lt;h3 class="section-title no-padding-bottom"&gt;Our Services&lt;/h3&gt;
   &lt;/div&gt;
   &lt;!-- end section title --&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="container-fluid margin-five no-margin-bottom no-padding"&gt;
   &lt;div class="row no-margin"&gt;
   &lt;!-- tab --&gt;
   &lt;div class="col-md-12 col-sm-12 center-col text-center no-padding" id="animated-tab"&gt;
    &lt;!-- tab navigation --&gt;
   &lt;ul class="nav nav-tabs margin-five no-margin-top xs-margin-bottom-seven"&gt;
                          &lt;li class="nav active"&gt;&lt;a href="#tab6_sec1" data-toggle="tab" class="xs-min-height-inherit xs-no-padding"&gt;&lt;span&gt;&lt;i class="icon-[[*service_icon1]]"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;br&gt;&lt;span class="text-small text-uppercase letter-spacing-3 margin-five font-weight-600 xs-letter-spacing-none xs-display-none"&gt;[[*main_service1]]&lt;/span&gt;&lt;/li&gt;
                          &lt;li class="nav"&gt;&lt;a href="#tab6_sec2" data-toggle="tab" class="xs-min-height-inherit xs-no-padding"&gt;&lt;span&gt;&lt;i class="icon-[[*service_icon2]]"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;br&gt;&lt;span class="text-small text-uppercase letter-spacing-3 margin-five font-weight-600 xs-letter-spacing-none xs-display-none"&gt;[[*main_service2]]&lt;/span&gt;&lt;/li&gt;
                          &lt;li class="nav"&gt;&lt;a href="#tab6_sec3" data-toggle="tab" class="xs-min-height-inherit xs-no-padding"&gt;&lt;span&gt;&lt;i class="icon-[[*service_icon3]]"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;br&gt;&lt;span class="text-small text-uppercase letter-spacing-3 margin-five font-weight-600 xs-letter-spacing-none xs-display-none"&gt;[[*main_service3]]&lt;/span&gt;&lt;/li&gt;
                          &lt;li class="nav"&gt;&lt;a href="#tab6_sec4" data-toggle="tab" class="xs-min-height-inherit xs-no-padding"&gt;&lt;span&gt;&lt;i class="icon-[[*service_icon4]]"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;br&gt;&lt;span class="text-small text-uppercase letter-spacing-3 margin-five font-weight-600 xs-letter-spacing-none xs-display-none"&gt;[[*main_service4]]&lt;/span&gt;&lt;/li&gt;
                      &lt;/ul&gt;
  </code></pre>
  
  <p>And Here is the repeatable code</p>
  
  <pre><code>&lt;div id="[[+additionalField]]" class="text-center center-col tab-pane fade in [[+additionalField5]]"&gt; 
                              &lt;div class="tab-pane fade in"&gt; 
                                  &lt;div class="col-lg-6 col-md-6 no-padding corporate-standards-img cover-background position-relative" style="background-image:url('[[ImagePlus? &amp;value=`[[+image]]`]]');" alt="[[+additionalField6]]"&gt;
                                      &lt;div class="opacity-medium bg-dark-gray"&gt;&lt;/div&gt;
                                      &lt;p class="title-small text-uppercase corporate-standards-title white-text letter-spacing-7"&gt;&lt;span class="title-extra-large no-letter-spacing yellow-text"&gt;[[+additionalField1]]&lt;/span&gt;&lt;br&gt;[[+additionalField2]]&lt;/p&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-lg-6 col-md-6 corporate-standards-text sm-margin-lr-four sm-margin-top-four xs-padding-tb-ten"&gt;
                                      &lt;div class="img-border-small-fix border-gray"&gt;&lt;/div&gt;
                                      &lt;i class="icon-[[+additionalField4]] large-icon yellow-text"&gt;&lt;/i&gt;
                                      &lt;h2 class="margin-ten no-margin-bottom"&gt;[[+title]]&lt;/h2&gt;
                                      &lt;p class="text-med margin-ten width-80 center-col xs-width-100"&gt;[[+description]]&lt;/p&gt;
                                      &lt;a class="text-small highlight-link text-uppercase bg-black white-text" href="[[~[[+link]]]]"&gt;[[+additionalField3]] &lt;i class="fa fa-long-arrow-right extra-small-icon white-text"&gt;&lt;/i&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>
  
  <p>Any help or a point in the right direction would be appreciated. I have been using MIGx and Imageplus for so long I am kind of at a loss. </p>
  
  <p>PS..Besides my lack of finding ways to do repeatable content. Craft is my new go to. </p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-08-18T07:37:18.883Z
Comments.Text: Have you already looked at Matrix fields? https://craftcms.com/docs/matrix-fields
Comments.UserDisplayName: mrsmn
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-08-18T16:03:10.903Z
Comments.Text: I started to last night. It seems to function a lot like migx. Are there any good video tutorials on it?
Comments.UserDisplayName: Eric Leisenring
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-08-19T13:41:05.483Z
Comments.Text: Eric, I highly recommend the Mijingo videos. Well worth the cost and how I got started with Craft. https://mijingo.com/products/screencasts/up-and-running-with-craft
Comments.UserDisplayName: CreateSean
Tags: <frontend>
Title: First Craft CMS build need help with tabs with images
ThreadText: # First Craft CMS build need help with tabs with images
  
  (Asked by: username_0 on 2017-08-17)
  
  Good evening, I am new to Craft CMS. I have been a MODX builder for a while and decided to make the move to Craft. I have begun building and I am trying to make a simple way for the user to manage tabs. Do excuse the syntax as I am moving it from MODX. First the visual
  [![What I would like to make super easy for the content people](https://i.sstatic.net/uR9Wn.png)](https://i.sstatic.net/uR9Wn.png)
  
  Again the code will be in MODX but I will try to get the main points
  
  ```
   <section class="corporate-standards no-padding-bottom wow fadeIn">
   <div class="container">
   <div class="row">
   <!-- section title -->
   <div class="col-md-12 text-center">
   <h3 class="section-title no-padding-bottom">Our Services</h3>
   </div>
   <!-- end section title -->
   </div>
   </div>
   <div class="container-fluid margin-five no-margin-bottom no-padding">
   <div class="row no-margin">
   <!-- tab -->
   <div class="col-md-12 col-sm-12 center-col text-center no-padding" id="animated-tab">
    <!-- tab navigation -->
   <ul class="nav nav-tabs margin-five no-margin-top xs-margin-bottom-seven">
                          <li class="nav active"><a href="#tab6_sec1" data-toggle="tab" class="xs-min-height-inherit xs-no-padding"><span><i class="icon-[[*service_icon1]]"></i></span></a><br><span class="text-small text-uppercase letter-spacing-3 margin-five font-weight-600 xs-letter-spacing-none xs-display-none">[[*main_service1]]</span></li>
                          <li class="nav"><a href="#tab6_sec2" data-toggle="tab" class="xs-min-height-inherit xs-no-padding"><span><i class="icon-[[*service_icon2]]"></i></span></a><br><span class="text-small text-uppercase letter-spacing-3 margin-five font-weight-600 xs-letter-spacing-none xs-display-none">[[*main_service2]]</span></li>
                          <li class="nav"><a href="#tab6_sec3" data-toggle="tab" class="xs-min-height-inherit xs-no-padding"><span><i class="icon-[[*service_icon3]]"></i></span></a><br><span class="text-small text-uppercase letter-spacing-3 margin-five font-weight-600 xs-letter-spacing-none xs-display-none">[[*main_service3]]</span></li>
                          <li class="nav"><a href="#tab6_sec4" data-toggle="tab" class="xs-min-height-inherit xs-no-padding"><span><i class="icon-[[*service_icon4]]"></i></span></a><br><span class="text-small text-uppercase letter-spacing-3 margin-five font-weight-600 xs-letter-spacing-none xs-display-none">[[*main_service4]]</span></li>
                      </ul>
  
  ```
  
  And Here is the repeatable code
  
  ```
  <div id="[[+additionalField]]" class="text-center center-col tab-pane fade in [[+additionalField5]]"> 
                              <div class="tab-pane fade in"> 
                                  <div class="col-lg-6 col-md-6 no-padding corporate-standards-img cover-background position-relative" style="background-image:url('[[ImagePlus? &value=`[[+image]]`]]');" alt="[[+additionalField6]]">
                                      <div class="opacity-medium bg-dark-gray"></div>
                                      <p class="title-small text-uppercase corporate-standards-title white-text letter-spacing-7"><span class="title-extra-large no-letter-spacing yellow-text">[[+additionalField1]]</span><br>[[+additionalField2]]</p>
                                  </div>
                                  <div class="col-lg-6 col-md-6 corporate-standards-text sm-margin-lr-four sm-margin-top-four xs-padding-tb-ten">
                                      <div class="img-border-small-fix border-gray"></div>
                                      <i class="icon-[[+additionalField4]] large-icon yellow-text"></i>
                                      <h2 class="margin-ten no-margin-bottom">[[+title]]</h2>
                                      <p class="text-med margin-ten width-80 center-col xs-width-100">[[+description]]</p>
                                      <a class="text-small highlight-link text-uppercase bg-black white-text" href="[[~[[+link]]]]">[[+additionalField3]] <i class="fa fa-long-arrow-right extra-small-icon white-text"></i></a>
                                  </div>
                              </div>
                          </div>
  
  ```
  
  Any help or a point in the right direction would be appreciated. I have been using MIGx and Imageplus for so long I am kind of at a loss.
  
  PS..Besides my lack of finding ways to do repeatable content. Craft is my new go to.
  
  **Tags:** frontend
  
  > **Comments:**
  > **username_1**: Have you already looked at Matrix fields? https://craftcms.com/docs/matrix-fields  
  > **username_0**: I started to last night. It seems to function a lot like migx. Are there any good video tutorials on it?  
  > **username_2**: username_0, I highly recommend the Mijingo videos. Well worth the cost and how I got started with Craft. https://mijingo.com/products/screencasts/up-and-running-with-craft  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_3 on 2017-08-20. Score: 1
  
  [Matrix fields](https://craftcms.com/docs/matrix-fields) are definitely the way to go for repeatable content. Matrix lets the user mix and match different kinds "block types". You might set up an image block, a text block, pull quote block, etc.
  
  To help answer your question, the basic premise for Matrix is you loop through the different blocks and depending on which block it is, you spit out different code to make that block type.
  
  I've robbed this from the [Craft docs on Matrix](https://craftcms.com/docs/matrix-fields) and added some comments:
  
  This loops through a Matrix field called `myMatrixField`:
  
  ```
  {% for block in entry.myMatrixField %}
  
  ```
  
  You can check which type of `block` is is with `.type`:
  
  ```
  {% if block.type == "heading" %}
  
      <h3>{{ block.heading }}</h3>
  
  ```
  
  Check for a block called `text`:
  
  ```
  {% elseif block.type == "text" %}
  
      {{ block.text|markdown }}
  
  ```
  
  Check for a block called `image`:
  
  ```
  {% elseif block.type == "image" %}
  
  ```
  
  [Assets/images](https://craftcms.com/docs/assets-fields#examples) in Craft are all basically "stored" as groups of images (even if you have only one image) so you need to Craft it which one to get. `.first()` gets the first image.
  
  ```
      {% set image = block.image.first() %}
      {% if image %}
          <img src="{{ image.getUrl('thumb') }}" width="{{ image.getWidth('thumb') }}" height="{{ image.getHeight('thumb') }}" alt="{{ image.title }}">
      {% endif %}
  
  ```
  
  Check for a block called `quote`:
  
  ```
  {% elseif block.type == "quote" %}
  
      <blockquote>
          <p>{{ block.quote }}</p>
          <cite>– {{ block.cite }}</cite>
      </blockquote>
  
  {% endif %}
  
  {% endfor %}
  
  ```
  
  In addition to the username_2's suggestion above to check out Ryan Irelan's Mijingo series, also download and play with the [Happy Lager](https://github.com/pixelandtonic/HappyLager) demo site.
  
  Happy Lager lets you peek behind the scenes and get a really great overview of how to use and template many of Craft's features including [relations](https://craftcms.com/features/relations) and Matrix. It has some great inspiration for how to code up reusable modules that also do alignment and how you could pull it off via Twig and CSS.
  
  
  ---
  
  