apostrophe/views/slideshow.html

Apostrophe is a user-friendly content management system. You'll need more than this core module. See apostrophenow.org to get started.

{% set size = 'full' %}
{% if options.size %}
  {% set size = options.size %}
{% endif %}

{% block items %}
  <ul data-slideshow-items class="apos-slideshow-items">
    {% for file in item._items %}
      {% if ((loop.index0 < options.limit) or (not options.limit)) %}
        {# Make the first image initially current #}
        <li data-slideshow-item class="apos-slideshow-item {% if loop.first %}apos-current apos-first {% endif %}{% if loop.last %}apos-last {% endif %}" style="background-image:url({{ aposFilePath(file, { size: size, crop: item.crop }) }});">
          <img class="apos-slideshow-image" alt="{{file.title | e}}" data-image src="{{ aposFilePath(file, { size: size, crop: item.crop }) }}" />
          {% if (item.showDescriptions and file.description and (not options.userOptions.disableDescriptions)) or file.hyperlink or (item.showTitles and file.title and (not options.userOptions.disableTitles)) %}
            <div class="apos-slideshow-description-container{% if not file.hyperlink %} no-link {% endif %}">
              {% if item.showTitles and file.title and (not options.userOptions.disableTitles) %}<h1 class="apos-slideshow-title">{{ file.title | e }}</h1>{% endif %}
              {% if item.showDescriptions and file.description and (not options.userOptions.disableDescriptions) %}
                <div class="apos-slideshow-description">
                  <p>
                    {# Don't render HTML tags, do respect line breaks #}
                    {{ file.description | e | nlbr }}
                  </p>
                </div>
              {% endif %}
              {% if file.hyperlink %}
                <a href="{{ file.hyperlink }}" class="apos-button apos-slideshow-clickthru" {% if file.hyperlinkTarget %}target="_blank"{% endif %}>
                  {% if file.hyperlinkTitle %}
                    {{ file.hyperlinkTitle | e }}
                  {% else %}
                    View Details
                  {% endif %}
                </a>
              {% endif %}
            </div>
          {% endif %}
          {% if item.showCredits and file.credit and (not options.userOptions.disableCredits) %}
            <div class="apos-slideshow-credit">
              {{ file.credit | e }}
            </div>
          {% endif %}
        </li>
      {% endif %}
    {% endfor %}
  </ul>
{% endblock %}

{% block arrows %}
  {% if item._items.length > 1 %}
    <a href="#" data-next class="apos-slideshow-button apos-slideshow-next">{{ __('Next') }}</a>
    <a href="#" data-previous class="apos-slideshow-button apos-slideshow-prev">{{ __('Previous') }}</a>
  {% endif %}
{% endblock %}