<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>

CC BY-SA 3.0
2017-08-20T20:07:58.613Z
2017-08-20T20:07:58.613Z
RitterKnight
<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>

CC BY-SA 3.0
2017-08-18T07:37:18.883Z
Have you already looked at Matrix fields? https://craftcms.com/docs/matrix-fields
mrsmn
CC BY-SA 3.0
2017-08-18T16:03:10.903Z
I started to last night. It seems to function a lot like migx. Are there any good video tutorials on it?
Eric Leisenring
CC BY-SA 3.0
2017-08-19T13:41:05.483Z
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
CreateSean
<frontend>
First Craft CMS build need help with tabs with images
# 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 

Again the code will be in MODX but I will try to get the main points
 
 
 
 
 
 Our Services
 
 
 
 
 
 
 
 
  
 
                        [[*main_service1]]
                        [[*main_service2]]
                        [[*main_service3]]
                        [[*main_service4]]
                    

And Here is the repeatable code
 
                             
                                
                                    
                                    [[+additionalField1]][[+additionalField2]]
                                
                                
                                    
                                    
                                    [[+title]]
                                    [[+description]]
                                    [[+additionalField3]] 
                                
                            
                        

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**: 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  

---

## 1 answers

### Answer by username_3 on 2017-08-20. Score: 1

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

    {{ block.heading }}

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 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 %}
        
    {% endif %}

Check for a block called quote:
{% elseif block.type == "quote" %}

    
        {{ block.quote }}
        – {{ block.cite }}
    

{% endif %}

{% endfor %}

In addition to the CreateSean's suggestion above to check out Ryan Irelan's Mijingo series, also download and play with the Happy Lager 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 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.


---

