Answers.Body: <p>There is no reason why your code should work, because any variable declared outside of your include file in the <code>with {...}</code> block will be immediately overwritten by your variable definition (<code>#set</code>) in the beginning of your included file.</p>
  
  <p>What you need to do in your <code>include</code> is to check, if the variable was passed in from the outside, and if not, set it to a default value.</p>
  
  <p>So I guess the best way could be this in your <code>includes/social.twig</code> file:</p>
  
  <pre><code>{% set padding, size, color, hover = padding ?? '2', size ?? '4', color ?? 'pink', hover ?? 'black' %}
  
  &lt;ul&gt;
    &lt;li class="px-{{ padding }} text-{{ size }}"&gt;
      &lt;a class="text-{{ color }} hover:text-{{ hover }}" href="{{ contactDetails.link }}"&gt;
        &lt;i class="fab fa-link"&gt;&lt;/i&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The <code>??</code> used here is called the null-coalescing operator. It will check if the variable before the <code>??</code> is defined (which it is if provided from the outside) and in case it's not not, fall back to the value after it. Have a look here, if you do not know it: <a href="https://straightupcraft.com/events/twigs-null-coalescing-operator" rel="nofollow noreferrer">https://straightupcraft.com/events/twigs-null-coalescing-operator</a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-04-11T11:49:58.903Z
Answers.LastActivityDate: 2020-04-11T11:49:58.903Z
Answers.UserDisplayName: Matthias Redl-Mann
Body: <p>I am trying to create a reusable component with a set a default variables that can be overridden when included in a template:</p>
  
  <p>includes/social.twig</p>
  
  <pre><code>{% set padding, size, color, hover = '2', '4', 'pink', 'black' %}
  
  &lt;ul&gt;
    &lt;li class="px-{{ padding }} text-{{ size }}"&gt;
      &lt;a class="text-{{ color }} hover:text-{{ hover }}" href="{{ contactDetails.link }}"&gt;
        &lt;i class="fab fa-link"&gt;&lt;/i&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>page.twig</p>
  
  <pre><code>{% include '_includes/social-links.twig' with {
    padding: '10',
    size: '2',
    color: 'blue',
  } %}
  </code></pre>
  
  <p>When using this, variables that haven't been set in the include statement would remain as defined in the include file, and those that have would override the variables set in the include file. This doesn't happen - nothing gets overridden.</p>
  
  <p>I <em>can</em> achieve a working version of this using:</p>
  
  <p>includes/social.twig</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="px-{{ padding }} text-{{ size }}"&gt;
      &lt;a class="text-{{ color }} hover:text-{{ hover }}" href="{{ contactDetails.link }}"&gt;
        &lt;i class="fab fa-link"&gt;&lt;/i&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>page.twig</p>
  
  <pre><code>{% set padding, size, color, hover = '2', '2', 'blue', 'black' %}
  {{ include('_includes/social-links.twig') }}
  </code></pre>
  
  <p>This involves not setting the vars in the include file, but setting them in the page template - this approach seems more error prone and less maintainable than the version I am trying to achieve.</p>
  
Tags: <include>
Title: Passing data to includes - overrides & defaults
ThreadText: # Passing data to includes - overrides & defaults
  
  (Asked by: username_0 on 2020-04-11)
  
  I am trying to create a reusable component with a set a default variables that can be overridden when included in a template:
  
  includes/social.twig
  
  ```
  {% set padding, size, color, hover = '2', '4', 'pink', 'black' %}
  
  <ul>
    <li class="px-{{ padding }} text-{{ size }}">
      <a class="text-{{ color }} hover:text-{{ hover }}" href="{{ contactDetails.link }}">
        <i class="fab fa-link"></i>
      </a>
    </li>
  </ul>
  
  ```
  
  page.twig
  
  ```
  {% include '_includes/social-links.twig' with {
    padding: '10',
    size: '2',
    color: 'blue',
  } %}
  
  ```
  
  When using this, variables that haven't been set in the include statement would remain as defined in the include file, and those that have would override the variables set in the include file. This doesn't happen - nothing gets overridden.
  
  I *can* achieve a working version of this using:
  
  includes/social.twig
  
  ```
  <ul>
    <li class="px-{{ padding }} text-{{ size }}">
      <a class="text-{{ color }} hover:text-{{ hover }}" href="{{ contactDetails.link }}">
        <i class="fab fa-link"></i>
      </a>
    </li>
  </ul>
  
  ```
  
  page.twig
  
  ```
  {% set padding, size, color, hover = '2', '2', 'blue', 'black' %}
  {{ include('_includes/social-links.twig') }}
  
  ```
  
  This involves not setting the vars in the include file, but setting them in the page template - this approach seems more error prone and less maintainable than the version I am trying to achieve.
  
  **Tags:** include
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2020-04-11. Score: 3 | Accepted answer
  
  There is no reason why your code should work, because any variable declared outside of your include file in the `with {...}` block will be immediately overwritten by your variable definition (`#set`) in the beginning of your included file.
  
  What you need to do in your `include` is to check, if the variable was passed in from the outside, and if not, set it to a default value.
  
  So I guess the best way could be this in your `includes/social.twig` file:
  
  ```
  {% set padding, size, color, hover = padding ?? '2', size ?? '4', color ?? 'pink', hover ?? 'black' %}
  
  <ul>
    <li class="px-{{ padding }} text-{{ size }}">
      <a class="text-{{ color }} hover:text-{{ hover }}" href="{{ contactDetails.link }}">
        <i class="fab fa-link"></i>
      </a>
    </li>
  </ul>
  
  ```
  
  The `??` used here is called the null-coalescing operator. It will check if the variable before the `??` is defined (which it is if provided from the outside) and in case it's not not, fall back to the value after it. Have a look here, if you do not know it: <https://straightupcraft.com/events/twigs-null-coalescing-operator>
  
  
  ---
  
  