Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-02T16:46:22.223Z
Answers.LastActivityDate: 2017-04-03T11:42:57.673Z
Answers.LastEditDate: 2017-04-03T11:42:57.673Z
Answers.UserDisplayName: HendrikEng
Body: <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>
  
Tags: <image-transforms><macro>
Title: Pass image transformations into macro
ThreadText: # 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, } %}
  
      <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" />
  
  {% 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.
  
  
  ---
  
  