mi/sunday
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ multi-image comics

Browse Source
This commit is contained in:
mi
2025-11-15 18:52:14 +10:00
parent f71720c156
commit 91b6d4efeb
7 changed files with 356 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
templates/comic.html
View File

@@ -37,36 +37,48 @@
</div>
{% endif %}
<div class="comic-image" id="comic-image-focus" tabindex="-1">
{% if comic.number < total_comics %}
<a href="{{ url_for('comic', comic_id=comic.number + 1) }}" aria-label="Click to view next comic">
{% if comic.mobile_filename %}
<picture>
<source media="(max-width: 768px)" srcset="{{ url_for('static', filename='images/comics/' + comic.mobile_filename) }}">
<img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
title="{{ comic.alt_text }}">
</picture>
{% else %}
<img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
title="{{ comic.alt_text }}"
loading="eager">
{% endif %}
</a>
<div class="comic-image{% if comic.is_multi_image %} comic-image-multi{% endif %}" id="comic-image-focus" tabindex="-1">
{% if comic.is_multi_image %}
{# Multi-image layout (webtoon style) - no click-through on individual images #}
{% for i in range(comic.filenames|length) %}
<img src="{% if loop.first %}{{ url_for('static', filename='images/comics/' + comic.filenames[i]) }}{% endif %}"
{% if not loop.first %}data-src="{{ url_for('static', filename='images/comics/' + comic.filenames[i]) }}" class="lazy-load"{% endif %}
alt="{{ comic.alt_texts[i] }}"
title="{{ comic.alt_texts[i] }}"
loading="{% if loop.first %}eager{% else %}lazy{% endif %}">
{% endfor %}
{% else %}
{% if comic.mobile_filename %}
<picture>
<source media="(max-width: 768px)" srcset="{{ url_for('static', filename='images/comics/' + comic.mobile_filename) }}">
{# Single image with click-through to next comic #}
{% if comic.number < total_comics %}
<a href="{{ url_for('comic', comic_id=comic.number + 1) }}" aria-label="Click to view next comic">
{% if comic.mobile_filename %}
<picture>
<source media="(max-width: 768px)" srcset="{{ url_for('static', filename='images/comics/' + comic.mobile_filename) }}">
<img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
title="{{ comic.alt_text }}">
</picture>
{% else %}
<img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
title="{{ comic.alt_text }}">
</picture>
title="{{ comic.alt_text }}"
loading="eager">
{% endif %}
</a>
{% else %}
<img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
title="{{ comic.alt_text }}"
loading="eager">
{% if comic.mobile_filename %}
<picture>
<source media="(max-width: 768px)" srcset="{{ url_for('static', filename='images/comics/' + comic.mobile_filename) }}">
<img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
title="{{ comic.alt_text }}">
</picture>
{% else %}
<img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
title="{{ comic.alt_text }}"
loading="eager">
{% endif %}
{% endif %}
{% endif %}
</div>

29
templates/index.html
View File

@@ -16,18 +16,29 @@
<p class="comic-date">{{ comic.date }}</p>
</div>
<div class="comic-image" id="comic-image-focus" tabindex="-1">
{% if comic.mobile_filename %}
<picture>
<source media="(max-width: 768px)" srcset="{{ url_for('static', filename='images/comics/' + comic.mobile_filename) }}">
<div class="comic-image{% if comic.is_multi_image %} comic-image-multi{% endif %}" id="comic-image-focus" tabindex="-1">
{% if comic.is_multi_image %}
{# Multi-image layout (webtoon style) - no click-through on individual images #}
{% for i in range(comic.filenames|length) %}
<img src="{% if loop.first %}{{ url_for('static', filename='images/comics/' + comic.filenames[i]) }}{% endif %}"
{% if not loop.first %}data-src="{{ url_for('static', filename='images/comics/' + comic.filenames[i]) }}" class="lazy-load"{% endif %}
alt="{{ comic.alt_texts[i] }}"
title="{{ comic.alt_texts[i] }}"
loading="{% if loop.first %}eager{% else %}lazy{% endif %}">
{% endfor %}
{% else %}
{% if comic.mobile_filename %}
<picture>
<source media="(max-width: 768px)" srcset="{{ url_for('static', filename='images/comics/' + comic.mobile_filename) }}">
<img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
title="{{ comic.alt_text }}">
</picture>
{% else %}
<img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
title="{{ comic.alt_text }}">
</picture>
{% else %}
<img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
title="{{ comic.alt_text }}">
{% endif %}
{% endif %}
</div>