0

Based on this interesting article: DRY templating with Twig and Craft CMS. I found myself trying to update the approach with include instead of macro following reading I had about twig 2 and craftcms 3.

So basically there is my component

_hero-banner.twig

{# Defaults #}

{% set defaults = {
    heroTitle : title is defined ? title : 'Title not set',
    titleColor : color is defined ? color : null,
    heroImage : image is defined ? image : null,
    heroButton : button is defined ? button : null,
    heroClasses : classes is defined ? classes : null
  }
%}

{# Options #}

{% set options = options is defined ? defaults|merge(options) : defaults %}

{# Variables #}

{% set imageMobile = {
    mode: 'crop',
    width: 640,
    height: 500,
    quality: 75,
    position: 'focus-point'
} %}

{# Output #}
 <div class="row c-hero-banner" {% if options.heroImage %} style="background-image:url('{{ options.heroImage.one.getUrl(imageMobile) }}')" {% endif %}>
  <div class="container">
    <div class="col-xs-12 col-lg-6">
      {# Display the entries #}
            <h1 {% if options.titleColor %} class="t-text-white" {% endif %}>{{ options.heroTitle }}</h1>
            {% if options.heroButton %}
              <button type="button" class="o-button o-button--primary"> {{ options.heroButton }} </button>
            {% endif %}
    </div>
  </div>
</div>

And there is my include

index.twig

{% set heroBannerOptions = {
    title : homepage.mainTitle,
    image : homepage.heroBanner,
    color: true
  }
%}

{% include 'components/_hero-banner.twig' with { options : heroBannerOptions } %}

Somehow I cannot pass the variables into the component and I cannot figure out why...

  • What happens if you do {{ dump(options) }} in the included file? – Lindsey D Aug 17 at 0:03
  • 1
    Obviously I wasn't calling the proper variables. options.heroTitle was null but options.title calls the proper info! Still need to figure out how to use that properly! :) – katsele Aug 17 at 7:35
1

I forgot to post the solution:

_hero-banner.twig


{% set defaults = {
    heroTitle : options.title is defined ? options.title : 'Title not set',
    titleColor : options.color is defined ? options.color : false,
    heroImage : options.image is defined ? options.image : null,
    heroClasses : options.classes is defined ? options.classes : null,
    heroButton : options.button is defined ? options.button: null
  }
%}

{# Options #}

{% set options = options is defined ? defaults|merge(options) : defaults %}

{# Variables #}

{% set imageMobile = {
    mode: 'crop',
    width: 640,
    height: 500,
    quality: 75,
    position: 'focus-point'
} %}

{# Output #}
 <div class="row c-hero-banner" {% if defaults.heroImage %} style="background-image:url('{{ defaults.heroImage.one.getUrl(imageMobile) }}')" {% endif %}>
  <div class="container">
    <div class="col-xs-12 col-lg-6">
      {# Display the entries #}
            <h1 {% if defaults.titleColor %} class="t-text-white" {% endif %}>{{ defaults.heroTitle }}</h1>
            {% if defaults.heroButton %}
              {% include "components/_buttons.twig" with options %}
            {% endif %}
    </div>
  </div>
</div>

I wasn't calling my variables properly...

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.