caddec2fcd
This PR allows the `figure` to accept url as the src of the`<img>`.
currently, it only supports the relative path.
```
// raw img
<img src="{{ image.url }}" alt="{{ image.description }}">
// assign url to figure
{% assign image_url = image.url %}
{% include figure.liquid url=image_url class="img-fluid rounded z-depth-1" zoomable=true %}
```
---------
Signed-off-by: ifuryst <ifuryst@gmail.com>
Co-authored-by: George <31376482+george-gca@users.noreply.github.com>
85 lines
2.8 KiB
Plaintext
85 lines
2.8 KiB
Plaintext
{% assign img_path = include.path | remove: '.jpg' | remove: '.jpeg' | remove: '.png' | remove: '.tiff' | remove: '.gif' %}
|
|
{% assign parts = include.path | split: '.' %}
|
|
{% assign ext = parts.last %}
|
|
|
|
<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"
|
|
{% if ext == '.jpg' or ext == '.jpeg' or ext == '.png' or ext == '.tiff' or ext == '.gif' %}
|
|
srcset="{% for i in site.imagemagick.widths %}{{ img_path | relative_url }}-{{ i }}.webp {{i}}w,{% endfor %}"
|
|
type="image/webp"
|
|
{% else %}
|
|
srcset="{{ include.path | relative_url }}"
|
|
{% endif %}
|
|
{% if include.sizes %}
|
|
sizes="{{include.sizes}}"
|
|
{% else %}
|
|
sizes="95vw"
|
|
{% endif %}
|
|
>
|
|
{% endif %}
|
|
<img
|
|
src="{% if include.url %}{{ include.url }}{% elsif 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 %}
|
|
{% if include.loading %}
|
|
loading="{{ include.loading }}"
|
|
{% elsif site.lazy_loading_images %}
|
|
loading="lazy"
|
|
{% endif %}
|
|
onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
|
|
>
|
|
</picture>
|
|
|
|
{% if include.caption %}
|
|
<figcaption class="caption">{{ include.caption }}</figcaption>
|
|
{% endif %}
|
|
</figure>
|