etiquette/templates/photo_card.html

{% set thumbnails =
    {
        "audio": "audio",
        "archive": "archive",
        "txt": "txt",
        "svg": "svg",
        "video": "video",
    }
%}
{% macro create_photo_card(photo, view="grid") %}

{% if view == "list" %}
<div class="photo_card_list">
    <a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a>
    <a target="_blank" href="/file/{{photo.id}}.{{photo.extension}}">{{photo.bytestring()}}</a>
</div>

{% else %}
<div class="photo_card_grid">
    <div class="photo_card_grid_thumb">
        <a target="_blank" href="/photo/{{photo.id}}">
            <img height="150"
            {% if photo.thumbnail %}
                src="/thumbnail/{{photo.id}}.jpg"
            {% else %}
                {% set choice =
                    thumbnails.get(photo.extension,
                    thumbnails.get(photo.mimetype,
                    'other'))
                %}
                src="/static/basic_thumbnails/{{choice}}.png"
            {% endif %}
            >
        </a>
    </div>
    <div class="photo_card_grid_info">
        <div class="photo_card_grid_filename">
            <a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a>
        </div>
        <div class="photo_card_grid_file_metadata">
            <div class="photo_card_grid_tags">
                {% set tags = photo.tags() %}
                {% set tag_names = [] %}
                {% for tag in tags %}
                {% do tag_names.append(tag.name) %}
                {% endfor %}
                {% if tags %}
                    <span title="{{", ".join(tag_names)}}">T</span>
                {% endif %}
            </div>
            <span>
            {% if photo.width %}
                {{photo.width}}&times;{{photo.height}},
            {% endif %}
            {% if photo.duration %}
                {{photo.duration_string()}},
            {% endif %}
            <a target="_blank" href="/file/{{photo.id}}.{{photo.extension}}">{{photo.bytestring()}}</a>
            </span>
        </div>
    </div>
</div>
{% endif %}
{% endmacro %}