lostplaces-backend/lostplaces/lostplaces_app/templates/placeList.html

{% extends 'global.html'%}
{% load static %}

{% block title %}Lost Places{% endblock %}

{% block maincontent %}
<ul class="LP-Place__List">
    {% for place in place_list %}
    <li class="LP-Place__Item">
        <a href="{% url 'place_detail' pk=place.pk %}" class="LP-Link">
            <article class="LP-Place">
                <div class="LP-Place__ImageContainer">
                    <img class="LP-Place__Image" src="{{ place.images.first.filename.url_thumbnail }}" />
                </div>
                <div class="LP-Place__Assets">
                    <div class="LP-Place__Info">
                        <h3 class="LP-Place__Title">{{place.name}}</h3>
                        <p class="LP-Place__Detail">{{place.location}}</p>
                    </div>
                    <p class="LP-TextSection LP-Place__Description">
                        {{place.description|truncatechars:210|truncatewords:-1}}
                    </p>

                    <ul class="LP-Icon__List">
                        <li class="LP-Icon__Item"><img class="LP-Icon" src="{% static 'icons/favourite.svg' %}" /></li>
                        <li class="LP-Icon__Item"><img class="LP-Icon" src="{% static 'icons/location.svg' %}" /></li>
                        <li class="LP-Icon__Item"><img class="LP-Icon" src="{% static 'icons/flag.svg' %}" /></li>
                    </ul>
                </div>
            </article>
        </a>
    </li>
    {% endfor %}
</ul>
{% endblock maincontent %}