<p>I am not sure if the code does what you want it to do - but nevertheless you have three {% endif %} but only two {% if %}. Assuming the line</p>
<pre><code>dynamicEl: [{% endif %}{%- if not loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; },{% endif %}
</code></pre>
<p>has one surplus endif tag just at the beginning of the array which prematurely ends the if clause, your code correctly would be:</p>
<pre><code>{% js %}  
   {% if image %}  
       {%- if loop.first -%}
           window.addEventListener('DOMContentLoaded', function() {
               (function($) {
       $('.slider-pop').on('click', function() {
                $(this).lightGallery({
                    dynamic: true,
                    download: false,
                    zoom: false,
                    hash: false,
                    dynamicEl: [
                       {%- if not loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; },{% endif %}
                           {%- if loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; }]
                })  
            });
            })(jQuery);
            });
        {% endif %}
    {% endif %}
{% endjs %}
</code></pre>

CC BY-SA 4.0
2021-02-09T16:59:28.377Z
2021-02-09T16:59:28.377Z
MisterMike
<p>I'm trying to output matrix content to create a javascript for my gallery. When I wrap the output with the <code>{% js %}</code>tag each line has an extra semicolon at the end like this:</p>
<pre><code>{ &quot;src&quot;: &quot;/assets/uploads/_wsHigh/cp_slideshow_lg_img1.jpg&quot;, &quot;width&quot;:&quot;1440&quot;, &quot;height&quot;:&quot;810&quot; },;
{ &quot;src&quot;: &quot;/assets/uploads/_wsHigh/cp_slideshow_lg_img2.jpg&quot;, &quot;width&quot;:&quot;1440&quot;, &quot;height&quot;:&quot;810&quot; },; 
</code></pre>
<p>If I output as text its not there. How would I get rid of it?</p>
<pre><code> {% js %}
     
{% if image %}  
{%- if loop.first -%}
window.addEventListener('DOMContentLoaded', function() {
    (function($) {
$('.slider-pop').on('click', function() {
         $(this).lightGallery({
             dynamic: true,
             download: false,
             zoom: false,
             hash: false,
             dynamicEl: [{% endif %}{%- if not loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; },{% endif %}
             {%- if loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; }]
         })  
     });
     })(jQuery);
     });
 {% endif %}{% endif %}{% endjs %}
</code></pre>

<templating>
JS tag is adding semicolons to my content
# JS tag is adding semicolons to my content

(Asked by: username_0 on 2021-02-08)

I'm trying to output matrix content to create a javascript for my gallery. When I wrap the output with the {% js %}tag each line has an extra semicolon at the end like this:
{ "src": "/assets/uploads/_wsHigh/cp_slideshow_lg_img1.jpg", "width":"1440", "height":"810" },;
{ "src": "/assets/uploads/_wsHigh/cp_slideshow_lg_img2.jpg", "width":"1440", "height":"810" },; 

If I output as text its not there. How would I get rid of it?
 {% js %}
     
{% if image %}  
{%- if loop.first -%}
window.addEventListener('DOMContentLoaded', function() {
    (function($) {
$('.slider-pop').on('click', function() {
         $(this).lightGallery({
             dynamic: true,
             download: false,
             zoom: false,
             hash: false,
             dynamicEl: [{% endif %}{%- if not loop.last -%}{ "src": "{{ image.getUrl('wsHigh') }}", "width":"{{ img.getWidth('wsHigh') }}", "height":"{{ img.getHeight('wsHigh') }}" },{% endif %}
             {%- if loop.last -%}{ "src": "{{ image.getUrl('wsHigh') }}", "width":"{{ img.getWidth('wsHigh') }}", "height":"{{ img.getHeight('wsHigh') }}" }]
         })  
     });
     })(jQuery);
     });
 {% endif %}{% endif %}{% endjs %}

**Tags:** templating

---

## 1 answers

### Answer by username_1 on 2021-02-09. Score: 1

I am not sure if the code does what you want it to do - but nevertheless you have three {% endif %} but only two {% if %}. Assuming the line
dynamicEl: [{% endif %}{%- if not loop.last -%}{ "src": "{{ image.getUrl('wsHigh') }}", "width":"{{ img.getWidth('wsHigh') }}", "height":"{{ img.getHeight('wsHigh') }}" },{% endif %}

has one surplus endif tag just at the beginning of the array which prematurely ends the if clause, your code correctly would be:
{% js %}  
   {% if image %}  
       {%- if loop.first -%}
           window.addEventListener('DOMContentLoaded', function() {
               (function($) {
       $('.slider-pop').on('click', function() {
                $(this).lightGallery({
                    dynamic: true,
                    download: false,
                    zoom: false,
                    hash: false,
                    dynamicEl: [
                       {%- if not loop.last -%}{ "src": "{{ image.getUrl('wsHigh') }}", "width":"{{ img.getWidth('wsHigh') }}", "height":"{{ img.getHeight('wsHigh') }}" },{% endif %}
                           {%- if loop.last -%}{ "src": "{{ image.getUrl('wsHigh') }}", "width":"{{ img.getWidth('wsHigh') }}", "height":"{{ img.getHeight('wsHigh') }}" }]
                })  
            });
            })(jQuery);
            });
        {% endif %}
    {% endif %}
{% endjs %}


---

