Managing Images in admin panel

core/admin.py

@@ -1,7 +1,7 @@
 from django.contrib import admin
 from django.contrib.contenttypes.admin import GenericTabularInline
 from django.contrib.auth.admin import UserAdmin as BaseUserAdmin
-from store.admin import ProductAdmin
+from store.admin import ProductAdmin, ProductImageInline
 from store.models import Product
 from core.models import User
 from tags.models import TaggedItem
@@ -24,7 +24,7 @@ class TagInline(GenericTabularInline):
     autocomplete_fields = ['tag']
 
 class CustomProductAdmin(ProductAdmin):
-    inlines = [TagInline]
+    inlines = [TagInline, ProductImageInline]
 
 
 admin.site.unregister(Product)

store/admin.py

@@ -42,7 +42,14 @@ def get_queryset(self, request):
             products_count = Count('products')
         )
 
-
+class ProductImageInline(admin.TabularInline):
+    model = models.ProductImage
+    readonly_fields = ['thumbnail']
+
+    def thumbnail(self, instance):
+        if instance.image.name != '':
+            return format_html(f'<img src="{instance.image.url}" class="thumbnail"/>')
+        return ''
 
 @admin.register(models.Product)
 class ProductAdmin(admin.ModelAdmin):
@@ -52,6 +59,7 @@ class ProductAdmin(admin.ModelAdmin):
     prepopulated_fields = {
         'slug': ['title']
     }
+    inlines = [ProductImageInline]
     list_display = ['title', 'unit_price', 'inventory_status', 'collection_title']
     list_editable = ['unit_price']
     list_per_page = 10
@@ -74,6 +82,10 @@ def clear_inventory(self, request, queryset):
             f'{updated_count} products were successfully updated',
             messages.SUCCESS
         )
+    class Media:
+        css = {
+            'all': ['styles.css']
+        }
 
 @admin.register(models.Customer)
 class CustomerAdmin(admin.ModelAdmin):

store/static/styles.css

@@ -0,0 +1,5 @@
+.thumbnail {
+    width: 100px;
+    height: 100px;
+    object-fit: cover;
+}