Выберите первое изображение внешнего ключа изображения в шаблоне django

Я хочу выбрать первое изображение из набора свойств объекта. Я создал модель Property Model с внешним ключом к модели PropertyImages. Как мне получить доступ к первому изображению свойства object_set.all в шаблоне. Я не хочу делать это в функции представления, так как это должно быть в файле base.html.

код: 

{% for property in properties %}
        
        <div
          style="background-image: url('{{property.propertyimages_set.all|first.url}}'); background-size: 100% 100%; "
          ;
          class="tm-row-featured"
        >
          <div class="featured-content">
            <p><span>Name: </span>{{property.property_name}}</p>
            <hr>
            <p><span>Type: </span>{{property.property_type}}</p>
            <p><span>Price: </span>&#8358;{{property.price}}</p>
            <p><span>Location: </span>{{property.property_state}}</p>
            <p><a href="{% url 'property_details' property.property_slug %}">More info 
            >>></a></p>
          </div>
        </div>
        {% endfor %}

Вы можете использовать forloop.first для проверки того, выполняется ли цикл первым, а затем использовать соответствующий тег if для вывода изображения. Пожалуйста, посмотрите переменные, связанные с циклом for, по ссылке ниже:

Ref: https://docs.djangoproject.com/en/4.0/ref/templates/builtins/#for

{% if forloop.first %}
 # Show first image here

{% endif %}

Попробуйте это:

Ref

<div style="background-image: url('{{properties.0.propertyimages_set.url}}'); background-size: 100% 100%;"; class="tm-row-featured">
    <div class="featured-content">
        <p><span>Name: </span>{{properties.0.property_name}}</p>
        <hr>
        <p><span>Type: </span>{{properties.0.property_type}}</p>
        <p><span>Price: </span>&#8358;{{properties.0.price}}</p>
        <p><span>Location: </span>{{properties.0.property_state}}</p>
        <p><a href="{% url 'property_details' properties.0.property_slug %}">More info >>></a></p>
    </div>
</div>

Приведенные выше решения не сработали для меня. Я, наконец, нашел способ обойти решение таким образом:

{% for property in properties %}
        
        
        <div
        
        {% with  property.propertyimages_set.all|first as photo %} style="background-image: url('{{photo.image.url}}'); background-size: 100% 100%; "
          ; {% endwith %}
          class="tm-row-featured"
        >
          <div class="featured-content">
            <p><span>Name: </span>{{property.property_name}}</p>
            <hr>
            <p><span>Type: </span>{{property.property_type}}</p>
            <p><span>Price: </span>&#8358;{{property.price}}</p>
            <p><span>Location: </span>{{property.property_state}}</p>
            <p><a href="{% url 'property_details' property.property_slug %}">More info >>></a></p>
          </div>
        </div>
        {% endfor %}
      </div>
Вернуться на верх