lostplaces-backend/lostplaces/lostplaces_app/templates/place/place_list.html

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

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

{% block maincontent %}
<div class="LP-PlaceList">
    <h1 class="LP-Headline">Listing our places</h1>
    <ul class="LP-PlaceList__List">
		{% for place in place_list %}
			<li class="LP-PlaceList__Item">
				<a href="{% url 'place_detail' pk=place.pk %}" class="LP-Link">
					<article class="LP-PlaceTeaser LP-PlaceTeaser--extended">
						<div class="LP-PlaceTeaser__Image">
							<img class="LP-Image" src="{{ place.images.first.filename.thumbnail.url }}" />
						</div>
						<div class="LP-PlaceTeaser__Meta">
							<div class="LP-PlaceTeaser__Info">
								<span class="LP-PlaceTeaser__Title">
									<h2 class="LP-Headline LP-Headline--teaser">{{place.name}}</h2>
								</span>
								<span class="LP-PlaceTeaser__Detail">
									<p class="LP-Paragraph">{{place.location}}</p>
								</span>
							</div>
							<div class="LP-PlaceTeaser__Description">
								<p class="LP-Paragraph">
									{% if place.description|length > 210 %}
									{{place.description|truncatechars:210|truncatewords:-1}}
									{% else %}
									{{place.description}}
									{% endif %}
								</p>
							</div>
							<div class="LP-PlaceTeaser__Icons">
								<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>
						</div>
					</article>
				</a>
			</li>
		{% endfor %}
	</ul>
</div>
{% endblock maincontent %}