Optimizing Image Filtering and Color Selection in Django Product Display

I created three models In Models.py:

class Color(models.Model):
    name=models.CharField(max_length=20)
    code=ColorField(default='#FF0000')

    def __str__(self):
        return self.name
class Product(models.Model):
    pid=ShortUUIDField(length=10,max_length=100,prefix="prd",alphabet="abcdef")


    user=models.ForeignKey(CustomUser, on_delete=models.SET_NULL ,null=True)
    cagtegory=models.ForeignKey(Category, on_delete=models.SET_NULL ,null=True,related_name="category")
    vendor=models.ForeignKey(Vendor, on_delete=models.SET_NULL,null=True,related_name="product")
    color=models.ManyToManyField(Color,blank=True)
    size=models.ManyToManyField(Size,blank=True)


    title=models.CharField(max_length=100,default="Apple")
    image=models.ImageField(upload_to=user_directory_path,default="product.jpg")
    description=models.TextField(null=True, blank=True,default="This is a product")

    price = models.DecimalField(max_digits=10, decimal_places=2, default=1.99)
    old_price = models.DecimalField(max_digits=10, decimal_places=2, default=2.99)

    specifications=models.TextField(null=True, blank=True)

    product_status=models.CharField(choices=STATUS, max_length=10,default="In_review")


    status=models.BooleanField(default=True)
    in_stock=models.BooleanField(default=True)
    featured=models.BooleanField(default=False)
    digital=models.BooleanField(default=False)

    sku=ShortUUIDField(length=10,max_length=100,prefix="sku",alphabet="abcdef")

    date=models.DateTimeField(auto_now_add=True)
    updated=models.DateTimeField(null=True,blank=True)

    class Meta:
        verbose_name_plural="Products"

    def product_image(self):
        return mark_safe('<img src="%s" width="50" height="50"/>'%(self.image.url))

    def __str__(self):
        return self.title
    def get_percentage(self):
        new_price=((self.old_price-self.price)/self.old_price)*100
        return new_price

class ProductImages(models.Model):
    images=models.ImageField(upload_to="product-image",default="product.jpg")
    product=models.ForeignKey(Product,related_name="p_images" ,on_delete=models.SET_NULL ,null=True)
    color = models.ForeignKey(Color, on_delete=models.CASCADE)
    date=models.DateTimeField(auto_now_add=True)

    class Meta:
        verbose_name_plural="Product Images"

So In my admin pannel Under Product Model it is creating two subparts one is General and other is Product Images--->Product model view and the product images will look like this--->Product Images In the General section I am uploading the main product image

<div class="left-column">
        {%  for p in products  %}
        {%  for c in colors  %}
        {%  for x in p_image  %}
          <img data-image="{{c.id}}" src="{{x.image.url}}" alt="">#1
          <img data-image="{{c.id}}" src="{{x.image.url}}" alt="">#2
          <img data-image="{{c.id}}" class="active" src="{{p.image.url}}" alt=""> #3
        {%  endfor  %}
        {%  endfor  %}
        {%  endfor  %}
      </div>

And displaying the main image in the frontend by #3 html code and I also want to display other images.My product detail page will look like this--->product detail page You can see I created some colors with hyperlink

<div class="product-color">
            <span>Color</span>
            {%  for c in colors  %}

            <div class="color-choose">
              <a href="?colorID={{c.id}}" style="display: inline-block; width: 40px; height: 40px; background-color: {{c.code}}; border-radius: 50%; border: 2px solid #FFFFFF; cursor: pointer; float: left; margin-right: 10px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);">
              </a>
            </div>
            {%  endfor  %}

          </div>

In this code every color has a id Now I want to filter the images with the id And I created a views for it In views.py

def product_detail_view(request,pid):
    product=Product.objects.get(pid=pid)
    colors = Color.objects.all()
    sizes= Size.objects.all()
    p_image=product.p_images.all()
    products=Product.objects.filter(cagtegory=product.cagtegory)
    ColorID=request.GET.get('colorID')
    if ColorID:
        product_images = ProductImages.objects.filter(color_id=ColorID)
    else:
        product=Product.objects.all()

    context={
        "p":product,
        "p_image":p_image,
        'colors': colors,
        'sizes': sizes,
        'products': products,
    }

    return render(request,"core/product_detail.html",context)

I want that if I clicked on a color it will show the image which I uploaded for the color

Back to Top