Integrated sorl into templates for dynamic image resizing

oscar/apps/catalogue/abstract_models.py

@@ -293,7 +293,7 @@ class AbstractProduct(models.Model):
         return None
 
     def primary_image(self):
-        images = self.images.all()
+        images = self.images.all().order_by('display_order')
         if images.count():
             return images[0]
         return {

oscar/templates/catalogue/partials/gallery.html

@@ -31,11 +31,11 @@
                                     <ul>
                                         {% for image in all_images %}
                                             <li>
-                                                <a href="{{ image.original.url }}" rel="lightbox">
-                                                    <img src="{{ image.original.url }}" data-large="{{ image.original.url }}" alt="image02" data-description="{% if image.caption %}{{ image.caption }}{% endif %}" />
-                                                </a>
+											{% thumbnail image.original "250x400" upscale=False as thumb %}
+                                                <a href="{{ image.original.url }}" rel="lightbox"> <img src="{{ thumb.url }}" data-large="{{ image.original.url }}" alt="image02" data-description="{% if image.caption %}{{ image.caption }}{% endif %}" /> </a>
+											{% endthumbnail %}
                                             </li>
-                                            {% endfor %}
+										{% endfor %}
                                     </ul>
                             </div>
                     </div>
@@ -46,9 +46,11 @@
     {% else %}
 		{% with image=product.primary_image %}
 		    {% thumbnail image.original "400x400" upscale=False as thumb %}
-			<a href="{{ thumb.url }}" rel="lightbox">
-				<img src="{{ thumb.url }}" data-large="{{ image.original.url }}" alt="image02" data-description="{% if image.caption %}{{ image.caption }}{% endif %}" />
-			</a>
+			{% if not image.is_missing %}
+			<a href="{{ image.original.url }}" rel="lightbox"><img src="{{ thumb.url }}" data-large="{{ image.original.url }}" alt="image02" data-description="{% if image.caption %}{{ image.caption }}{% endif %}" /></a>
+			{% else %}
+			<img src="{{ thumb.url }}" alt="image02" />
+			{% endif %}
 			{% endthumbnail %}
 		{% endwith %}
     {% endif %}

oscar/templates/catalogue/partials/product.html

@@ -1,10 +1,14 @@
 {% load currency_filters %}
 {% load basket_tags %}
-{% load product_tags %}
+{% load thumbnail %}
+
 <article class="product_pod">
-	{% product_image product as product_image %}
     <div class="image_container">
-        <a href="{{ product.get_absolute_url }}"><img class="thumbnail" src="{{ product_image.thumbnail_url }}" alt="{{ product.get_title }}"></a>
+		{% with image=product.primary_image %}
+		{% thumbnail image.original "400x400" upscale=False as thumb %}
+		<a href="{{ product.get_absolute_url }}"><img class="thumbnail" src="{{ thumb.url }}" alt="{{ product.get_title }}"></a>
+		{% endthumbnail %}
+		{% endwith %}
     </div>
 
     {% block product_review %}

oscar/templates/reviews/reviews.html

@@ -2,6 +2,7 @@
 
 {% load currency_filters %}
 {% load history_tags %}
+{% load thumbnail %}
 
 {% block title %}
 Reviews for {{ product.title }} | {{ block.super }}
@@ -90,15 +91,11 @@ Reviews for {{ product.title }} | {{ block.super }}
 
         <div class="span3" style="text-align: center">
             <div class="thumbnail">
-                {% with product.images.all.0 as image %}
-                    {% if image %}
-                        <a href="{{ image.original.url }}" rel="lightbox">
-                            <img src="{{ image.original.url }}" data-large="{{ image.original.url }}" alt="image02" data-description="{% if image.caption %}{{ image.caption }}{% endif %}" />
-                            </a>
-                        {% else %}
-                        <img src="/static/oscar/img/image_not_found.jpg" alt="No image found"/>
-                    {% endif %}
-                {% endwith %}
+				{% with image=product.primary_image %}
+				{% thumbnail image.original "400x400" upscale=False as thumb %}
+				<a href="{{ product.get_absolute_url }}"><img class="thumbnail" src="{{ thumb.url }}" alt="{{ product.get_title }}"></a>
+				{% endthumbnail %}
+				{% endwith %}
             </div>
             <div>
                 <h2><a href="{{ product.get_absolute_url }}">{{ product.get_title }}</a></h2>

oscar/templates/search/results.html

@@ -14,21 +14,16 @@
 Did you mean <a href="{% url search:search %}?q={{ suggestion }}">{{ suggestion }}</a>?
 {% endif %}
 
-
 {% if page.object_list %}
     <ol class="products vertical three">
         {% for result in page.object_list %}
         <li>
             <article class="product_pod">
-            {% for image in result.object.images.all %}
-                {% if forloop.first %}
-                    {% thumbnail image.original "100" crop="center" as im %}
-                    <div class="image_container">
-                        <a href="{{ result.object.get_absolute_url }}"><img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"></a>
-                    </div>
-                    {% endthumbnail %}
-                {% endif %}
-            {% endfor %}
+			{% with image=product.primary_image %}
+			{% thumbnail image.original "400x400" upscale=False as thumb %}
+			<a href="{{ product.get_absolute_url }}"><img class="thumbnail" src="{{ thumb.url }}" alt="{{ product.get_title }}"></a>
+			{% endthumbnail %}
+			{% endwith %}
             <h3><a href="{{ result.object.get_absolute_url }}">{{ result.object.get_title }}</a></h3>
             <div class="product_price">
                 {% if result.object.is_group %}