- Complete guide for using responsive image sizes in templates
- Examples for all template types (lists, galleries, modals)
- Performance metrics and optimization tips
- Size recommendations for each context
- Troubleshooting and best practices
- 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.
- Keep only single photo preview per inline (large version 800x800)
- Removed all_versions_preview display from photo inlines
- Cleaner, more focused admin interface
- Confirmed all sizes are stored correctly:
* Large (800x800) verified
* Medium (400x400) verified
* Originals verified
- Use large_url() for preview in admin (best quality/size balance)
- Added 'sku' field to ProductKitForm meta fields list
- Added SKU label in form labels
- Added SKU widget styling in __init__ method with helpful placeholder
- Updated productkit_form.html template to display SKU field after name, before description
- Updated form field filtering to exclude 'sku' from dynamic loop to prevent duplication
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Repositioned the category field to appear after the name field in both product and kit creation forms
- Added a quick-link button to create a new category that opens in a new tab
- Updated form field rendering logic to properly display categories in the correct position
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
