{% set classes = 'img' -%}
{% if params['align'] -%}
  {% set classes = classes + ' align-' + params['align'] -%}
{% endif -%}
{% if params['align'] -%}
  {% set has_frame = True -%}
{% elif not params['frame'] or params['valign'] -%}
  {% set has_frame = False -%}
{% else -%}
  {% set has_frame = True -%}
{% endif -%}

{% macro render_image(lazy=False) -%}
  <img class="wiki-image{% if not has_frame %} frameless{% endif %}{% if lazy %} lazy{% endif %}"
    {% if lazy %}src="{{ webpack_static('sumo/img/placeholder.gif') }}"
    data-original-{% endif %}src="{{ image.file.url }}"
    alt="{% if 'alt' in params %}{{ params['alt'] }}{% else %}{{ params['caption'] }}{% endif %}"
    {% if 'alt' in params and params['alt'] != params['caption'] %}
      title="{{ params['caption'] }}"
    {% endif %}
    {% if params['width'] and params['width']|int(None) %}
      width="{{ params['width']|int('') }}"
    {% endif %}
    {% if params['height'] and params['height']|int(None) %}
      height="{{ params['height']|int('') }}"
    {% endif %}
    {% if params['valign'] %}
      style="vertical-align:{{ params['valign'] }}"
    {% endif %}
    />
{%- endmacro -%}

{% if has_frame -%}
  <div class="{{ classes }}">
    <div class="img-inner">
{% endif -%}

{% if params['link'] -%}
  <a href="{{ params['link'] }}"{% if params['page'] and not params['found'] %} class="new"{% endif %}>
{% endif -%}
{{ render_image(lazy=lazy_enabled) }}
{%- if params['link'] -%}
  </a>
{% endif -%}

{% if has_frame -%}
  {% if params['caption'] -%}
    <div class="caption"
      {% if params['width'] -%}
        style="width:{{ params['width']|int('') }}px"
      {% endif -%}
    >{{ params['caption'] }}</div>
  {% endif -%}
  </div>
  </div>{# /classes #}
{% endif -%}