♿ mobile images

comics_data.py

@@ -23,6 +23,7 @@ COMICS = [
         'number': 1,
         'title': 'First Comic',
         'filename': 'comic-001.jpg',
+        'mobile_filename': 'comic-001-mobile.jpg',  # Optional: mobile version of the comic
         'date': '2025-01-01',
         'alt_text': 'The very first comic',
         'author_note': 'This is where your comic journey begins!',

static/js/comic-nav.js

@@ -67,10 +67,7 @@
 
         // Update image and its link
         const comicImageDiv = document.querySelector('.comic-image');
-        const img = comicImageDiv.querySelector('img');
+        updateComicImage(comicImageDiv, comic, title);
-        img.src = `/static/images/comics/${comic.filename}`;
-        img.alt = title;
-        img.title = comic.alt_text;
 
         // Update or create/remove the link wrapper
         updateComicImageLink(comic.number);
@@ -101,15 +98,47 @@
         history.pushState({ comicId: comic.number }, '', `/comic/${comic.number}`);
     }
 
+    // Update or create comic image with optional mobile version
+    function updateComicImage(comicImageDiv, comic, title) {
+        // Clear all existing content
+        comicImageDiv.innerHTML = '';
+
+        // Create new image element(s)
+        if (comic.mobile_filename) {
+            // Create picture element with mobile source
+            const picture = document.createElement('picture');
+
+            const source = document.createElement('source');
+            source.media = '(max-width: 768px)';
+            source.srcset = `/static/images/comics/${comic.mobile_filename}`;
+
+            const img = document.createElement('img');
+            img.src = `/static/images/comics/${comic.filename}`;
+            img.alt = title;
+            img.title = comic.alt_text;
+
+            picture.appendChild(source);
+            picture.appendChild(img);
+            comicImageDiv.appendChild(picture);
+        } else {
+            // Create regular img element
+            const img = document.createElement('img');
+            img.src = `/static/images/comics/${comic.filename}`;
+            img.alt = title;
+            img.title = comic.alt_text;
+            comicImageDiv.appendChild(img);
+        }
+    }
+
     // Update comic image link for click navigation
     function updateComicImageLink(currentNumber) {
         const comicImageDiv = document.querySelector('.comic-image');
-        const img = comicImageDiv.querySelector('img');
+        const imgOrPicture = comicImageDiv.querySelector('picture') || comicImageDiv.querySelector('img');
 
         // Remove existing link if present
         const existingLink = comicImageDiv.querySelector('a');
         if (existingLink) {
-            existingLink.replaceWith(img);
+            existingLink.replaceWith(imgOrPicture);
         }
 
         // Add link if there's a next comic
@@ -120,8 +149,8 @@
                 e.preventDefault();
                 loadComic(currentNumber + 1);
             };
-            img.parentNode.insertBefore(link, img);
+            imgOrPicture.parentNode.insertBefore(link, imgOrPicture);
-            link.appendChild(img);
+            link.appendChild(imgOrPicture);
         }
     }
 

templates/comic.html

@@ -16,14 +16,32 @@
     <div class="comic-image">
         {% if comic.number < total_comics %}
         <a href="{{ url_for('comic', comic_id=comic.number + 1) }}">
+            {% 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 }}">
+            {% endif %}
         </a>
         {% else %}
-        <img src="{{ url_for('static', filename='images/comics/' + comic.filename) }}"
+            {% if comic.mobile_filename %}
-             alt="{{ comic.title if comic.title else '#' ~ comic.number }}"
+            <picture>
-             title="{{ comic.alt_text }}">
+                <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 }}">
+            {% endif %}
         {% endif %}
     </div>
 

templates/index.html

@@ -14,9 +14,18 @@
     </div>
 
     <div class="comic-image">
+        {% 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 }}">
+        {% endif %}
     </div>
 
     <div class="comic-navigation">