html - Dynamically load background image in template

Question

I have a list object as follows:

<div role="list" class="w-clearfix w-dyn-items w-row">
    {% if latest_post_list %}
    {% for post in latest_post_list %}
    {% if post.is_published %}
    <div role="listitem" class="blog-thumbnail w-dyn-item w-col w-col-4">
        <a href="/{{ post.id }}" data-w-id="46150442-4efa-9d36-3a4c-20d527e7a6bc" class="thumbnail-wrapper w-inline-block">
        <div class="image-wrapper">
            <div style="-webkit-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="thumbnail-image"></div>
            <div class="category-tag">{{ post.category }}</div>
        </div>
        <div class="thumbnail-text">
            <div class="blog-title">{{ post.title}}</div>
            <div class="preview-text">{{ post.body}}</div>
        </div>
        <div class="thumb-details w-clearfix"><img src="" alt="" class="author-img">
            <div class="author-title">{{ post.author }}</div>
            <div class="thumbnail-date">{{ post.pub_date }}</div>
        </div>
        </a>
    </div>
        {% endif %}
        {% endfor %}
        {% else %}


    </div>
    <div class="w-dyn-empty">
        <p>No items found.</p>
    </div>
    {% endif %}
</div>

The background image is set in stylesheet:

  background-image: url('https://foo.bar.net/img/background-image.svg');

An image is added to the category model using an Imagefield.

class Category(models.Model):
    created_at = models.DateTimeField('date created')
    updated_at = models.DateTimeField('date published')
    title = models.CharField(max_length=255)
    image = models.ImageField()

    class Meta:
        verbose_name = "Category"
        verbose_name_plural = "Categories"
        ordering = ['title']

    def __str__(self):
        return self.title

I would like to have the background image set to be the uploaded category image and default to the current URL if null but can not get the image variable working in the template i.e

background-image: url('../images/{{ category.image}}');

question from:https://stackoverflow.com/questions/65906681/dynamically-load-background-image-in-template

Answer 1

You should be able to add the category's image to a background like this:

<div style="background-image: url({{ category.image.url }});"></div>