--- a/src/iconolab/templates/iconolab/collection_home.html Wed Oct 12 13:30:13 2016 +0200
+++ b/src/iconolab/templates/iconolab/collection_home.html Wed Oct 12 15:06:53 2016 +0200
@@ -180,23 +180,75 @@
<div class="row">
<div id="list-items" class="collection-home-block col-md-12 text-center {% if active_list == 'items' %}selected{% endif %}">
<ul class="image-list-wrapper list-inline">
+
{% for item in items_list %}
- <li class="image-list-li small-image-wrapper panel panel-default">
- <div class="image-container text-center image-list-image-container">
- {% with item.images.first as image %}
- {% thumbnail image.media "350x300" crop=False as im %}
- <div class="object-infos">
- <a class="btn btn-default btn-xs collection-home-item-btn" href="{% url 'item_detail' collection_name item.item_guid %}"><i class="fa fa-eye"></i> Détail de l'objet</a>
- </div>
- <div>
- <a href="{% url 'item_detail' collection_name item.item_guid %}">
- <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
- </a>
- </div>
- {% endthumbnail %}
- {% endwith %}
- </li>
- {% endfor %}
+ <li class="image-list-li small-image-wrapper panel panel-default">
+ <div class="object-infos text-center" style="margin-top: 10px;">
+ <a class="btn btn-default btn-xs collection-home-item-btn" href="{% url 'item_detail' collection_name item.item_guid %}"><i class="fa fa-eye"></i> Détail de l'objet</a>
+ </div>
+ {% if item.images.count > 1 %}
+ {% with item.images.first as main_image %}
+ {% if main_image.height > main_image.width %}
+ <div class="item-links text-center" style="display:inline-block; margin: 10px 0px;">
+ {% thumbnail main_image.media "175x300" crop=False as im %}
+ <div class="main-image" style="display:inline-block">
+ <a href="{% url 'item_detail' collection_name item.item_guid %}?show={{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" style="display:inline-block">
+ {% for secondary_image in item.images.all %}
+ {% if secondary_image != main_image and forloop.counter <= 4 %}
+ {% thumbnail secondary_image.media "165x90" crop=False as im %}
+ <div class="secondary-image">
+ <a href="{% url 'item_detail' collection_name item.item_guid %}?show={{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 text-center" style="display:inline-block; margin: 10px 0px;">
+ {% thumbnail main_image.media "350x150" crop=False as im %}
+ <div>
+ <a href="{% url 'item_detail' collection_name item.item_guid %}?show={{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 pull-left" style="display:inline-block; margin-top:5px;">
+ {% for secondary_image in item.images.all %}
+ {% if secondary_image != main_image and forloop.counter <= 4 %}
+ {% thumbnail secondary_image.media "110x140" crop=False as im %}
+ <div class="secondary-image">
+ <a href="{% url 'item_detail' collection_name item.item_guid %}?show={{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="item-links text-center" style="display:inline-block; margin: 10px 0px;">
+ {% thumbnail main_image.media "350x300" crop=False as im %}
+ <a href="{% url 'item_detail' collection_name item.item_guid %}?show={{main_image.image_guid}}">
+ <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
+ </a>
+ {% endthumbnail %}
+ </div>
+ {% endwith %}
+ {% endif %}
+ </li>
+ {% endfor %}
</ul>
<ul class="pagination pull-right items-perpage" style="margin-left: 15px;">
<li class="active pagination-label"><a>Objets par page : </a></li>