<!-- Image Element -->
<QuixTemplate id="image-template">
  <QuixHtml>
    {% set id = field("id") %}
{% set class = field('class') %}

{% set src = field('image') %}
{% set alt_text = field('alt_text') %}
{% set link = field('link') %}
{% set customClass = field('class') %}

{% set classes = classNames('qx-element qx-element-image-v2', customClass) %}
{% set animation = "" %}

{% if field('animation') != 'none' %}

    {% if field('animation')is not empty %}
        {% set animation = "cls:" ~ field('animation') ~ ";" %}
    {% endif %}

    {# repeat #}
    {% if field('animation_repeat') %}
        {% set animation = animation ~ "repeat:ture;" %}
    {% endif %}

    {# delay #}
    {% if field('animation_delay').value %}
        {% set animation = animation ~ "delay:" ~ field('animation_delay').value %}
    {% endif %}
{% endif %}

<div id="{{ id }}" class="{{ classes }}" qx-scrollspy="{{ animation }}">

  {% if src.media %}
    {% if src.media.type == "svg" %}
      {{ src.media.svg }}
    {% else %}
      {{ image( startsWith(src.media.image, "data:image") ? src.media.image : FILE_MANAGER_ROOT_URL ~ src.media.image, alt_text) | link(link) }}
    {% endif %}  
  {% elseif src.url %}
    {{ image(src.url, alt_text) | link(link) }}
  {% endif %}

</div>  </QuixHtml>
  <QuixStyle>
    <!-- Global Style -->
    var style = Object.assign({}, Assets),
          id = "#{{ field("id") }}",
          css = "";
// margin
style.margin(id, {{ field("margin") | json_encode() }})

// padding 
style.padding(id, {{ field("padding") | json_encode() }})

// Z-Index
style.css(id, 'z-index', {{ field("zindex") | json_encode() }})

// background 
style.background (id, {{ field("background") | json_encode() }})

// border + box shadow 
style.border (id, {{ field("border") | json_encode() }})

// custom css 
style.raw ("{{ field("custom_css").code }}")
    <!-- Element Style -->
    {% include 'global.twig' %}

var id = "#{{ field("id") }}",
    img = id + " img",
    src = {{ field("image") | json_encode() }} 

// Width > img
style.width( img, {{ field('width') | json_encode() }}, '%' ); 

// Opacity > img
style.css( img, 'opacity', {{ field('opacity').value | json_encode() }} ); 

// Border width > img 
style.borderWidth( img, {{ field('img_border_width') | json_encode() }} );

// Border style > img 
style.css( img, 'border-style', {{ field('img_border_type') | json_encode() }} );

// Border color > img 
style.css( img, 'border-color', {{ field('img_border_color') | json_encode() }} );

// Border radius > img 
style.borderRadius( img, {{ field('img_border_radius') | json_encode() }} );

// Alignment
style.alignment(id, {{ field('alignment') | json_encode() }});

// svg
if( src.media ) {
  if( src.media.type == "svg" ) {
    style.css( id + " path", "fill", src.media.properties.color )
    style.css( id + " svg", 'width', src.media.properties.size.value +  src.media.properties.size.unit)
    style.css( id + " svg", 'height', src.media.properties.size.value +  src.media.properties.size.unit)
  }
}

style.load(id)  </QuixStyle>
</QuixTemplate>