312cbdb4c5
Addressing #1395 but with a different solution from #1478, using semantic versioning based on implementation found [here](https://distresssignal.org/busting-css-cache-with-jekyll-md5-hash). Implemented a way of calculating the hash for both a single file or directory. This way we can calculate the hash for when there is a change in the `_sass` dir, for example, or in the contents of a single file. Examples of generated outputs of the plugin: ``` /al-folio/assets/css/main.css?d41d8cd98f00b204e9800998ecf8427e /al-folio/assets/js/theme.js?96d6b3e1c3604aca8b6134c7afdd5db6 /al-folio/assets/js/dark_mode.js?9b17307bb950ffa2e34be0227f53558f /al-folio/assets/js/no_defer.js?d633890033921b33e0ceb13d22340a9c /al-folio/assets/js/common.js?acdb9690d7641b2f8d40529018c71a01 /al-folio/assets/js/copy_code.js?c9d9dd48933de3831b3ee5ec9c209cac /al-folio/assets/img/prof_pic.jpg?974957d202f671e4fa6700c04e68deae ``` Signed-off-by: George Araujo <george.gcac@gmail.com>
36 lines
1.5 KiB
HTML
36 lines
1.5 KiB
HTML
{%- assign img_path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" -%}
|
|
|
|
<figure>
|
|
|
|
<picture>
|
|
{% if site.imagemagick.enabled %}
|
|
{% for i in site.imagemagick.widths -%}
|
|
<source
|
|
class="responsive-img-srcset"
|
|
media="(max-width: {{ i }}px)"
|
|
srcset="{{ img_path | relative_url }}-{{ i }}.webp"
|
|
/>
|
|
{% endfor -%}
|
|
{% endif %}
|
|
|
|
<!-- Fallback to the original file -->
|
|
<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="auto"{% 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>
|