Merge pull request #68 from johndoh/screenshots

Author: pabzm

_data/screenshots.json

@@ -4,6 +4,7 @@
         "author": "Aleksander Machniak",
         "desc": "Released with Roundcube version 1.4.0, Elastic is Roundcube's first official responsive skin. It has support for desktops, tablets and phones.",
         "devices": ["desktop", "tablet", "phone"],
+        "generated": 20240129,
         "banner-dark": true,
         "screenshots": [
             { "file": "mailbox_widescreen.png", "title": "Mailbox view" },
@@ -25,8 +26,11 @@
         "author": "FLINT / Büro für Gestaltung, Switzerland",
         "desc": "Released with Roundcube version 0.8.0, Larry provides visual impact thanks to its use of color and specially designed graphics.<br><i>Support deprecated as of Roundcube 1.6.0. Available via Composer.</i>",
         "devices": ["desktop"],
+        "generated": 20240129,
         "screenshots": [
-            { "file": "mailbox_widescreen.png", "title": "Three-paned mailbox view" },
+            { "file": "mailbox_widescreen.png", "title": "Three-paned mailbox view (vertical)" },
+            { "file": "mailbox_desktop.png", "title": "Three-paned mailbox view (horizontal)" },
+            { "file": "mailbox_list.png", "title": "List only mailbox view" },
             { "file": "viewmail.png", "title": "Message viewer with privacy protection" },
             { "file": "mailbox_cn.png", "title": "Multilingual display" },
             { "file": "compose.png", "title": "Compose HTML mails with attachments" },
@@ -44,8 +48,11 @@
         "author": "The Roundcube Dev Team",
         "desc": "Formally known as Default, renamed to Classic as of Roundcube version 0.8.0, this is Roundcube's original skin.<br><i>Support deprecated as of Roundcube 1.4.0. Available via Composer.</i>",
         "devices": ["desktop"],
+        "generated": 20240129,
         "screenshots": [
-            { "file": "mailbox_widescreen.png", "title": "Three-paned mailbox view" },
+            { "file": "mailbox_widescreen.png", "title": "Three-paned mailbox view (vertical)" },
+            { "file": "mailbox_desktop.png", "title": "Three-paned mailbox view (horizontal)" },
+            { "file": "mailbox_list.png", "title": "List only mailbox view" },
             { "file": "viewmail.png", "title": "Message viewer with privacy protection" },
             { "file": "mailbox_cn.png", "title": "Multilingual display" },
             { "file": "compose.png", "title": "Compose HTML mails with attachments" },

index.html

@@ -11,11 +11,8 @@
             </div>
             <div class="image">
                 {% assign skin = site.data.screenshots | first | first %}
-                {% if site.data.screenshots[skin]['banner-dark'] %}
-                    <a href="/screens"><img src="/screens/skins/{{ skin }}/banner.png" data-rc-dark="/screens/skins/{{ site.data.screenshots | first | first }}/banner_dark.png" width="647" height="390" id="bannerimg" class="img-fluid" alt="Welcome Roundcube Webmail"></a>
-                {% else %}
-                    <a href="/screens"><img src="/screens/skins/{{ skin }}/banner.png" width="647" height="390" id="bannerimg" class="img-fluid" alt="Welcome Roundcube Webmail"></a>
-                {% endif %}
+                {% assign generated = site.data.screenshots[skin]['generated'] %}
+                <a href="/screens"><img src="/screens/skins/{{ skin }}/banner.png?g={{ generated }}" {% if site.data.screenshots[skin]['banner-dark'] %}data-rc-dark="/screens/skins/{{ skin }}/banner_dark.png?g={{ generated }}"{% endif %} width="647" height="390" id="bannerimg" class="img-fluid" alt="Welcome Roundcube Webmail"></a>
             </div>
             <div class="download text-center d-flex flex-column justify-content-center justify-content-lg-start align-items-center pt-xl-4">
                 <a href="/download" class="btn rc-icon btn-rc-download btn-lg" title="Download now!">Download</a>

screens/index.html

@@ -30,7 +30,7 @@ <h2 id="{{ dir }}" class="mb-0">{{ params.name }} <a class="anchor" href="#{{ di
             <div class="tab-pane fade {% if forloop.first %} show active {% endif %}" id="{{ dir }}-{{ device }}" role="tabpanel" {% if params.devices.size > 1 %}aria-labelledby="{{ dir }}-{{ device }}-tab"{% endif %}>
                 <ul id="screenshots-{{ dir }}-{{ device }}" class="screens p-0 w-100 mt-3">
                     {% for screenshot in params.screenshots %}
-                        <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-{{ dir }}-{{ device }}-{{ forloop.index }}" class="d-inline-block text-center" href="#" title="{{ screenshot.title }}" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/{{ dir }}/{{ device }}/thumbs/{{ screenshot.file }}" height="97" alt="{{ screenshot.title }}"></a></li>
+                        <li class="m-1 d-inline-block img-thumbnail"><a id="screenshots-{{ dir }}-{{ device }}-{{ forloop.index }}" class="d-inline-block text-center" href="#" title="{{ screenshot.title }}" data-bs-toggle="modal" data-bs-target="#viewer"><img class="mx-auto" src="/screens/skins/{{ dir }}/{{ device }}/thumbs/{{ screenshot.file }}?g={{ params.generated }}" height="97" alt="{{ screenshot.title }}"></a></li>
                     {% endfor %}
                 </ul>
             </div>