173 lines
8.9 KiB
HTML
173 lines
8.9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block meta_description %}{{ comic.alt_text }}{% if comic.author_note %} - {{ comic.author_note }}{% endif %}{% endblock %}
|
|
|
|
{% block og_image %}{{ site_url }}/static/images/thumbs/{{ comic.filename }}{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "ComicStory",
|
|
"name": "{{ comic.title if comic.title else '#' ~ comic.number }}",
|
|
"datePublished": "{{ comic.date }}",
|
|
"image": "{{ site_url }}/static/images/comics/{{ comic.filename }}",
|
|
"thumbnailUrl": "{{ site_url }}/static/images/thumbs/{{ comic.filename }}",
|
|
"description": "{{ comic.alt_text }}",
|
|
"isPartOf": {
|
|
"@type": "ComicSeries",
|
|
"name": "{{ comic_name }}",
|
|
"url": "{{ site_url }}"
|
|
},
|
|
"position": "{{ comic.number }}",
|
|
"url": "{{ site_url }}/comic/{{ comic.number }}"
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- ARIA live region for screen reader announcements -->
|
|
<div aria-live="polite" aria-atomic="true" class="sr-only" id="comic-announcer"></div>
|
|
|
|
<div class="comic-container{% if comic.full_width %} comic-container-fullwidth{% endif %}{% if comic.plain %} comic-container-plain{% endif %}" data-comic-number="{{ comic.number }}" data-total-comics="{{ total_comics }}">
|
|
{% if not comic.plain %}
|
|
<div class="comic-header">
|
|
<h1>{{ comic.title if comic.title else '#' ~ comic.number }}</h1>
|
|
<p class="comic-date">{{ comic.date }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<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 %}
|
|
{# 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 }}"
|
|
loading="eager">
|
|
{% endif %}
|
|
</a>
|
|
{% 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 }}"
|
|
loading="eager">
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="comic-navigation">
|
|
<div class="nav-buttons">
|
|
{% if use_comic_nav_icons %}
|
|
{# Icon-based navigation #}
|
|
{% if comic.number > 1 %}
|
|
<a href="{{ url_for('comic', comic_id=1) }}" class="btn-icon-nav" aria-label="First">
|
|
<img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="">
|
|
</a>
|
|
<a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn-icon-nav" aria-label="Previous">
|
|
<img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="">
|
|
</a>
|
|
{% else %}
|
|
<span class="btn-icon-nav btn-icon-disabled" aria-label="First" aria-disabled="true">
|
|
<img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="">
|
|
</span>
|
|
<span class="btn-icon-nav btn-icon-disabled" aria-label="Previous" aria-disabled="true">
|
|
<img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="">
|
|
</span>
|
|
{% endif %}
|
|
|
|
<span class="comic-date-display">{{ comic.formatted_date }}</span>
|
|
|
|
{% if comic.number < total_comics %}
|
|
<a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn-icon-nav" aria-label="Next">
|
|
<img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="">
|
|
</a>
|
|
<a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn-icon-nav" aria-label="Latest">
|
|
<img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="">
|
|
</a>
|
|
{% else %}
|
|
<span class="btn-icon-nav btn-icon-disabled" aria-label="Next" aria-disabled="true">
|
|
<img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="">
|
|
</span>
|
|
<span class="btn-icon-nav btn-icon-disabled" aria-label="Latest" aria-disabled="true">
|
|
<img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="">
|
|
</span>
|
|
{% endif %}
|
|
{% else %}
|
|
{# Text-based navigation #}
|
|
{% if comic.number > 1 %}
|
|
<a href="{{ url_for('comic', comic_id=1) }}" class="btn btn-nav">First</a>
|
|
<a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn btn-nav">Previous</a>
|
|
{% else %}
|
|
<span class="btn btn-nav btn-disabled" aria-disabled="true">First</span>
|
|
<span class="btn btn-nav btn-disabled" aria-disabled="true">Previous</span>
|
|
{% endif %}
|
|
|
|
<span class="comic-date-display">{{ comic.formatted_date }}</span>
|
|
|
|
{% if comic.number < total_comics %}
|
|
<a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn btn-nav">Next</a>
|
|
<a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn btn-nav">Latest</a>
|
|
{% else %}
|
|
<span class="btn btn-nav btn-disabled" aria-disabled="true">Next</span>
|
|
<span class="btn btn-nav btn-disabled" aria-disabled="true">Latest</span>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% if embed_enabled or permalink_enabled %}
|
|
<div class="comic-share-section">
|
|
{% if permalink_enabled %}
|
|
<button class="btn-permalink{% if use_share_icons %} btn-with-icon{% endif %}" id="permalink-button" data-comic-number="{{ comic.number }}" aria-label="Copy permalink to this comic">
|
|
{% if use_share_icons %}<img src="{{ url_for('static', filename='images/icons/link.png') }}" alt="" class="btn-icon" aria-hidden="true">{% endif %}Copy Permalink
|
|
</button>
|
|
{% endif %}
|
|
{% if embed_enabled %}
|
|
<button class="btn-embed{% if use_share_icons %} btn-with-icon{% endif %}" id="embed-button" data-comic-number="{{ comic.number }}" aria-label="Get embed code for this comic">
|
|
{% if use_share_icons %}<img src="{{ url_for('static', filename='images/icons/embed.png') }}" alt="" class="btn-icon" aria-hidden="true">{% endif %}Share/Embed
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if comic.author_note %}
|
|
<div class="comic-transcript">
|
|
<h3>Author Note</h3>
|
|
{% if comic.author_note_is_html == True %}
|
|
<div>{{ comic.author_note|safe }}</div>
|
|
{% else %}
|
|
<p>{{ comic.author_note }}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|