[BUG] [Formatter] attribute formatting for nested {% image tags %}

[christopherpickering]

From Petr Dlouhý in #195
I have similar problem with Django templates:

-                <img
-                    {% if value.image.file.url|split:"."|last|lower == "gif" %}
-                        src="{{value.image.file.url}}"
-                    {% else %}
-                        {% image value.image fill-640x360   as block_image_640 %}
-                        {% image value.image fill-768x432   as block_image_768 %}
-                        {% image value.image fill-1024x576  as block_image_1024 %}
-                        {% image value.image fill-1600x900  as block_image_1600 %}
-                        data-src="{{ block_image_640.url }}"
-                        data-srcset="
-                            {{ block_image_640.url }} 640w,
-                            {{ block_image_768.url }} 768w,
-                            {{ block_image_1024.url }} 1024w,
-                            {{ block_image_1600.url }} 1600w
-                        "
-                        sizes="(min-width: 1200px) 458px, (min-width: 992px) 374px, (min-width: 768px) 720px, calc(100vw - 30px)"
-                    {% endif %}
-                    class="richtext-image imageblock overflow {{ value.image_position }} lazy"
-                    title="{{ value.image.title }}"
-                    alt="Block image"
-                />
+                <img {% if value.image.file.url|split:"."|last|lower == "gif" %} src="{{ value.image.file.url }}" {% else %} {% image value.image fill-640x360   as block_image_640 %} {% image value.image fill-768x432   as block_image_768 %} {% image value.image fill-1024x576  as block_image_1024 %} {% image value.image fill-1600x900  as block_image_1600 %} data-src="{{ block_image_640.url }}" data-srcset=" {{ block_image_640.url }} 640w, {{ block_image_768.url }} 768w, {{ block_image_1024.url }} 1024w, {{ block_image_1600.url }} 1600w " sizes="(min-width: 1200px) 458px, (min-width: 992px) 374px, (min-width: 768px) 720px, calc(100vw - 30px)" {% endif %}
+                     class="richtext-image imageblock overflow {{ value.image_position }} lazy"
+                     title="{{ value.image.title }}"
+                     alt="Block image"/>

I am not sure why it does that, while on most other places it splits the long lines rather nicely.

source html

<img
    {% if value.image.file.url|split:"."|last|lower == "gif" %}
        src="{{value.image.file.url}}"
    {% else %}
        {% image value.image fill-640x360   as block_image_640 %}
        {% image value.image fill-768x432   as block_image_768 %}
        {% image value.image fill-1024x576  as block_image_1024 %}
        {% image value.image fill-1600x900  as block_image_1600 %}
        data-src="{{ block_image_640.url }}"
        data-srcset="
            {{ block_image_640.url }} 640w,
            {{ block_image_768.url }} 768w,
            {{ block_image_1024.url }} 1024w,
            {{ block_image_1600.url }} 1600w
        "
        sizes="(min-width: 1200px) 458px, (min-width: 992px) 374px, (min-width: 768px) 720px, calc(100vw - 30px)"
    {% endif %}
    class="richtext-image imageblock overflow {{ value.image_position }} lazy"
    title="{{ value.image.title }}"
    alt="Block image"
/>

[christopherpickering]

Changes to make the formatting work:

• added image as a valid template tag
• added indentation to srcset, data-srcset, and sizes

(I removed the if statement for now and will handle that in #443 )

The output will be

<img {% image value.image fill-640x360   as block_image_640 %}
     {% image value.image fill-768x432   as block_image_768 %}
     {% image value.image fill-1024x576  as block_image_1024 %}
     {% image value.image fill-1600x900  as block_image_1600 %}
     data-src="{{ block_image_640.url }}"
     data-srcset="{{ block_image_640.url }} 640w,
                  {{ block_image_768.url }} 768w,
                  {{ block_image_1024.url }} 1024w,
                  {{ block_image_1600.url }} 1600w"
     sizes="(min-width: 1200px) 458px,
            (min-width: 992px) 374px,
            (min-width: 768px) 720px,
            calc(100vw - 30px)"
     class="richtext-image imageblock overflow {{ value.image_position }} lazy"
     title="{{ value.image.title }}"
     alt="Block image"/>

[christopherpickering]

🎉 This issue has been resolved in version 1.19.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