Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-08-24T08:24:01.467Z
Answers.LastActivityDate: 2019-08-24T08:24:01.467Z
Answers.UserDisplayName: katsele
Body: <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>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-08-17T00:03:23.240Z
Comments.Text: What happens if you do `{{ dump(options) }}` in the included file?
Comments.UserDisplayName: Lindsey D
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2019-08-17T07:35:20.470Z
Comments.Text: 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! :)
Comments.UserDisplayName: katsele
Tags: <craft3><variable><include>
Title: Passing variables into twig components
ThreadText: # 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](https://voices.basedesign.com/dry-templating-with-twig-and-craft-cms-543292d114aa). 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...
  
  **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 #}
   <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...
  
  
  ---
  
  