# HG changeset patch
# User durandn
# Date 1476359503 -7200
# Node ID b67ea0d6c621e0b416829f31ac0ad7865487124e
# Parent  b7e752e2e6694462c84ba88f685ca70095c97df5
search page design and item preview for multiple images #36

diff -r b7e752e2e669 -r b67ea0d6c621 src/iconolab/models.py
--- a/src/iconolab/models.py	Wed Oct 12 15:06:53 2016 +0200
+++ b/src/iconolab/models.py	Thu Oct 13 13:51:43 2016 +0200
@@ -125,6 +125,10 @@
         return str(self.image_guid)+":"+self.name
     
     @property
+    def wh_ratio(self):
+        return self.width / self.height
+    
+    @property
     def collection(self):
         return self.item.collection.name
 
diff -r b7e752e2e669 -r b67ea0d6c621 src/iconolab/search_indexes/forms.py
--- a/src/iconolab/search_indexes/forms.py	Wed Oct 12 15:06:53 2016 +0200
+++ b/src/iconolab/search_indexes/forms.py	Thu Oct 13 13:51:43 2016 +0200
@@ -1,16 +1,18 @@
 from django import forms
 from haystack.forms import SearchForm
-from iconolab.models import Item, Annotation
+from iconolab.models import Item, Annotation, Collection
 
 
 
 
 class IconolabSearchForm(SearchForm):
 
-	model_type = forms.ChoiceField(required=False, choices=(("images","Image"), ("annotations","Annotation")) )
+	model_type = forms.ChoiceField(required=False, choices=(("images","Images"), ("annotations","Annotations")) )
 	
 	def __init__(self, *args, **kwargs):
 		self.collection_name = kwargs.pop("collection_name")
+		if self.collection_name and Collection.objects.filter(name=self.collection_name).exists():
+			self.collection = Collection.objects.get(name=self.collection_name)	
 		selected_model_type =  kwargs.pop("model_type", None)
 
 		if selected_model_type is not None: 
diff -r b7e752e2e669 -r b67ea0d6c621 src/iconolab/templates/iconolab/collection_home.html
--- a/src/iconolab/templates/iconolab/collection_home.html	Wed Oct 12 15:06:53 2016 +0200
+++ b/src/iconolab/templates/iconolab/collection_home.html	Thu Oct 13 13:51:43 2016 +0200
@@ -186,67 +186,7 @@
             <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 %}
+            {% include "partials/item-images-preview.html" with item=item %}
           </li>
         {% endfor %}
       </ul>
