CODEWITHSUNDEEP
pythondjangopython-3.4
SumNeuron
SumNeuron

Reputation: 5198

Django: best way to handle foreign key requests in template pages

Suppose you are making a site to simply list your products.

You want to upload an unspecified number of pictures for your each of your products. So you, following Django's many-to-one documentation, make two models:

# files stored under my_app/static/my_app/product_images/product_<id>/<img_name>
def product_img_dir_path(instance, filename):
    return 'my_app/static/my_app/product_images/product_{0}/{1}'.format(instance.product.id, filename)

class Product(models.Model):
    name = models.CharField ...
    ... # other attributes of the product, e.g. price, etc

class ProductImage(models.Model):
     product = models.ForeignKey("Product", on_delete=models.CASCADE)
     image = models.ImageField(upload_to=product_img_dir_path)

Now if I want all of the images for say product 1, I can retrieve them using:

ProductImages.objects.filter(product__pk=1)

My question starts here.

Suppose you want an index page which just shows the listings for all of your products and for simplicity, the first image associated with each product.

You make a template page with 

{% for product in product list %}
    <div class="product-listing" style="display:inline">
        <!-- image for product goes here -->
        <!-- brief description goes here -->
    </div>
{% endfor %}

where product_list was passed in your context:

 # inside /my_app/views.py
 def index(request):
     ...
     context = {"product_list": Product.objects.all()}
     ...

Question: what is the best way to also have access to the images for displaying the images in the template page?

Currently I thought constructing a parallel image list would suffice:

# inside /my_app/views.py

def index(request):
    ...
    product_list = Product.objects.all()
    image_list = [product.productimage_set.all()[0] for product in product_list]

    context = {"product_list": product_list, "image_list": image_list}
    ...

and then somehow using the forloop counter to get the corresponding image for the product.

e.g. 

{% for product in product list %}
    <div class="product-listing" style="display:inline">
        <img src="{{ image_list[<forloop counter>].image.url }}" />
        <!-- brief description goes here -->
    </div>
{% endfor %}

Is there a better way to do this?

Upvotes: 0

Views: 92

Answers (2)

shlomta1
shlomta1

Reputation: 148

I think that it will be easier for you to solve this if you simplify your design by moving the images to your Product model. If you want to save the path to an image it will be easier to use CharField, but if you want to save many paths why not using JSONField?

My suggestion look like this:

class Product(models.Model):
    name = models.CharField(null=True, blank=True)
    main_image = models.CharField(null=True, blank=True) # Optional
    images = JSONField(null=True, blank=True)

Upvotes: 0

wencakisa
wencakisa

Reputation: 5968

As long as you can access product.productimage_set, you can try to iterate it in your template and do not pass it as a view context.

In your Django template:

{% for product in product_list %}
    <div class="product-listing" style="display:inline">
        {% for product_image in product.productimage_set.all %}
            <img src="{{ product_image.image.url }}" />
            <!-- brief description goes here -->
        {% endfor %}
    </div>
{% endfor %}

Upvotes: 1

Related Questions