picture-display/src/pictures/templates/pictures/messages-list.html

{% extends "pictures/base.html" %}
{% load static %}

{% block extend_head %}
    <link rel="stylesheet" href="{% static "pictures/list.css" %}">
{% endblock %}

{% block content %}
    {% for message in messages %}
        <div class="message">
            <div class="picture-preview">
                {% if message.media_files.first %}
                    <img src="{{ message.media_files.first.file.url }}" alt="Photo">
                {% else %}
                    <div class="filler"></div>
                {% endif %}
            </div>
            <div class="content-block">
                <div class="metadata">
                    <div class="name">De: {{ message.sender.display_name }}</div>
                    <div class="date">{{ message.received_at }}</div>
                </div>
                <p class="text">{{ message.content | linebreaks }}</p>
            </div>
        </div>
    {% endfor %}
{% endblock %}