<p>I forgot to post the solution: </p>

<p><strong>_hero-banner.twig</strong></p>

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

<p>I wasn't calling my variables properly... </p>

CC BY-SA 4.0
2019-08-24T08:24:01.467Z
2019-08-24T08:24:01.467Z
katsele
<p>Based on this interesting article: <a href="https://voices.basedesign.com/dry-templating-with-twig-and-craft-cms-543292d114aa" rel="nofollow noreferrer">DRY templating with Twig and Craft CMS</a>. I found myself trying to update the approach with <code>include</code> instead of <code>macro</code> following reading I had about twig 2 and craftcms 3.</p>

<p>So basically there is my component</p>

<p><strong>_hero-banner.twig</strong></p>

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

<p>And there is my include</p>

<p><strong>index.twig</strong></p>

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

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

<p>Somehow I cannot pass the variables into the component and I cannot figure out why... </p>

CC BY-SA 4.0
2019-08-17T00:03:23.240Z
What happens if you do `{{ dump(options) }}` in the included file?
Lindsey D
CC BY-SA 4.0
2019-08-17T07:35:20.470Z
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
<craft3><variable><include>
Passing variables into twig components
# Passing variables into twig components

(Asked by: username_0 on 2019-08-16)

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 #}
 
  
    
      {# Display the entries #}
            {{ options.heroTitle }}
            {% if options.heroButton %}
               {{ options.heroButton }} 
            {% endif %}
    
  


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

**Tags:** craft3, variable, include
> **Comments:**
> **username_1**: What happens if you do `{{ dump(options) }}` in the included file?  
> **username_0**: 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! :)  

---

## 1 answers

### Answer by username_0 on 2019-08-24. Score: 1 | Accepted answer

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 #}
 
  
    
      {# Display the entries #}
            {{ defaults.heroTitle }}
            {% if defaults.heroButton %}
              {% include "components/_buttons.twig" with options %}
            {% endif %}
    
  


I wasn't calling my variables properly...


---

