etiquette/frontends/etiquette_flask/templates/photo_card.html

{# Specific extensions, then specific mimetypes, then general mimtypes #}
{% set thumbnails =
    {
        "svg": "svg",

        "application/zip": "archive",
        "application/x-tar": "archive",

        "archive": "archive",
        "audio": "audio",
        "video": "video",
        "text": "txt",

    }
%}
{% 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,
                    thumbnails.get(photo.simple_mimetype,
                    'other')))
                %}
                src="/static/basic_thumbnails/{{choice}}.png"
            {% endif %}
            >
        </a>
    </div>
    <div class="photo_card_grid_info">
        <div class="photo_card_grid_filename">
            <div class="photo_card_grid_filename_hoverhelper">
            <a target="_blank" href="/photo/{{photo.id}}">{{photo.basename}}</a>
            </div>
        </div>
        <div class="photo_card_grid_file_metadata">
            {% set tags = photo.tags() %}
            {% set tag_names = [] %}
            {% for tag in tags %}
            {% do tag_names.append(tag.name) %}
            {% endfor %}
            {% if tag_names %}
                <div class="photo_card_grid_tags">
                    {% set tag_names = ", ".join(tag_names) %}
                    <span title="{{tag_names}}">T</span>
                </div>
            {% else %}
                <div></div>
            {% endif %}
            <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 %}