1

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

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.

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

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

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.