<p>Edit: I changed it to your variables, not sure if I set the array brackets 100% correct but the idea should work.</p>

<p>You could set the defaults in the macro as you already did, 
then in your template call the macro and pass the options e.g. :</p>

<pre><code>{% set image = block.slide.first() %}
{# macro #}
  {% set imgParam = [
    thumb: { quality: 60, },
    tSM: { mode: 'crop', width: 1536 },
%}

{% macro isotopeItem(imgParam) %}
</code></pre>

<p>and merge the passed options in the macro with your macros defaults e.g.:</p>

<pre><code> {% set defaults = [
    thumb: { mode: 'fit', width: 100, quality: 60, },
    tSM: { mode: 'fit', width: 1536, quality: 80, },
    tMD: { mode: 'fit', width: 340, quality: 80, },
    tXL: { mode: 'fit', width: 1536, quality: 80, }
  ]
%}

{% set imgParam = imgParam ? defaults|merge(imgParam) : defaults %}
</code></pre>

<p>so you will only need to pass explicit changes.</p>

CC BY-SA 3.0
2017-04-02T16:46:22.223Z
2017-04-03T11:42:57.673Z
2017-04-03T11:42:57.673Z
HendrikEng
<p>I have a very basic macro for a lazyloading responsive image tag:</p>

<pre><code>{% macro isotopeItem(imgParam) %}

  {% set thumb = { mode: 'fit', width: 100, quality: 60, } %}
  {% set tSM = { mode: 'fit', width: 1536, quality: 80, } %}
  {% set tMD = { mode: 'fit', width: 340, quality: 80, } %}
  {% set tXL = { mode: 'fit', width: 1536, quality: 80, } %}

    &lt;img
    src="data:image/gif;base64,{# yadayada #}"
    data-sizes="auto"
    data-src="{{ imgParam.url(thumb) }}"
    alt="{{ imgParam.title }}"
    data-srcset="
      {{ imgParam.url(tSM) }} {{ imgParam.getWidth(tSM) }}w,
      {{ imgParam.url(tMD) }} {{ imgParam.getWidth(tMD) }}w,
      {{ imgParam.url(tXL) }} {{ imgParam.getWidth(tXL) }}w"
    class="lazyload" /&gt;

{% endmacro %}
</code></pre>

<p>As you can see the image transformations are inside the macro which is not very nice.</p>

<p>How do I write the transformations outside the macro and then pass it into it? I tried tried to write one param for each transformation:</p>

<pre><code>{% set thumb = { mode: 'fit', width: 100, quality: 60, } %}
{% set tSM = { mode: 'fit', width: 1536, quality: 80, } %}
{% set tMD = { mode: 'fit', width: 340, quality: 80, } %}
{% set tXL = { mode: 'fit', width: 1536, quality: 80, } %}

{% macro isotopeItem(imgParam, transformParam1, transformParam2 {# and so on #}) %}
   {# responive image srcset code like the above example #}
{% endmacro %}

{# I then would have to call the macro like this: #}

{{ _self.isotopeItem(asset, thumb, tSM, tMD, tXL) }}
</code></pre>

<p>This works but I have to pass all the transforms everytime I use the macro.</p>

<p>There must be a better way right?</p>

<image-transforms><macro>
Pass image transformations into macro
# Pass image transformations into macro

(Asked by: username_0 on 2017-04-02)

I have a very basic macro for a lazyloading responsive image tag:
{% macro isotopeItem(imgParam) %}

  {% set thumb = { mode: 'fit', width: 100, quality: 60, } %}
  {% set tSM = { mode: 'fit', width: 1536, quality: 80, } %}
  {% set tMD = { mode: 'fit', width: 340, quality: 80, } %}
  {% set tXL = { mode: 'fit', width: 1536, quality: 80, } %}

    

{% endmacro %}

As you can see the image transformations are inside the macro which is not very nice.
How do I write the transformations outside the macro and then pass it into it? I tried tried to write one param for each transformation:
{% set thumb = { mode: 'fit', width: 100, quality: 60, } %}
{% set tSM = { mode: 'fit', width: 1536, quality: 80, } %}
{% set tMD = { mode: 'fit', width: 340, quality: 80, } %}
{% set tXL = { mode: 'fit', width: 1536, quality: 80, } %}

{% macro isotopeItem(imgParam, transformParam1, transformParam2 {# and so on #}) %}
   {# responive image srcset code like the above example #}
{% endmacro %}

{# I then would have to call the macro like this: #}

{{ _self.isotopeItem(asset, thumb, tSM, tMD, tXL) }}

This works but I have to pass all the transforms everytime I use the macro.
There must be a better way right?

**Tags:** image-transforms, macro


---

## 1 answers

### Answer by username_1 on 2017-04-02. Score: 3 | Accepted answer

Edit: I changed it to your variables, not sure if I set the array brackets 100% correct but the idea should work.
You could set the defaults in the macro as you already did, 
then in your template call the macro and pass the options e.g. :
{% set image = block.slide.first() %}
{# macro #}
  {% set imgParam = [
    thumb: { quality: 60, },
    tSM: { mode: 'crop', width: 1536 },
%}

{% macro isotopeItem(imgParam) %}

and merge the passed options in the macro with your macros defaults e.g.:
 {% set defaults = [
    thumb: { mode: 'fit', width: 100, quality: 60, },
    tSM: { mode: 'fit', width: 1536, quality: 80, },
    tMD: { mode: 'fit', width: 340, quality: 80, },
    tXL: { mode: 'fit', width: 1536, quality: 80, }
  ]
%}

{% set imgParam = imgParam ? defaults|merge(imgParam) : defaults %}

so you will only need to pass explicit changes.


---

