summaryrefslogtreecommitdiff
path: root/_includes/image.html
diff options
context:
space:
mode:
authorBrian Picciano <mediocregopher@gmail.com>2018-09-29 15:52:27 -0400
committerBrian Picciano <mediocregopher@gmail.com>2018-09-29 15:52:27 -0400
commit5cfce76ac1a3219fc30ae3227d1c912dd7122508 (patch)
tree58fc95cf2f114f80ac02d0797c71b605f61e0526 /_includes/image.html
parentb3e56a081c1060558d8254deb9d7e4223c4a2b0f (diff)
implement responsive image sizing for mr-worldwide posts (and all others going forward)
Diffstat (limited to '_includes/image.html')
-rw-r--r--_includes/image.html24
1 files changed, 21 insertions, 3 deletions
diff --git a/_includes/image.html b/_includes/image.html
index 4c5afc5..30af037 100644
--- a/_includes/image.html
+++ b/_includes/image.html
@@ -14,8 +14,26 @@
display: inline-block;
{% endif -%}
">
- <a href="/img/{{ include.src }}" target="_blank">
- <img style="max-height: 60vh;"
- src="/img/{{ include.src }}" alt="{{ include.descr }}" /></a>
+ <a href="/img/{{ include.dir }}/{{ include.file }}" target="_blank">
+ <picture>
+ {%- if include.width %}
+ {%- for targetWidth in site.img_widths reversed -%}
+ {% if include.width <= targetWidth %}{% continue %}{% endif %}
+ {%- if targetWidth > 1000 %}
+ <source media="(min-width: 1000px) and (min-resolution: {{ targetWidth | divided_by: 1000.0 }}dppx)"
+ {%- elsif targetWidth > 500 %}
+ <source media="(min-width: 500px), (min-resolution: 1.1dppx)"
+ {%- else %}
+ <source
+ {% endif %}
+ srcset="/img/{{ include.dir }}/{{ targetWidth }}px/{{ include.file }}"
+ >
+ {%- endfor %}
+ {%- endif %}
+ <img style="max-height: 60vh;"
+ src="/img/{{ include.dir }}/{{ include.file }}"
+ alt="{{ include.descr }}" />
+ </picture>
+ </a>
{%- if include.descr %}<br/><em>{{ include.descr }}</em>{%- endif %}
</div>