7c2e1c2c6c
In this pull request, I've made adjustments to the image element's handling of dimension properties. Previously, `min-width`, `min-height`, `max-width`, and `max-height` were incorrectly placed as HTML attributes on the `<img>` tag, which is not supported for these CSS properties. This oversight could lead to issues with image responsiveness and layout stability. Changes: - Moved `min-width`, `min-height`, `max-width`, and `max-height` properties into the `style` attribute of the `<img>` tag. This change ensures that these properties are correctly applied and recognized as CSS properties, enhancing the responsiveness and flexibility of our image displays. - Retained `width` and `height` as attributes on the `<img>` tag to maintain the intrinsic aspect ratio of images and help the browser allocate space before images are fully loaded, improving the page load experience. These adjustments will ensure that our images are more responsive and better adhere to the specified dimensions, improving the overall user experience for the template.
74 lines
2.4 KiB
Plaintext
74 lines
2.4 KiB
Plaintext
{% assign img_path = include.path | remove: '.jpg' | remove: '.jpeg' | remove: '.png' | remove: '.tiff' | remove: '.gif' %}
|
|
|
|
<figure
|
|
{% if include.slot %}
|
|
slot="{{ include.slot }}"
|
|
{% endif %}
|
|
>
|
|
<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'] or include['min-height'] or include['max-width'] or include['max-height'] %}
|
|
style="
|
|
{% 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 %}
|
|
"
|
|
{% 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>
|