summaryrefslogtreecommitdiff
path: root/static/src/_includes/image.html
diff options
context:
space:
mode:
authorBrian Picciano <mediocregopher@gmail.com>2021-07-31 11:35:39 -0600
committerBrian Picciano <mediocregopher@gmail.com>2021-07-31 11:35:39 -0600
commitf1998c321a4eec6d75b58d84aa8610971bf21979 (patch)
treea90783eb296cc50e1c48433f241624f26b99be27 /static/src/_includes/image.html
parent03a35dcc38b055f15df160bd300969e3b703d4b1 (diff)
move static files into static sub-dir, refactor nix a bit
Diffstat (limited to 'static/src/_includes/image.html')
-rw-r--r--static/src/_includes/image.html43
1 files changed, 43 insertions, 0 deletions
diff --git a/static/src/_includes/image.html b/static/src/_includes/image.html
new file mode 100644
index 0000000..8875050
--- /dev/null
+++ b/static/src/_includes/image.html
@@ -0,0 +1,43 @@
+<div style="
+ box-sizing: border-box;
+ text-align: center;
+ padding-left: 2em;
+ padding-right: 2em;
+ margin-bottom: 1em;
+ {%- if include.float %}
+ float: {{ include.float }};
+ {% endif -%}
+ {%- if include.float or include.inline %}
+ max-width: 49%;
+ {% endif -%}
+ {%- if include.inline %}
+ display: inline-block;
+ {% endif -%}
+ ">
+ <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;"
+ {% if include.width < 1000 %}
+ src="/img/{{ include.dir }}/{{ include.file }}"
+ {% else %}
+ src="/img/{{ include.dir }}/1000px/{{ include.file }}"
+ {% endif %}
+ alt="{{ include.descr }}" />
+ </picture>
+ </a>
+ {%- if include.descr %}<br/><em>{{ include.descr }}</em>{%- endif %}
+</div>