Bootstrap carousel

Using Django Templates & Frontend
1

I wanna display images in bootstrap carousel, but active class does not work as well:

{% for post in posts %}
<div class="post">
    <div>
        <h3>{{ post.title }}</h3>
        <b>{{ post.description }}</b>
    </div>
    <hr>
    <div id="postCarousel{{ post.id }}" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            {% for image in post.image_set.all %}
                <div class="carousel-item {% if loop.first %}active{% endif %}">
                    <img src="{{ image.image }}" class="d-block w-100" alt="{{ image.image }}">
                </div>
            {% endfor %}
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#postCarousel{{ post.id }}" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#postCarousel{{ post.id }}" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>
{% endfor %}
2

I believe you have a typo in this line.
Shouldn’t that be forloop.first? docs

3

Also, if the first image of this expression is an instance of a model, and the second image is the name of the field, then you generally want to use the url attribute of that field to produce the proper reference url. (e.g., {{ image.image.url }}

4

Url is correct because I used relationship between two models (post and image)

here is models.py

from django.db import models

# Create your models here.
class Post(models.Model):
    title = models.TextField()
    description = models.TextField()

class Image(models.Model):
    post = models.ForeignKey(Post, on_delete=models.CASCADE)
    image = models.ImageField(upload_to='content/static/images/')
5

I’m not sure I’m following what you’re saying here.

In the expression:

{{ image.image }}
   ^^^^^ Reference to the Image model
         ^^^^^ Reference to the image field

This gives you a name, but does not necessarily produce the right url.

To get the proper URL, it will be:
{{ image.image.url }}

6

My bad! Just my English skills… I checked it in console of browser and image paths actually are correct just “active” class does not display, I can not understand why. and items divs in console log are grey colored

7

What are you seeing rendered in the src attribute?

What is your MEDIA_URL setting in your settings.py file?

8

I do not have MEDIA_URL instead I have STATIC_URL : STATIC_URL = 'content/static/'
and I am sorry, I did not mention that images display when I don’t have an carousel but when I try to display they in carousel this code is grey in console and this code does not display in browser page:

<div class="carousel-item ">
  <img src="/content/static/images/AbTS7nBuidw.jpg" class="d-block w-100" alt="content/static/images/AbTS7nBuidw.jpg">
</div>
            
<div class="carousel-item ">
  <img src="/content/static/images/XYX8W1AE8qI.jpg" class="d-block w-100" alt="content/static/images/XYX8W1AE8qI.jpg">
</div>
            
<div class="carousel-item ">
  <img src="/content/static/images/YoX_uM8GDkY.jpg" class="d-block w-100" alt="content/static/images/YoX_uM8GDkY.jpg">
</div>
9

If these are uploaded files, then you should have a MEDIA_URL so that your web server knows how to retrieve them.

If they’re uploaded files, they’re not static files. This is not an “instead of” situation, it’s an “in addition to” situation.

Static files are a completely separate topic from media files. They are not the same and should not be managed the same. You do not work with them the same way.