apostrophe/lib/modules/apostrophe-images-widgets/views/widgetBase.html

The Apostrophe Content Management System.

<div class="apos-slideshow{% if data.options.aspectRatio %} apos-slideshow--aspect-ratio{% endif %}{% block outerClass %}{% endblock %}" data-slideshow>
  <div data-slideshow-items>
    {%- block items -%}
      {%- for entry in data.widget._pieces -%}
        {# Works whether there's a relationship in the join or not. Normally there always #}
        {# is for slideshows, but just in case someone really hates cropping... -Tom #}
        {%- set image = entry.item or entry -%}
        {%- set relationship = entry.relationship -%}
        <div data-slideshow-item
          class="apos-slideshow-item{% if loop.first %} apos-current{% endif %}{% block itemClass %}{% endblock %} apos-slideshow-item--{{ image.attachment.extension }}"
          style="background-image:
            url({{ apos.attachments.url(image.attachment, { size: data.options.size, crop: relationship }) }})
            {%- if apos.attachments.hasFocalPoint(relationship) -%}
              ; background-position: {{ apos.attachments.focalPointToBackgroundPosition(relationship) }}
            {%- endif -%}
            {%- if data.options.aspectRatio and (image.attachment.extension == 'svg') -%}
              ; width: 100%; padding-bottom: {{ 100 * data.options.aspectRatio[1] / data.options.aspectRatio[0] }}%; background-size: contain
            {%- endif -%}
          ">
          {%- block title -%}<h4 class="apos-image-widget-image-title">{{ image.title }}</h4>{%- endblock -%}
          <img alt="{% block imgAlt %}{{ image.title }}{% endblock %}" data-image src="{% block imgSrc %}{{ apos.attachments.url(image.attachment, { size: data.options.size, crop: relationship }) }}{% endblock %}" />
          {%- block credit -%}
            {%- if image.credit -%}
              {%- if image.creditUrl -%}
                <a href="{{ image.creditUrl }}">
              {%- endif -%}
              {{ image.credit }}
              {%- if image.creditUrl -%}
                </a>
              {%- endif -%}
            {%- endif -%}
          {%- endblock -%}
          {%- block description -%}
            {%- if image.description -%}
              <div>{{ image.description | nlbr }}</div>
            {%- endif -%}
          {%- endblock -%}
        </div>
      {%- endfor -%}
    {%- endblock -%}
  </div>
</div>
{% block arrows %}
  {% if data.widget._pieces.length > 1 %}
    <a href="#" data-next class="apos-slideshow-button apos-slideshow-next default-style"><i class="fa fa-angle-right"></i></a>
    <a href="#" data-previous class="apos-slideshow-button apos-slideshow-prev default-style"><i class="fa fa-angle-left"></i></a>
  {% endif %}
{% endblock %}