diff options
| author | Brian Picciano <mediocregopher@gmail.com> | 2018-09-29 15:52:27 -0400 |
|---|---|---|
| committer | Brian Picciano <mediocregopher@gmail.com> | 2018-09-29 15:52:27 -0400 |
| commit | 5cfce76ac1a3219fc30ae3227d1c912dd7122508 (patch) | |
| tree | 58fc95cf2f114f80ac02d0797c71b605f61e0526 /_includes/image.html | |
| parent | b3e56a081c1060558d8254deb9d7e4223c4a2b0f (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.html | 24 |
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> |