mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 11:36:16 +00:00
Formatted metadata
Add API for metadata Load more images if page is resized Adjusted animations
This commit is contained in:
parent
651fd8aa49
commit
da1579555b
9 changed files with 742 additions and 86 deletions
|
|
@ -19,8 +19,8 @@
|
|||
src="/api/uploads/{{ image['file_name'] }}/1000"
|
||||
onload="imgFade(this)" style="opacity:0;"
|
||||
onerror="this.src='/static/images/error.png'"
|
||||
width="{{ file['width'] }}"
|
||||
height="{{ file['height'] }}"
|
||||
width="{{ width }}"
|
||||
height="{{ height }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -108,28 +108,98 @@
|
|||
<h2>Info</h2>
|
||||
</div>
|
||||
<div class="image-info__content">
|
||||
<p>Filename: {{ image['file_name'] }}</p>
|
||||
<p>Image ID: {{ image['id'] }}</p>
|
||||
<p>Author: {{ image['author_id'] }}</p>
|
||||
<p>Upload date: <span class="time">{{ image['created_at'] }}</span></p>
|
||||
<p>Dimensions: {{ file['width'] }}x{{ file['height'] }}</p>
|
||||
<p>File size: {{ size }}</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Image ID</td>
|
||||
<td>{{ image['id'] }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Author</td>
|
||||
<td>{{ image['author_id'] }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Upload date</td>
|
||||
<td><span class="time">{{ image['created_at'] }}</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Filename</td>
|
||||
<td>{{ image['file_name'] }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>File size</td>
|
||||
<td>{{ file_size }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% if exif %}
|
||||
<div class="image-info">
|
||||
<div class="image-info__header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
|
||||
<path d="M14.95 7.879l-.707-.707a1 1 0 0 1 1.414-1.415l.707.707 1.414-1.414-2.828-2.828L2.222 14.95l2.828 2.828 1.414-1.414L5.05 14.95a1 1 0 0 1 1.414-1.414L7.88 14.95l1.414-1.414-.707-.708A1 1 0 0 1 10 11.414l.707.707 1.414-1.414-1.414-1.414a1 1 0 0 1 1.414-1.414l1.415 1.414 1.414-1.414zM.808 13.536L13.536.808a2 2 0 0 1 2.828 0l2.828 2.828a2 2 0 0 1 0 2.828L6.464 19.192a2 2 0 0 1-2.828 0L.808 16.364a2 2 0 0 1 0-2.828z"></path>
|
||||
</svg>
|
||||
<h2>Metadata</h2>
|
||||
{% if exif %}
|
||||
{% for tag in exif %}
|
||||
<div class="image-info">
|
||||
{% if tag == 'Photographer' %}
|
||||
<div class="image-info__header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -2 24 24" fill="currentColor">
|
||||
<path d="M3.534 10.07a1 1 0 1 1 .733 1.86A3.579 3.579 0 0 0 2 15.26V17a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1.647a3.658 3.658 0 0 0-2.356-3.419 1 1 0 1 1 .712-1.868A5.658 5.658 0 0 1 14 15.353V17a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3v-1.74a5.579 5.579 0 0 1 3.534-5.19zM7 0a4 4 0 0 1 4 4v2a4 4 0 1 1-8 0V4a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v2a2 2 0 1 0 4 0V4a2 2 0 0 0-2-2z"></path>
|
||||
</svg>
|
||||
<h2>Photographer</h2>
|
||||
</div>
|
||||
{% elif tag == 'Camera' %}
|
||||
<div class="image-info__header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
|
||||
<path d="M5.676 5H4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1.676l-.387-1.501A2.002 2.002 0 0 0 12 2H8a2 2 0 0 0-1.937 1.499L5.676 5zm-1.55-2C4.57 1.275 6.136 0 8 0h4a4.002 4.002 0 0 1 3.874 3H16a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h.126zM10 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
|
||||
</svg>
|
||||
<h2>Camera</h2>
|
||||
</div>
|
||||
{% elif tag == 'Software' %}
|
||||
<div class="image-info__header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
|
||||
<path d="M2 13v1h3V2H2v9h1v2H2zM1 0h5a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm9 3h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm0 2v6h8V5h-8zm2 9h4a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
<h2>Software</h2>
|
||||
</div>
|
||||
{% elif tag == 'Photo' %}
|
||||
<div class="image-info__header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
|
||||
<path d="M14 8.322V2H2v12h3.576l3.97-5.292A3 3 0 0 1 14 8.322zm0 3.753l-1.188-2.066a1 1 0 0 0-1.667-.101L8.076 14H14v-1.925zM14 16H2v2h12v-2zM2 0h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm4 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
|
||||
</svg>
|
||||
<h2>Photo</h2>
|
||||
</div>
|
||||
{% elif tag == 'File' %}
|
||||
<div class="image-info__header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
|
||||
<path d="M10.298 2H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4.961L10.298 2zM3 0h8l5 4v13a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3z"></path>
|
||||
</svg>
|
||||
<h2>File</h2>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="image-info__header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
|
||||
<path d="M14.95 7.879l-.707-.707a1 1 0 0 1 1.414-1.415l.707.707 1.414-1.414-2.828-2.828L2.222 14.95l2.828 2.828 1.414-1.414L5.05 14.95a1 1 0 0 1 1.414-1.414L7.88 14.95l1.414-1.414-.707-.708A1 1 0 0 1 10 11.414l.707.707 1.414-1.414-1.414-1.414a1 1 0 0 1 1.414-1.414l1.415 1.414 1.414-1.414zM.808 13.536L13.536.808a2 2 0 0 1 2.828 0l2.828 2.828a2 2 0 0 1 0 2.828L6.464 19.192a2 2 0 0 1-2.828 0L.808 16.364a2 2 0 0 1 0-2.828z"></path>
|
||||
</svg>
|
||||
<h2>{{tag}}</h2>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="image-info__content">
|
||||
<table>
|
||||
{% for subtag in exif[tag] %}
|
||||
<tr>
|
||||
<td>{{subtag}}</td>
|
||||
{% if exif[tag][subtag]['formatted'] %}
|
||||
{% if exif[tag][subtag]['type'] == 'date' %}
|
||||
<td><span class="time">{{exif[tag][subtag]['formatted']}}</span></td>
|
||||
{% else %}
|
||||
<td>{{exif[tag][subtag]['formatted']}}</td>
|
||||
{% endif %}
|
||||
{% elif exif[tag][subtag]['raw'] %}
|
||||
<td>{{exif[tag][subtag]['raw']}}</td>
|
||||
{% else %}
|
||||
<td class="empty-table">sad noises</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-info__content">
|
||||
{% for tag in exif %}
|
||||
<p>{{ tag }}: {{ exif[tag] }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue