How to overlay an image in a for loop in Django

I’m trying to create an event page where admin can post events which will be edited or deleted from time to time. The idea is there are in cards and when the user click on the cards an image overlay will show up.
While in the past I have used HTML and JavaScript to create this overlay my problem now using a for loop in python.
This is my code:

<div class="row">
                {% for festival in festivals %}                        
                <div class="col-4">
                    <div onclick="on()" class="card">
                        
                            <img src="{{ festival.image_url }}" class="card-img-top" alt="{{ festival.name }}">
                        
                        <div class="card-body">
                            <h5 class="card-title">{{ festival.name }}</h5>
                            <p class="card-text">{{ festival.description }}</p>
                            <button onclick="on()">Turn on overlay effect</button>
                        </div>
                    </div>
                </div>
                <div id="overlay" onclick="off()">
                    <div class="col-8 img-overlay">
                        <img src="{{ festival.image_url }}" class="card-img-top" alt="{{ festival.name }}">
                    </div>
                </div>    
                {% endfor %}
            </div>

Any suggestion will be appreciated
Thank you

I forget to say that my problem is not showing the overlay but it will only shows the first image, no matter which card I click on.

The code for JavaScript.

function on() {
  document.getElementById("overlay").style.display = "block";
}

function off() {
  document.getElementById("overlay").style.display = "none";
}

1 thought on “How to overlay an image in a for loop in Django”

  1. Got to realised the error was i had the ID inside a loop creating more than one div with the same ID plus i was trying to use JavaScript within python loop.
    So the solution I thought is to create a separate page for each card every time I click in the image and have a plain overlay outside the loop with the image clicked

    <div class="row">
                    {% for festival in festivals %}
                    <div class="col-4">
                        <div class="card">
                            <a href="{% url 'festival_detail' festival.id %}">
                                <img src="{{ festival.image_url }}" class="card-img-top" alt="{{ festival.name }}">
                            </a>
                            <div class="card-body">
                                <h5 class="card-title">{{ festival.name }}</h5>
                                <p class="card-text">{{ festival.description }}</p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    <a href="{% url 'festivals' %}" class="btn btn-lg" role="button">
                        <div class="overlay">
                            <div class="col-8 img-overlay">
                                <img src="{{ festival.image_url }}" class="card-img-top" alt="{{ festival.name }}">
                            </div>
                        </div>
                    </a>
                </div>
    

    And the url will be

    path('<int:festival_id>/', views.festival_detail, name='festival_detail'),
    

    the view.py

    def festival_detail(request, festival_id):
    """
    A view to show individual festivals images
    """
    festival = get_object_or_404(Festival, pk=festival_id)
    festivals = Festival.objects.all()
    
    context = {
        'festival': festival,
        'festivals': festivals
    }
    
    return render(request, 'festivals/festival_detail.html', context)
    
    Reply

Leave a Comment