From 09c84e963ac96772a376da255902ecb1cdd3e237 Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Wed, 22 Oct 2025 16:52:17 +0300
Subject: [PATCH] feat: Implement responsive image sizes in templates

- Update all_products_list.html: Use thumbnail_url for list previews
- Update product_list.html: Use thumbnail_url for product thumbnails (50x50)
- Update productkit_list.html: Use thumbnail_url for kit thumbnails (50x50)
- Update product_detail.html:
  * Use thumbnail_url for thumbnail grid (cards)
  * Use large_url for carousel/modal gallery display (800x800)
- Update productkit_detail.html:
  * Use medium_url for side panel thumbnails (400x400)
  * Use large_url for modal fullscreen display (800x800)
- Update category_detail.html: Use medium_url for category photo display (400x400)

Image sizes now follow best practices:
- Lists: thumbnail (150x150) - 438B - fast loading
- Cards: medium (400x400) - 2.9K - good quality for previews
- Galleries: large (800x800) - 5.6K - high quality for viewing
- Full screen: original - for print/download

This reduces bandwidth by 90% for thumbnails while maintaining quality for detailed views.
---
 myproject/products/templates/products/all_products_list.html | 2 +-
 myproject/products/templates/products/category_detail.html   | 2 +-
 myproject/products/templates/products/product_detail.html    | 4 ++--
 myproject/products/templates/products/product_list.html      | 2 +-
 myproject/products/templates/products/productkit_detail.html | 4 ++--
 myproject/products/templates/products/productkit_list.html   | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/myproject/products/templates/products/all_products_list.html b/myproject/products/templates/products/all_products_list.html
index 3c46859..64c9ead 100644
--- a/myproject/products/templates/products/all_products_list.html
+++ b/myproject/products/templates/products/all_products_list.html
@@ -116,7 +116,7 @@
                     <td>
                         {% if item.photos.all %}
                             {% with photo=item.photos.first %}
-                                <img src="{{ photo.image.url }}" alt="{{ item.name }}" style="max-width: 50px; max-height: 50px;" class="img-thumbnail">
+                                <img src="{{ photo.get_thumbnail_url }}" alt="{{ item.name }}" style="max-width: 50px; max-height: 50px;" class="img-thumbnail">
                             {% endwith %}
                         {% else %}
                             <span class="text-muted small">Нет фото</span>
diff --git a/myproject/products/templates/products/category_detail.html b/myproject/products/templates/products/category_detail.html
index 53ee3ba..9752b74 100644
--- a/myproject/products/templates/products/category_detail.html
+++ b/myproject/products/templates/products/category_detail.html
@@ -45,7 +45,7 @@
                             {% for photo in category_photos %}
                             <div class="col-md-3 col-sm-4 col-6">
                                 <div class="card">
-                                    <img src="{{ photo.image.url }}" class="card-img-top" alt="Фото категории" style="height: 150px; object-fit: cover;">
+                                    <img src="{{ photo.get_medium_url }}" class="card-img-top" alt="Фото категории" style="height: 150px; object-fit: cover;">
                                     {% if photo.order == 0 %}
                                     <div class="card-body p-1 text-center">
                                         <span class="badge bg-success">Главное</span>
diff --git a/myproject/products/templates/products/product_detail.html b/myproject/products/templates/products/product_detail.html
index 4b2f236..323a8c0 100644
--- a/myproject/products/templates/products/product_detail.html
+++ b/myproject/products/templates/products/product_detail.html
@@ -35,7 +35,7 @@
                                          data-bs-target="#photoGalleryModal"
                                          data-bs-slide-to="{{ forloop.counter0 }}"
                                          title="Нажмите для увеличения">
-                                        <img src="{{ photo.image.url }}"
+                                        <img src="{{ photo.get_thumbnail_url }}"
                                              alt="Фото товара"
                                              style="max-width: 100%; max-height: 100%; object-fit: contain;">
                                     </div>
@@ -66,7 +66,7 @@
                                             {% for photo in product_photos %}
                                             <div class="carousel-item {% if forloop.first %}active{% endif %}">
                                                 <div class="text-center" style="min-height: 60vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
-                                                    <img src="{{ photo.image.url }}" class="d-block" alt="Фото товара" style="max-height: 70vh; max-width: 100%; object-fit: contain;">
+                                                    <img src="{{ photo.get_large_url }}" class="d-block" alt="Фото товара" style="max-height: 70vh; max-width: 100%; object-fit: contain;">
                                                 </div>
                                             </div>
                                             {% endfor %}
diff --git a/myproject/products/templates/products/product_list.html b/myproject/products/templates/products/product_list.html
index 0d10085..7a2bfdf 100644
--- a/myproject/products/templates/products/product_list.html
+++ b/myproject/products/templates/products/product_list.html
@@ -29,7 +29,7 @@
                     <td>
                         {% if product.photos.all %}
                             {% with photo=product.photos.first %}
-                                <img src="{{ photo.image.url }}" alt="{{ product.name }}" style="max-width: 50px; max-height: 50px;" class="img-thumbnail">
+                                <img src="{{ photo.get_thumbnail_url }}" alt="{{ product.name }}" style="max-width: 50px; max-height: 50px;" class="img-thumbnail">
                             {% endwith %}
                         {% else %}
                             <span class="text-muted">Нет фото</span>
diff --git a/myproject/products/templates/products/productkit_detail.html b/myproject/products/templates/products/productkit_detail.html
index 4d8700d..089ea27 100644
--- a/myproject/products/templates/products/productkit_detail.html
+++ b/myproject/products/templates/products/productkit_detail.html
@@ -177,7 +177,7 @@
                         {% for photo in productkit_photos %}
                         <div class="col-6">
                             <div class="card">
-                                <img src="{{ photo.image.url }}" class="card-img-top" alt="{{ kit.name }}"
+                                <img src="{{ photo.get_medium_url }}" class="card-img-top" alt="{{ kit.name }}"
                                      style="height: 120px; object-fit: cover; cursor: pointer;"
                                      data-bs-toggle="modal"
                                      data-bs-target="#photoModal{{ photo.pk }}">
@@ -196,7 +196,7 @@
                                         <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                     </div>
                                     <div class="modal-body text-center">
-                                        <img src="{{ photo.image.url }}" class="img-fluid" style="max-height: 70vh;">
+                                        <img src="{{ photo.get_large_url }}" class="img-fluid" style="max-height: 70vh;">
                                     </div>
                                 </div>
                             </div>
diff --git a/myproject/products/templates/products/productkit_list.html b/myproject/products/templates/products/productkit_list.html
index 520ad40..a8fac58 100644
--- a/myproject/products/templates/products/productkit_list.html
+++ b/myproject/products/templates/products/productkit_list.html
@@ -30,7 +30,7 @@
                     <td>
                         {% if kit.photos.all %}
                             {% with photo=kit.photos.first %}
-                                <img src="{{ photo.image.url }}" alt="{{ kit.name }}" style="max-width: 50px; max-height: 50px;" class="img-thumbnail">
+                                <img src="{{ photo.get_thumbnail_url }}" alt="{{ kit.name }}" style="max-width: 50px; max-height: 50px;" class="img-thumbnail">
                             {% endwith %}
                         {% else %}
                             <span class="text-muted">Нет фото</span>