jepler/circuitpython-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fallback to original image if smaller images do not exist

Browse source
This commit is contained in:
Justin Cooper 2019-06-05 12:57:15 -05:00
parent 74d51fe51d
commit de28182fde
4 changed files with 29 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
_includes/downloads/board_image.html Normal file
View file

@ -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 %}

12
_layouts/download.html
View file

@ -8,7 +8,17 @@ layout: default
<div class="download-section"> <div class="download-section">
<div class="details"> <div class="details">
<div class="section"> <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> <p>
{{ content }} {{ content }}
</p> </p>

2
blinka.html
View file

@ -61,7 +61,7 @@ permalink: /blinka
{{ "/assets/images/boards/large/" | append: board.board_image | relative_url }} 700w" {{ "/assets/images/boards/large/" | append: board.board_image | relative_url }} 700w"
sizes="(max-width: 1024px) 700px, sizes="(max-width: 1024px) 700px,
300px" 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>
<div class="details"> <div class="details">
<h3>{{ board.name }}</h3> <h3>{{ board.name }}</h3>

12
downloads.html
View file

@ -72,11 +72,7 @@ permalink: /downloads
<a href="{{ info.url | relative_url }}"> <a href="{{ info.url | relative_url }}">
<div> <div>
<div class="img-responsive-4by3"> <div class="img-responsive-4by3">
<img srcset="{{ "/assets/images/boards/small/" | append: info.board_image | relative_url }} 300w, {% include downloads/board_image.html board_image=info.board_image %}
{{ "/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">
</div> </div>
<div class="details"> <div class="details">
<h3>{{ info.name | default: board.id }}</h3> <h3>{{ info.name | default: board.id }}</h3>
@ -102,11 +98,7 @@ permalink: /downloads
<a href="{{ board.url | relative_url }}"> <a href="{{ board.url | relative_url }}">
<div> <div>
<div class="img-responsive-4by3"> <div class="img-responsive-4by3">
<img srcset="{{ "/assets/images/boards/small/" | append: board.board_image | relative_url }} 300w, {% include downloads/board_image.html board_image=board.board_image %}
{{ "/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">
</div> </div>
<div class="details"> <div class="details">
<h3>{{ board.name }}</h3> <h3>{{ board.name }}</h3>