fallback to original image if smaller images do not exist

Author: jwcooper

_includes/downloads/board_image.html

@@ -0,0 +1,15 @@
+{% for static_file in site.static_files %}
+  {% assign small_image = "/assets/images/boards/small/" | append: include.board_image %}
+  {% if static_file.path == small_image %}
+    {% assign has_responsive_images = true %}
+  {% endif %}
+{% endfor %}
+{% if has_responsive_images %}
+  <img srcset="{{ small_image | relative_url }} 300w,
+               {{ "/assets/images/boards/large/" | append: include.board_image | relative_url }} 700w"
+       sizes="(max-width: 1024px) 700px,
+              300px"
+       src="{{ "/assets/images/boards/original/" | append: include.board_image | relative_url }}" alt="Image of Board">
+{% else %}
+  <img src="{{ "/assets/images/boards/original/" | append: include.board_image | relative_url }}" alt="Image of Board">
+{% endif %}

_layouts/download.html

@@ -8,7 +8,17 @@ <h3>by {{ page.manufacturer }}</h3>
   <div class="download-section">
     <div class="details">
       <div class="section">
-        <img src="{{ "/assets/images/boards/large/" | append: page.board_image | relative_url }}" alt="Image of Board">
+        {% for static_file in site.static_files %}
+          {% assign large_image = "/assets/images/boards/large/" | append: page.board_image %}
+          {% if static_file.path == large_image %}
+            {% assign has_responsive_images = true %}
+          {% endif %}
+        {% endfor %}
+        {% if has_responsive_images %}
+          <img src="{{ large_image | relative_url }}" alt="Image of Board">
+        {% else %}
+          <img src="{{ "/assets/images/boards/original/" | append: page.board_image | relative_url }}" alt="Image of Board">
+        {% endif %}
         <p>
           {{ content }}
         </p>

blinka.html

@@ -61,7 +61,7 @@ <h1>Blinka</h1>
                              {{ "/assets/images/boards/large/" | append: board.board_image | relative_url }} 700w"
                      sizes="(max-width: 1024px) 700px,
                             300px"
-                     src="{{ "/assets/images/boards/original" | append: info.board_image | relative_url }}" alt="Image of Board">
+                     src="{{ "/assets/images/boards/original/" | append: info.board_image | relative_url }}" alt="Image of Board">
               </div>
               <div class="details">
                 <h3>{{ board.name }}</h3>

downloads.html

@@ -72,11 +72,7 @@ <h1>Downloads</h1>
         <a href="{{ info.url | relative_url }}">
           <div>
             <div class="img-responsive-4by3">
-              <img srcset="{{ "/assets/images/boards/small/" | append: info.board_image | relative_url }} 300w,
-                           {{ "/assets/images/boards/large/" | append: info.board_image | relative_url }} 700w"
-                   sizes="(max-width: 1024px) 700px,
-                          300px"
-                   src="{{ "/assets/images/boards/original" | append: info.board_image | relative_url }}" alt="Image of Board">
+              {% include downloads/board_image.html board_image=info.board_image %}
             </div>
             <div class="details">
               <h3>{{ info.name | default: board.id }}</h3>
@@ -102,11 +98,7 @@ <h3>{{ info.name | default: board.id }}</h3>
           <a href="{{ board.url | relative_url }}">
             <div>
               <div class="img-responsive-4by3">
-                <img srcset="{{ "/assets/images/boards/small/" | append: board.board_image | relative_url }} 300w,
-                             {{ "/assets/images/boards/large/" | append: board.board_image | relative_url }} 700w"
-                     sizes="(max-width: 1024px) 700px,
-                            300px"
-                     src="{{ "/assets/images/boards/original" | append: board.board_image | relative_url }}" alt="Image of Board">
+                {% include downloads/board_image.html board_image=board.board_image %}
               </div>
               <div class="details">
                 <h3>{{ board.name }}</h3>