loop create empy lines

[LuckyTurtleDev]

A loop can create a large count of empty lines, if it is empty. used template:

    <div class="topbar"> 
        {% for pack in packs %}
        {% set index=loop.index %}
            {% for sticker in pack.stickers %}
                {% if loop.first %}
                    <a href="#pack{{ index  }}">
                        <img src="{{ get_env(name="HOMESERVER", default="https://matrix.org/") }}/_matrix/media/r0/thumbnail/{{ sticker.url | replace(from="mxc://", to="") }}?height=128&width=128&method=scale" alt="{{ sticker.body }}">
                    </a>
                {% endif %}
            {% endfor %}
        {% endfor %}
        <hr>
    </div>

output:

<div class="topbar"> 

                    <a href="[#pack1](view-source:http://127.0.0.1:8000/?user=lukas&theme=dark#pack1)">
                        <img src="[https:&#x2F;&#x2F;synapse.matrix.example.com/_matrix/media/r0/thumbnail/matrix.org&#x2F;HQYMEOMMORcvTDcYwFfXlTPl?height=128&width=128&method=scale](view-source:https://synapse.matrix.example.com/_matrix/media/r0/thumbnail/matrix.org/HQYMEOMMORcvTDcYwFfXlTPl?height=128&width=128&method=scale)" alt="☁">
                    </a>

                    <a href="[#pack2](view-source:http://127.0.0.1:8000/?user=lukas&theme=dark#pack2)">
                        <img src="[https:&#x2F;&#x2F;synapse.matrix.example.com/_matrix/media/r0/thumbnail/example.com&#x2F;czQovayFHSbsTPoDKphaCnaf?height=128&width=128&method=scale](view-source:https://synapse.matrix.example.com/_matrix/media/r0/thumbnail/example.com/czQovayFHSbsTPoDKphaCnaf?height=128&width=128&method=scale)" alt="👀">
                    </a>

                    <a href="[#pack3](view-source:http://127.0.0.1:8000/?user=lukas&theme=dark#pack3)">
                        <img src="[https:&#x2F;&#x2F;synapse.matrix.example.com/_matrix/media/r0/thumbnail/example.com&#x2F;WjpiAgJESEXUSmeOPRJsLskc?height=128&width=128&method=scale](view-source:https://synapse.matrix.example.com/_matrix/media/r0/thumbnail/example.com/WjpiAgJESEXUSmeOPRJsLskc?height=128&width=128&method=scale)" alt="🥰">
                    </a>

                    <a href="[#pack4](view-source:http://127.0.0.1:8000/?user=lukas&theme=dark#pack4)">
                        <img src="[https:&#x2F;&#x2F;synapse.matrix.example.com/_matrix/media/r0/thumbnail/example.com&#x2F;FiGCTdcPYTdFmdpjHjDZSwcP?height=128&width=128&method=scale](view-source:https://synapse.matrix.example.com/_matrix/media/r0/thumbnail/example.com/FiGCTdcPYTdFmdpjHjDZSwcP?height=128&width=128&method=scale)" alt="👋">
                    </a>

                    <a href="[#pack5](view-source:http://127.0.0.1:8000/?user=lukas&theme=dark#pack5)">
                        <img src="[https:&#x2F;&#x2F;synapse.matrix.example.com/_matrix/media/r0/thumbnail/example.com&#x2F;jREDFQKWndThOEGlsABQRzLf?height=128&width=128&method=scale](view-source:https://synapse.matrix.example.com/_matrix/media/r0/thumbnail/example.com/jREDFQKWndThOEGlsABQRzLf?height=128&width=128&method=scale)" alt="👍">
                    </a>

                    <a href="[#pack6](view-source:http://127.0.0.1:8000/?user=lukas&theme=dark#pack6)">
                        <img src="[https:&#x2F;&#x2F;synapse.matrix.example.com/_matrix/media/r0/thumbnail/matrix.org&#x2F;nYdepybhqRdLLPBSYSEsFbUf?height=128&width=128&method=scale](view-source:https://synapse.matrix.example.com/_matrix/media/r0/thumbnail/matrix.org/nYdepybhqRdLLPBSYSEsFbUf?height=128&width=128&method=scale)" alt="😂">
                    </a>

                    <a href="[#pack7](view-source:http://127.0.0.1:8000/?user=lukas&theme=dark#pack7)">
                        <img src="[https:&#x2F;&#x2F;synapse.matrix.example.com/_matrix/media/r0/thumbnail/maunium.net&#x2F;pxbCqPJNvcFIZlAyKCyXsqfJ?height=128&width=128&method=scale](view-source:https://synapse.matrix.example.com/_matrix/media/r0/thumbnail/maunium.net/pxbCqPJNvcFIZlAyKCyXsqfJ?height=128&width=128&method=scale)" alt="🎓">
                    </a>

                    <a href="[#pack8](view-source:http://127.0.0.1:8000/?user=lukas&theme=dark#pack8)">
                        <img src="[https:&#x2F;&#x2F;synapse.matrix.example.com/_matrix/media/r0/thumbnail/example.com&#x2F;tkEfuwbVvSWVJBLBbzvtBsTx?height=128&width=128&method=scale](view-source:https://synapse.matrix.example.com/_matrix/media/r0/thumbnail/example.com/tkEfuwbVvSWVJBLBbzvtBsTx?height=128&width=128&method=scale)" alt="😦">
                    </a>

        <hr>
    </div>

This does look wrong.

[Keats]

Every statement will create newlines by default. You can use whitespace control to remove them.

[LuckyTurtleDev]

Thanks, I have completely forgotten this.