Including and reusing common code per matrix block

Question

In each matrix block, I'm allowing users to set a background image, background color etc with a settings field.

In each matrix block template, I have:

{% block content %}

  {% set backgroundColor = '' %}
  {% set backgroundImage = '' %}

  {% for row in block.settings %}
    {% set backgroundColor %}background-color: {{ row.backgroundColor }};{% endset %}
    {% set backgroundImage %}background-image: url({{ row.backgroundImage.first().url }});{% endset %}
    ... more fields go here...
  {% endfor %}

  <div style="{{ backgroundColor }} {{ backgroundImage }}">
    ... content here ...
  </div>

{% block content %}

Rather than repeating {% for row in block.settings %} in each template, is there a way that I could write it once and reuse it using a single include call?

I could use

{% include "_widgets/_settings" with { 
  backgroundColor: backgroundColor,
  backgroundImage: backgroundImage
} %}

But that doesn't really reduce the amount of code duplication. Ideally I like to use a single of code to make these variables available.

Answer 1

Take 2:

I think you may be looking to use a Twig Macro. Here's the gist of that approach, but I don't fully understand the layout of your template yet, so my answer may be a bit out of context until I do.

You'll need to create your macro higher in your template or in a separate file and import it into the template you are working in. (See the docs linked above on how to import a macro for your situation.)

You could then simplify your block output to something like this. I'm using fairly verbose names for this example but you can shorten the variable names to have less code if you prefer.

{% import "_widgets/_settings.html" as settingsMacro %}
{% set settings = block.settings %}

<div style="{{ settingsMacro.backgroundColor(settings) }} {{ settingsMacro.backgroundImage(settings) }}">
  ... content here ...
</div>

In your macro file, you'll take those settings and process them as you need to:

_widgets/_settings.html

{% macro backgroundColor(settings) %}
  {% set backgroundColor = '' %}

  {% for row in settings %}
    background-color: {{ row.backgroundColor }};
  {% endfor %}
{% endmacro %}

{% macro backgroundImage(settings) %}
  {% set backgroundImage = '' %}

  {% for row in settings %}
    background-image: url({{ row.backgroundImage.first().url }});
  {% endfor %}
{% endmacro %}

I think, due to how many matrix blocks are fairly short templates, the amount of code you may need to avoid reuse still may be a couple lines after you import a macro and call the specific macros. But like the include, this could be another way to help ensure consistency in the code being used in multiple places. Hopefully this gives you a few more ideas to work with to find a satisfying solution. I'd need to have a better understanding of your full template picture to offer a more specific solution on how to implement.

---

Take 1:

If I understand correctly, I believe one way you can do what you are trying to do is by using the include with syntax and making sure you are passing your variables to the include template:

{% include "_widgets/_settings" with { 
  backgroundColor: backgroundColor,
  backgroundImage: backgroundImage
} %}

This assumes that you are defining backgroundColor and backgroundImage before your include, and that the include has the following code:

<div style="{{ backgroundColor }} {{ backgroundImage }}">
 ... content here ...
</div>

---

Also note, adding the underscore to your folder path hides all files within it. So, if you don't want to have to add underscores in front of every file, you still have hidden files if they are within a hidden folder, i.e: _widgets/settings