smaa/octopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: Implement responsive image sizes in templates

Browse Source 
- 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.
This commit is contained in:
Andrey Smakotin
2025-10-22 16:52:17 +03:00
parent 8f3d247c3c
commit 09c84e963a
6 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
myproject/products/templates/products/all_products_list.html
View File

@@ -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>

2
myproject/products/templates/products/category_detail.html
View File

@@ -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>

4
myproject/products/templates/products/product_detail.html
View File

@@ -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 %}

2
myproject/products/templates/products/product_list.html
View File

@@ -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>

4
myproject/products/templates/products/productkit_detail.html
View File

@@ -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>

2
myproject/products/templates/products/productkit_list.html
View File

@@ -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>