fb294e3348
Fixes #1967 Update the way responsive images are used to only use one srcset, and add corresponding `sizes` attribute to the relevant layouts and templates. I did not go through and add `sizes` to all the example posts/projects. When `sizes` is not specified by the user, the `figure.html` template defaults to 95% the width of the viewport which should work fine for most cases; users can optimize further if they wish by feeding `sizes` into the template. Additionally: - Enabled support for .gif to .webp compression - fix error in jekyll-imagemagick config where all images were resized to be 800px or less. (for example img-1400.webp was actually only 800px wide, etc.) - added note about making sure imagemagick is installed before enabling it in responsive images section of `_config.yml`
35 lines
1.9 KiB
HTML
35 lines
1.9 KiB
HTML
{%- assign img_path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" | remove: ".gif" -%}
|
|
|
|
<figure>
|
|
<picture>
|
|
<!-- Auto scaling with imagemagick -->
|
|
<!-- See https://www.debugbear.com/blog/responsive-images#w-descriptors-and-the-sizes-attribute and
|
|
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images for info on defining 'sizes' for responsive images-->
|
|
{% if site.imagemagick.enabled %}
|
|
<source class = "responsive-img-srcset" srcset="
|
|
{% for i in site.imagemagick.widths -%}
|
|
{{ img_path | relative_url }}-{{ i }}.webp {{i}}w,
|
|
{% endfor -%}"
|
|
{% if include.sizes %} sizes="{{include.sizes}}" {% else %} sizes="95vw" {% endif %}
|
|
type="image/webp"/>
|
|
{% endif %}
|
|
<img
|
|
src="{% if include.cache_bust %}{{ include.path | relative_url | bust_file_cache }}{% else %}{{ include.path | relative_url }}{% endif %}"
|
|
{% if include.class %}class="{{ include.class }}"{% endif %}
|
|
{% if include.width %}width="{{ include.width }}"{% else %}width="100%"{% endif %}
|
|
{% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %}
|
|
{% if include.min-width %}min-width="{{ include.min-width }}"{% endif %}
|
|
{% if include.min-height %}min-height="{{ include.min-height }}"{% endif %}
|
|
{% if include.max-width %}max-width="{{ include.max-width }}"{% endif %}
|
|
{% if include.max-height %}max-height="{{ include.max-height }}"{% endif %}
|
|
{% if include.alt %}alt="{{ include.alt }}"{% endif %}
|
|
{% if include.title %}title="{{ include.title }}"{% endif %}
|
|
{% if include.zoomable %}data-zoomable{% endif %}
|
|
onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
|
|
/>
|
|
</picture>
|
|
|
|
{%- if include.caption -%}<figcaption class="caption">{{ include.caption }}</figcaption>{%- endif %}
|
|
|
|
</figure>
|