mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 11:36:16 +00:00
Generate thumbnails on the fly with PIL
Removed the need of having 3 copies of an image Fixes more Sass(y) stuff
This commit is contained in:
parent
2455d3f88c
commit
a10a5a8793
10 changed files with 149 additions and 76 deletions
|
|
@ -1,13 +1,13 @@
|
|||
{% extends 'layout.html' %}
|
||||
|
||||
{% block header %}
|
||||
<img src="/api/uploads/original/{{ image['file_name'] }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
|
||||
<img src="/api/uploads/{{ image['file_name'] }}/1000" alt="leaves" onload="imgFade(this)" style="display: none;"/>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="image__fullscreen">
|
||||
<img
|
||||
src="/api/uploads/original/{{ image['file_name'] }}"
|
||||
src="/api/uploads/{{ image['file_name'] }}/0"
|
||||
onload="imgFade(this)" style="display:none;"
|
||||
onerror="this.style.display='none'"
|
||||
/>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<div class="image__container">
|
||||
<img
|
||||
class="image__item"
|
||||
src="/api/uploads/original/{{ image['file_name'] }}"
|
||||
src="/api/uploads/{{ image['file_name'] }}/1000"
|
||||
onload="imgFade(this)" style="display:none;"
|
||||
onerror="this.src='/static/images/error.png'"
|
||||
/>
|
||||
|
|
@ -62,26 +62,62 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% if image['alt'] != '' %}
|
||||
<div class="image__info">
|
||||
<div class="image__info-header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2.5 24 24" fill="currentColor">
|
||||
<path d="M3.656 17.979A1 1 0 0 1 2 17.243V15a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H8.003l-4.347 2.979zm.844-3.093a.536.536 0 0 0 .26-.069l2.355-1.638A1 1 0 0 1 7.686 13H12a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v5c0 .54.429.982 1 1 .41.016.707.083.844.226.128.134.135.36.156.79.003.063.003.177 0 .37a.5.5 0 0 0 .5.5z"></path><path d="M16 10.017a7.136 7.136 0 0 0 0 .369v-.37c.02-.43.028-.656.156-.79.137-.143.434-.21.844-.226.571-.018 1-.46 1-1V3a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1H5V2a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2v2.243a1 1 0 0 1-1.656.736L16 13.743v-3.726z"></path>
|
||||
</svg>
|
||||
<h2>Alt</h2>
|
||||
</div>
|
||||
<div class="image__info-content">
|
||||
<p>{{ image['alt'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if image['description'] != '' %}
|
||||
<div class="image__info">
|
||||
<h2>Description</h2>
|
||||
<p>{{ image['description'] }}</p>
|
||||
<div class="image__info-header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
|
||||
<path d="M3 0h10a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3zm2 1h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2zm0 12h2a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2z"></path>
|
||||
</svg>
|
||||
<h2>Description</h2>
|
||||
</div>
|
||||
<div class="image__info-content">
|
||||
<p>{{ image['description'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="image__info">
|
||||
<h2>Info</h2>
|
||||
<p>Filename: {{ image['file_name'] }}</p>
|
||||
<p>Image ID: {{ image['id'] }}</p>
|
||||
<p>Author: {{ image['author_id'] }}</p>
|
||||
<p>Upload date: {{ image['created_at'] }}</p>
|
||||
<p>Dimensions: {{ file['width'] }}x{{ file['height'] }}</p>
|
||||
<div class="image__info-header">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
|
||||
<path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
|
||||
</svg>
|
||||
<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: {{ image['created_at'] }}</p>
|
||||
{% if file is not false %}
|
||||
<p>Dimensions: {{ file['width'] }}x{{ file['height'] }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% if exif is not false %}
|
||||
<div class="image__info">
|
||||
<h2>Exif</h2>
|
||||
{% for tag in exif %}
|
||||
<p>{{ tag }}: {{ exif[tag] }}</p>
|
||||
{% endfor %}
|
||||
<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>
|
||||
</div>
|
||||
<div class="image__info-content">
|
||||
{% for tag in exif %}
|
||||
<p>{{ tag }}: {{ exif[tag] }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<h2>{{ image['file_name'] }}</h2>
|
||||
</div>
|
||||
<span class="gallery__item-filter"></span>
|
||||
<img class="gallery__item-image" src="/api/uploads/original/{{ image['file_name'] }}" onload="imgFade(this)" style="display:none;">
|
||||
<img class="gallery__item-image" src="/api/uploads/{{ image['file_name'] }}/400" onload="imgFade(this)" style="display:none;">
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="notification-list"></div>
|
||||
<nav id="navRoot">
|
||||
<div>
|
||||
<a href="{{url_for('gallery.index')}}">
|
||||
|
|
@ -66,7 +67,6 @@
|
|||
|
||||
document.onscroll = function() {
|
||||
document.querySelector('header').style.opacity = `${1 - window.scrollY / 621}`;
|
||||
//document.querySelector('header').style.height = `calc(50vh - ${window.scrollY / 2}px)`;
|
||||
document.querySelector('header').style.top = `-${window.scrollY / 5}px`;
|
||||
|
||||
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue