CODEWITHSUNDEEP
pythonpython-3.xdjangojinja2
Pranta Palit
Pranta Palit

Reputation: 700

Dynamically iterate over variables if it contains a url using Jinja

I have a collection of uploaded photos in Django admin enter image description here

photos URLs are stored in a Django app namely Listing, inside model.py

class Listing(models.Model):
    photo_1 = models.ImageField(upload_to='photos/%Y/%m/%d/',blank=True)
    photo_2 = models.ImageField(upload_to='photos/%Y/%m/%d/',blank=True)
    photo_3 = models.ImageField(upload_to='photos/%Y/%m/%d/',blank=True)
    photo_4 = models.ImageField(upload_to='photos/%Y/%m/%d/',blank=True)
    photo_5 = models.ImageField(upload_to='photos/%Y/%m/%d/',blank=True)
    photo_6 = models.ImageField(upload_to='photos/%Y/%m/%d/',blank=True)

my code for views.py looks like

def listing(request, listing_id):
    listing = get_object_or_404(Listing, pk=listing_id)
    context = {
        'listing': listing
    }
    return render(request, 'listings/listing.html', context)

now, inside my listing.html file I can check if a photo URL is available and then apply the design to show the photo as following

        {% if listing.photo_1 %}
          <div class="col-md-2">
            <a href="{{ listing.photo_1.url }}" data-lightbox="home-images">
              <img src="{{ listing.photo_1.url }}" alt="" class="img-fluid">
            </a>
          </div>
        {% endif %}

I can do it for all six photos but I want to do it dynamically like

  {% for i in range (1,7) %}
    {% if listing.photo_{{i}} %}
      <div class="col-md-2">
        <a href="{{ listing.photo_{{i}}.url }}" data-lightbox="home-images">
          <img src="{{ listing.photo_{{i}}.url }}" alt="" class="img-fluid">
        </a>
      </div>
    {% endif %}
  {% endfor %}

is there any way to do it? any suggestions would be appreciated.

Upvotes: 1

Views: 184

Answers (1)

Pranta Palit
Pranta Palit

Reputation: 700

I solved the issue by passing all the photos as a list in the context dictionary, now views.py looks like

def listing(request, listing_id):
    listing = get_object_or_404(Listing, pk=listing_id)
    context = {
        'listing': listing,
        'photos': [listing.photo_1,listing.photo_2,listing.photo_3,listing.photo_4,listing.photo_5,listing.photo_6]
    }
    return render(request, 'listings/listing.html', context)

and my html code looks like

    {% for photo in photos %}
      {% if photo %}
        <div class="col-md-2">
          <a href="{{ photo.url }}" data-lightbox="home-images">
            <img src="{{ photo.url }}" alt="" class="img-fluid">
          </a>
        </div>
      {% endif %}
    {% endfor %}

it works pefectly. Thank you.

Upvotes: 1

Related Questions