append_ext: true doesn't work

[parth-verma]

With append_ext: true, it is expected that images will be generated in the format image.png.webp. However, that is not the case

[GregJacobs82]

Agreed, this does not work for me either. It is outputting a image.webp, but not naming it correctly like it should image.png.webp

As a workaround, in my _includes/picture.html file, for the image source, I used filter | replace: '.png','.webp' " like this:

    <source srcset="{{ include.src | prepend: site.url | replace:'.png','.webp' | replace:'.jpg','.webp' }}" type="image/webp">

Full Example of my _includes/picture.html

<picture>
    <source srcset="{{ include.src | prepend: site.url | replace:'.png','.webp' | replace:'.jpg','.webp' }}" type="image/webp">
    <source srcset="{{ include.src | prepend: site.url }}" type="image/jpeg">
    <img
        src="{{ include.src | prepend: site.url }}"
        {% if include.alt %}alt="{{ include.alt }}"{% endif %}
        {% if include.title %}title="{{ include.title }}"{% endif %}
        {% if include.class %}class="{{ include.class }}"{% endif %}
        {% if include.height %}height="{{ include.height }}"{% endif %}
        {% if include.width %}width="{{ include.width }}"{% endif %}
        {% if include.style %}style="{{ include.style }}"{% endif %}
    >
</picture>

Example to use this include file:

{% include picture.html src="/assets/img/image.png" alt="My alt text!" %}

[felixd]

Agreed, this does not work for me either. It is outputting a image.webp, but not naming it correctly like it should image.png.webp

As a workaround, in my _includes/picture.html file, for the image source, I used filter | replace: '.png','.webp' " like this:

    <source srcset="{{ include.src | prepend: site.url | replace:'.png','.webp' | replace:'.jpg','.webp' }}" type="image/webp">

Full Example of my _includes/picture.html

<picture>
    <source srcset="{{ include.src | prepend: site.url | replace:'.png','.webp' | replace:'.jpg','.webp' }}" type="image/webp">
    <source srcset="{{ include.src | prepend: site.url }}" type="image/jpeg">
    <img
        src="{{ include.src | prepend: site.url }}"
        {% if include.alt %}alt="{{ include.alt }}"{% endif %}
        {% if include.title %}title="{{ include.title }}"{% endif %}
        {% if include.class %}class="{{ include.class }}"{% endif %}
        {% if include.height %}height="{{ include.height }}"{% endif %}
        {% if include.width %}width="{{ include.width }}"{% endif %}
        {% if include.style %}style="{{ include.style }}"{% endif %}
    >
</picture>

Example to use this include file:

{% include picture.html src="/assets/img/image.png" alt="My alt text!" %}

Neat workaround, going to use it on our webpage :)

FlameIT - Immersion Cooling