apostrophe/views/slideshow.html

Apostrophe is a user-friendly content management system. This core module of Apostrophe provides rich content editing and essential facilities to integrate Apostrophe into your Express project. Apostrophe also includes simple facilities for storing your r

{% 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 %}