diff -r b7e752e2e669 -r b67ea0d6c621 src/iconolab/templates/partials/item-images-preview.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/iconolab/templates/partials/item-images-preview.html	Thu Oct 13 13:51:43 2016 +0200
@@ -0,0 +1,65 @@
+{% load thumbnail %}
+
+<div class="item-image-container">
+  {% if item.images.count > 1 %}
+    {% with item.images.first as main_image %}
+      {% if main_image.wh_ratio < 1.3  %}
+        <div class="item-links-portrait 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' item.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-container secondary-images-portrait" style="display:inline-block; margin: 10px">
+            {% 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-portrait">
+                    <a href="{% url 'item_detail' item.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-landscape text-center">
+          {% thumbnail main_image.media "350x150" crop=False as im %}
+          <div class="main-image" style="display:inline-block">
+            <a href="{% url 'item_detail' item.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-container secondary-images-landscape" style="margin: 10px">
+            {% for secondary_image in item.images.all %}
+              {% if secondary_image != main_image and forloop.counter <= 3 %}
+                {% thumbnail secondary_image.media "140x140" crop=False as im %}
+                  <div class="secondary-image-landscape pull-left" style="display:inline-block">
+                    <a href="{% url 'item_detail' item.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 "350x210" crop=False as im %}
+          <a href="{% url 'item_detail' item.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 %}
+</div>
\ No newline at end of file
diff -r b7e752e2e669 -r b67ea0d6c621 src/iconolab/templates/search/annotation_search.html
--- a/src/iconolab/templates/search/annotation_search.html	Wed Oct 12 15:06:53 2016 +0200
+++ b/src/iconolab/templates/search/annotation_search.html	Thu Oct 13 13:51:43 2016 +0200
@@ -7,106 +7,112 @@
 
     <h2>Recherche</h2>
 
-    <form method="get" action="{% url 'search_indexes:haystack_search' %}">
-        <table>
-            
+    <form method="get" class="form-inline" action="{% if collection_name %}{% url 'search_indexes:collection_haystack_search' collection_name %}{% else %}{% url 'search_indexes:haystack_search' %}{% endif %}">
+      <div class="form-group">
+        <div class="input-group">
+          <div class="input-group-addon">Chercher</div>
+          <input id="id_{{form.q.name}}" type="text" class="form-control" name="{{form.q.name}}" placeholder="...">
+          <div class="input-group-addon">dans les </div>
+          <select class="form-control" id="id_{{form.model_type.name}}" name="{{form.model_type.name}}">
+            {% for val, label in form.fields.model_type.choices %}
+                <option value="{{ val }}"{% if label == 'Annotations' %} selected{% endif %}>{{ label }}</option>
+            {% endfor %}
+          </select>
+          {% if form.collection_name %}
+            <div class="input-group-addon">du fonds {{form.collection.verbose_name}}</div>
+          {% else %}
+            <div class="input-group-addon">du site</div>
+          {% endif %}
+        </div>
+      </div>
+      <input type="submit" class="search-submit btn btn-primary" value="Rechercher" style="margin-left: 10px;">
+    </form>
+    <h3><strong>{{ page_obj.paginator.count }}</strong> annotation(s)</h3>    
+    <ul class="annotation-list-wrapper list-inline">
+      {% if not page_obj.object_list %}
+          <h3 class="text-center"><small>Aucune annotation à afficher</small></p>
+      {% else %}
+        <table class="table table-condensed">
+          <thead>
+            <th></th>
+            <th>Titre</th>
+            <th>Auteur</th>
+            <th>Créée le</th>
+            <th>Révisée le</th>
+            <th>Contributeurs</th>
+            <th>Statistiques</th>
+          </thead>
+          {% for result in page_obj.object_list %}
             <tr>
-                <td> {{ form.as_p }} </td> 
-
-                <td>
-                    <input style="margin:0px" type="submit" value="Rechercher">
-                </td>
+              <td>
+                <div class="fragment-container" style="position: relative">
+                  {% thumbnail result.object.image.media "150x150" crop=False as im %}
+                    <a href="{% url 'annotation_detail' result.object.image.item.collection.name result.object.image.image_guid result.object.annotation_guid %}">
+                      <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
+                      <svg width="{{ im.width }}" height="{{ im.height }}" version="1.1" style="position:absolute; top:0px; left: 0px">
+                        <g transform="matrix({% transform_matrix im_width=im.width im_height=im.height max_x=100 max_y=100 %})">
+                          <path d="{{ result.object.current_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
+                        </g>
+                      </svg>
+                    </a>
+                  {% endthumbnail %}
+                </div>
+              </td>
+              <td>{{ result.object.current_revision.title }}</td>
+              <td><a href="{% url 'user_home' result.object.author.id %}" style="color:#000000">{{ result.object.author }}</a></td>
+              <td>{{ result.object.created|date:'d-m-Y' }}</td>
+              <td>{{ result.object.current_revision.created|date:'d-m-Y' }}</td>
+              <td>
+                {% for contributor in result.object.stats.contributors.all %}
+                    <a href="{% url 'user_home' contributor.id %}" style="color:#000000">{{ contributor.username }}</a>{% if not forloop.last %}, {% endif %}
+                {% endfor %}
+              </td>
+              <td>
+                  {% include "partials/annotation_stats_panel.html" with annotation=result.object %}  
+              </td>
             </tr>
-
+          {% endfor %}
         </table>
-
-      <h3><strong>{{ page_obj.paginator.count }}</strong> annotation(s)</h3>    
-      <ul class="annotation-list-wrapper list-inline">
-        {% if not page_obj.object_list %}
-            <h3 class="text-center"><small>Aucune annotation à afficher</small></p>
-        {% else %}
-          <table class="table table-condensed">
-            <thead>
-              <th></th>
-              <th>Titre</th>
-              <th>Auteur</th>
-              <th>Créée le</th>
-              <th>Révisée le</th>
-              <th>Contributeurs</th>
-              <th>Statistiques</th>
-            </thead>
-            {% for result in page_obj.object_list %}
-              <tr>
-                <td>
-                  <div class="fragment-container" style="position: relative">
-                    {% thumbnail result.object.image.media "150x150" crop=False as im %}
-                      <a href="{% url 'annotation_detail' result.object.image.item.collection.name result.object.image.image_guid result.object.annotation_guid %}">
-                        <img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
-                        <svg width="{{ im.width }}" height="{{ im.height }}" version="1.1" style="position:absolute; top:0px; left: 0px">
-                          <g transform="matrix({% transform_matrix im_width=im.width im_height=im.height max_x=100 max_y=100 %})">
-                            <path d="{{ result.object.current_revision.fragment|clean_path }}" opacity="0.7" fill="orange"></path>
-                          </g>
-                        </svg>
-                      </a>
-                    {% endthumbnail %}
-                  </div>
-                </td>
-                <td>{{ result.object.current_revision.title }}</td>
-                <td><a href="{% url 'user_home' result.object.author.id %}" style="color:#000000">{{ result.object.author }}</a></td>
-                <td>{{ result.object.created|date:'d-m-Y' }}</td>
-                <td>{{ result.object.current_revision.created|date:'d-m-Y' }}</td>
-                <td>
-                  {% for contributor in result.object.stats.contributors.all %}
-                      <a href="{% url 'user_home' contributor.id %}" style="color:#000000">{{ contributor.username }}</a>{% if not forloop.last %}, {% endif %}
-                  {% endfor %}
-                </td>
-                <td>
-                    {% include "partials/annotation_stats_panel.html" with annotation=result.object %}  
-                </td>
-              </tr>
-            {% endfor %}
-          </table>
-        {% endif %}
-      </ul>
-      <ul class="pagination pull-right items-perpage" style="margin-left: 15px;">
-        <li class="active pagination-label"><a>Annotations par page : </a></li>
-        <li class="{% if page_obj.paginator.per_page == 5 %}active{% endif %}">
-        <a href="?q={{ query }}&perpage=5">5</a>               
+      {% endif %}
+    </ul>
+    <ul class="pagination pull-right items-perpage" style="margin-left: 15px;">
+      <li class="active pagination-label"><a>Annotations par page : </a></li>
+      <li class="{% if page_obj.paginator.per_page == 5 %}active{% endif %}">
+      <a href="?q={{ query }}&perpage=5">5</a>               
+      </li>
+      <li class="{% if page_obj.paginator.per_page == 10 %}active{% endif %}">
+      <a href="?q={{ query }}&perpage=10">10</a>               
+      </li>
+      <li class="{% if page_obj.paginator.per_page == 25 %}active{% endif %}">
+      <a href="?q={{ query }}&perpage=25">25</a>               
+      </li>
+      <li class="{% if page_obj.paginator.per_page == 100 %}active{% endif %}">
+      <a href="?q={{ query }}&perpage=100">100</a>               
+      </li>
+    </ul>
+    {% if page_obj.has_previous or page_obj.has_next %}
+    <ul class="pagination pull-right items-pagination">
+      {% if page_obj.has_previous %}
+      <li>
+        <a href="?page={{page_obj.previous_page_number}}&perpage={{page_obj.paginator.per_page}}" aria-label="Précédent">
+          <span aria-hidden="true">&laquo;</span>
+        </a>
+      </li>
+      {% endif %}
+      
+      {% for page in page_obj.paginator.page_range %}
+        <li id="page-link-{{page}}" class="pagination-link {% if page == page_obj.number %}active{% endif %}">
+          <a {% if page != page_obj.number %}href="?q={{query}}&page={{page}}&perpage={{page_obj.paginator.per_page}}"{% endif %}>{{page}}</a>
         </li>
-        <li class="{% if page_obj.paginator.per_page == 10 %}active{% endif %}">
-        <a href="?q={{ query }}&perpage=10">10</a>               
-        </li>
-        <li class="{% if page_obj.paginator.per_page == 25 %}active{% endif %}">
-        <a href="?q={{ query }}&perpage=25">25</a>               
-        </li>
-        <li class="{% if page_obj.paginator.per_page == 100 %}active{% endif %}">
-        <a href="?q={{ query }}&perpage=100">100</a>               
-        </li>
-      </ul>
-      {% if page_obj.has_previous or page_obj.has_next %}
-      <ul class="pagination pull-right items-pagination">
-        {% if page_obj.has_previous %}
-        <li>
-          <a href="?page={{page_obj.previous_page_number}}&perpage={{page_obj.paginator.per_page}}" aria-label="Précédent">
-            <span aria-hidden="true">&laquo;</span>
-          </a>
-        </li>
-        {% endif %}
-        
-        {% for page in page_obj.paginator.page_range %}
-          <li id="page-link-{{page}}" class="pagination-link {% if page == page_obj.number %}active{% endif %}">
-            <a {% if page != page_obj.number %}href="?q={{query}}&page={{page}}&perpage={{page_obj.paginator.per_page}}"{% endif %}>{{page}}</a>
-          </li>
-        {% endfor %}
-        
-        {% if page_obj.has_next %}
-        <li>
-           <a href="?page={{page_obj.next_page_number}}&perpage={{page_obj.paginator.per_page}}" aria-label="Précédent">
-            <span aria-hidden="true">&raquo;</span>
-           </a>
-        </li>
-        {% endif %}
-      </ul>
+      {% endfor %}
+      
+      {% if page_obj.has_next %}
+      <li>
+         <a href="?page={{page_obj.next_page_number}}&perpage={{page_obj.paginator.per_page}}" aria-label="Précédent">
+          <span aria-hidden="true">&raquo;</span>
+         </a>
+      </li>
       {% endif %}
-    </form>
+    </ul>
+    {% endif %}
 {% endblock %}
\ No newline at end of file
diff -r b7e752e2e669 -r b67ea0d6c621 src/iconolab/templates/search/default_search.html
--- a/src/iconolab/templates/search/default_search.html	Wed Oct 12 15:06:53 2016 +0200
+++ b/src/iconolab/templates/search/default_search.html	Thu Oct 13 13:51:43 2016 +0200
@@ -7,16 +7,24 @@
 
     <h2>Recherche</h2>
 
-    <form method="get" action="{% url 'search_indexes:haystack_search' %}">
-        <table>
-        
-            <tr>
-                <td> {{ form.as_p }} </td> 
-                <td>
-                    <input style="margin:0px" type="submit" value="Rechercher">
-                </td>
-            </tr>
-        </table>
-
-    </form>
+    <form method="get" class="form-inline" action="{% url 'search_indexes:haystack_search' %}">
+    <div class="form-group">
+      <div class="input-group">
+        <div class="input-group-addon">Chercher</div>
+        <input id="id_{{form.q.name}}" type="text" class="form-control" name="{{form.q.name}}" placeholder="...">
+        <div class="input-group-addon">dans les </div>
+        <select class="form-control" id="id_{{form.model_type.name}}" name="{{form.model_type.name}}">
+          {% for val, label in form.fields.model_type.choices %}
+              <option value="{{ val }}"{% if label == 'Images' %} selected{% endif %}>{{ label }}</option>
+          {% endfor %}
+        </select>
+        {% if form.collection_name %}
+          <div class="input-group-addon">du fonds {{form.collection.verbose_name}}</div>
+        {% else %}
+          <div class="input-group-addon">du site</div>
+        {% endif %}
+      </div>
+    </div>
+    <input type="submit" class="search-submit btn btn-primary" value="Rechercher" style="margin-left: 10px;">
+  </form>>
 {% endblock %}
\ No newline at end of file
diff -r b7e752e2e669 -r b67ea0d6c621 src/iconolab/templates/search/image_search.html
--- a/src/iconolab/templates/search/image_search.html	Wed Oct 12 15:06:53 2016 +0200
+++ b/src/iconolab/templates/search/image_search.html	Thu Oct 13 13:51:43 2016 +0200
@@ -5,93 +5,40 @@
 
 {% block content %}
 
-    <h2>Recherche</h2>
+  <h2>Recherche</h2>
 
-    <form method="get" action="{% url 'search_indexes:haystack_search' %}">
-        <table>
-            
-            <tr>
-                <td> {{ form.as_p }} </td> 
-
-                <td>
-                    <input style="margin:0px" type="submit" value="Rechercher">
-                </td>
-            </tr>
-        </table>
-    </form>
+  <form method="get" class="form-inline" action="{% if collection_name %}{% url 'search_indexes:collection_haystack_search' collection_name %}{% else %}{% url 'search_indexes:haystack_search' %}{% endif %}">
+    <div class="form-group">
+      <div class="input-group">
+        <div class="input-group-addon">Chercher</div>
+        <input id="id_{{form.q.name}}" type="text" class="form-control" name="{{form.q.name}}" placeholder="...">
+        <div class="input-group-addon">dans les </div>
+        <select class="form-control" id="id_{{form.model_type.name}}" name="{{form.model_type.name}}">
+          {% for val, label in form.fields.model_type.choices %}
+              <option value="{{ val }}"{% if label == 'Images' %} selected{% endif %}>{{ label }}</option>
+          {% endfor %}
+        </select>
+        {% if form.collection_name %}
+          <div class="input-group-addon">du fonds {{form.collection.verbose_name}}</div>
+        {% else %}
+          <div class="input-group-addon">du site</div>
+        {% endif %}
+      </div>
+    </div>
+    <input type="submit" class="search-submit btn btn-primary" value="Rechercher" style="margin-left: 10px;">
+  </form>
   <h3><strong>{{ page_obj.paginator.count }}</strong> image(s)</h3>
   <div class="row">
     <div id="list-items" class="col-md-12">
       <ul class="search-image-list-wrapper list-unstyled">
         {% for item in page_obj.object_list %}
           <li class="search-image-list-li container panel panel-default col-md-12">
-            <div class="search-image-container row search-image-list-image-container" >
-            {% if item.object.images.count > 1 %}
-              {% with item.object.images.first as main_image %}
-                {% if main_image.height > main_image.width %}
-                  <div class="pull-left search-item-links text-center col-md-4" 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' item.object.collection.name item.object.item_guid %}?show={{secondary_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.object.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' item.object.collection.name item.object.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="search-item-links pull-left col-md-4" style="display:inline-block; margin: 10px 0px;">
-                    {% thumbnail main_image.media "350x150" crop=False as im %}
-                        <div>
-                          <a href="{% url 'item_detail' item.object.collection.name item.object.item_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.object.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' item.object.collection.name item.object.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 %}
-            <div class="search-item-info text-left col-md-8" style="display:inline-block; margin: 10px 0px;">
-              <div class="object-infos">
-               <a class="btn btn-default btn-xs pull-right collection-home-item-btn" href="{% url 'item_detail' item.object.collection.name item.object.item_guid %}"><i class="fa fa-eye"></i> Détail de l'objet</a>
-              </div>
-              <h1><small>Métadonnées de l'objet</small></h1>
+            <div class=" pull-left search-image-container row search-image-list-image-container col-md-5" style="vertical-align:middle; display: inline-block; padding-top:10px; padding-bottom:10px;">
+              {% include "partials/item-images-preview.html" with item=item.object %}
+            </div>
+            <div class="search-item-info text-left col-md-7" style="display:inline-block; margin: 10px 0px;">
+              <h1 class="search-title" style="display:inline-block; margin-top: 0px;"><small>Métadonnées de l'objet</small></h1>
+               <a class="btn btn-default btn-xs pull-right collection-home-item-btn" href="{% url 'item_detail' item.object.collection.name item.object.item_guid %}" style="display:inline-block;"><i class="fa fa-eye"></i> Détail de l'objet</a>
               {% if item.object.metadatas.designation %}<h3>Désignation : <small>{{item.object.metadatas.designation}}</small></h3>{% endif %}
               {% if item.object.metadatas.authors %}<h4>Auteur(s) : <small>{{item.object.metadatas.designation}}</small></h4>{% endif %}
               {% if item.object.metadatas.conservation_location %}<h4>Conservé à : <small>{{item.object.metadatas.conservation_location}}</small></h4>{% endif %}
@@ -103,7 +50,6 @@
               {% if item.object.metadatas.photo_credits %}<h5>Crédits photographiques : <small>{{item.object.metadatas.photo_credits}}</small></h5>{% endif %}
               {% if item.object.metadatas.inventory_number %}<h5>Numéro d'inventaire : <small>{{item.object.metadatas.inventory_number}}</small></h5>{% endif %}
             </div>
-            </div>
           </li>
         {% endfor %}
       </ul>