{% load thumbnail %}

<div class="item-image-container">
  {% if item.images.count > 1 %}
    {% with item.images_sorted_by_name.first as main_image %}
      {% if main_image.wh_ratio < 1.3  %}
        <div class="item-links-portrait">
          {% thumbnail main_image.media "250x250" crop=False as im %}
          <div class="main-image">
            <a href="{% url 'image_detail' item.collection.name main_image.image_guid %}">
              <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
            </a>
          </div>
          {% endthumbnail %}
          <div class="secondary-images-container secondary-images-portrait">
            {% for secondary_image in item.images.all %}
              {% if secondary_image != main_image and forloop.counter <= 4 %}
                {% thumbnail secondary_image.media "100x100" crop=False as im %}
                  <div class="secondary-image-portrait">
                    <a href="{% url 'image_detail' item.collection.name secondary_image.image_guid %}">
                      <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
                    </a>
                  </div>
                {% endthumbnail %}
              {% endif %}
            {% endfor %}
          </div>
        </div>
        {% else %}
        <div class="item-links-landscape">
          {% thumbnail main_image.media "250x250" crop=False as im %}
          <div class="main-image">
            <a href="{% url 'image_detail' item.collection.name main_image.image_guid %}">
              <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
            </a>
          </div>
          {% endthumbnail %}
          <div class="secondary-images-container secondary-images-landscape">
            {% for secondary_image in item.images.all %}
              {% if secondary_image != main_image and forloop.counter <= 3 %}
                {% thumbnail secondary_image.media "100x100" crop=False as im %}
                  <div class="secondary-image-landscape pull-left">
                    <a href="{% url 'image_detail' item.collection.name secondary_image.image_guid %}">
                      <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
                    </a>
                  </div>
                {% endthumbnail %}
              {% endif %}
            {% endfor %}
          </div>
        </div>
  	  {% endif %}
    {% endwith %}
  {% else %}
    {% with item.images.first as main_image %}
      <div class="main-image">
        {% thumbnail main_image.media "250x250" crop=False as im %}
          <a href="{% url 'image_detail' item.collection.name main_image.image_guid %}">
            <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
          </a>
        {% endthumbnail %}
      </div>
    {% endwith %}
  {% endif %}
</div>