# HG changeset patch
# User durandn
# Date 1476277613 -7200
# Node ID b7e752e2e6694462c84ba88f685ca70095c97df5
# Parent  6b304e2c6af4dc6922ac78f55ee0b5d2cc43d0f1
Image miniatures when multiples image on an item #39

diff -r 6b304e2c6af4 -r b7e752e2e669 src/iconolab/templates/iconolab/collection_home.html
--- 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>