image shortcode supporting both jpg and webp images

phiw13 · 2021-03-05 02:36:06

As TXP (4.8.5-dev) has currently no support for linking a WebP image to its jpg or PNG equivalent (both uploaded through TXP) I am trying by using (with help of the jcr_image_custom plugin) a custom field on the image panel. I can then “link” both formats using a field named webp_ID associates the ID of the webp image with its equivalent. This part works fine.

Next I am trying to build a shortcode to insert all this. I have something working only partly. It inserts the webp ID correctly for the webp <source /> line, but then inserts still inserts the .webp image in the jpg <source /> line and in the <img /> line (in both cases the part using the smd_thumbnail code). Something is not cascading well, I suspect in my smd_thumbnail code.

Form code:

<txp:images id='<txp:custom_field name="article_image" />' sort='rand() asc' wraptag='' break='figure' limit='16'>
  <txp:smd_thumbnail type="pc1x"><picture>
  <!-- webp -->
    <source srcset="<txp:smd_thumbnail type='pc1x' id='<txp:jcr_image_custom name="webp_id" />'><txp:smd_thumbnail_info item='url' /></txp:smd_thumbnail> 1x, <txp:image_url id='<txp:jcr_image_custom name="webp_id" />' /> 2x" type="image/webp">
  <!-- jpg or png -->
    <source srcset="<txp:smd_thumbnail_info item='url' /> 1x, <txp:image_url /> 2x" type="<txp:image_info type='mime' />" />
    <img loading="lazy" src="<txp:smd_thumbnail_info item='url' />" alt="<txp:image_info type='alt' />" width="300" height="493">
    <figcaption><txp:image_info type="caption" escape="textile, p" /> </figcaption>
  </picture></txp:smd_thumbnail>
</txp:images>

Output:

<figure>
  <picture>
  <!-- webp -->
  <source srcset="http://test.local/images/pc1x/18.webp 1x, http://test.local/images/18.webp 2x" type="image/webp">
  <!-- jpg or png -->
  <source srcset="http://test.local/images/pc1x/18.webp 1x, http://test.local/images/5.jpg 2x" type="image/jpeg">
    <img loading="lazy" src="http://test.local/images/pc1x/18.webp" alt="Thing" width="330" height="493">
    <figcaption>Thing without name</figcaption>
</picture></figure>
<figure>…</figure>

(adding AVIF support will be the next step)

philwareham · 2021-03-05 11:38:29

For the second <source> line, I have this working successfully in a similar idea I’m using…

<source srcset="<txp:smd_thumbnail_info item="url" />, <txp:image_url /> 2x" type="<txp:image_info type="mime" />" />

…maybe the single quotes on item="url"?

phiw13 · 2021-03-05 11:41:59

philwareham wrote #329115:

…maybe the single quotes?

I thought I tried both, but maybe I misremember. I’ll verify that again when I am back in front of the iMac.

colak · 2021-03-05 15:17:17

philwareham wrote #329115:

…maybe the single quotes?

That’s what I thought too, but in a more general way.

Try

<txp:images id='<txp:custom_field name="article_image" />' sort="rand() asc" wraptag="" break="figure" limit="16">
  <txp:smd_thumbnail type="pc1x"><picture>
  <!-- webp -->
    <source srcset="<txp:smd_thumbnail type="pc1x" id='<txp:jcr_image_custom name="webp_id" />'><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail> 1x, <txp:image_url id='<txp:jcr_image_custom name="webp_id" />' /> 2x" type="image/webp">
  <!-- jpg or png -->
    <source srcset="<txp:smd_thumbnail_info item='url' /> 1x, <txp:image_url /> 2x" type="<txp:image_info type='mime' />" />
    <img loading="lazy" src="<txp:smd_thumbnail_info item="url" />" alt="<txp:image_info type="alt" />" width="300" height="493">
    <figcaption><txp:image_info type="caption" escape="textile, p" /> </figcaption>
  </picture></txp:smd_thumbnail>
</txp:images>

phiw13 · 2021-03-06 03:27:34

Thanks both for the suggestions, but unfortunately, I keep running into the same issue :-(.

The problem definitely comes from this piece of code:

 <txp:smd_thumbnail type="pc1x" id='<txp:jcr_image_custom name="webp_id" />'><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail>

It is as if the smd_thumbnail continues to think the webp ID must be used. I have at the moment no idea how to fix this.

Bloke · 2021-03-06 07:58:55

I suspect the plugin is misbehaving because you’re nesting calls to smd::thumbnail. When it encounters the id it will be setting the tag to ‘use this particular image’ and then won’t forget that image id when the inner thumbnail tag ends. Probably a leaky global or I need to restore the state of any surrounding tag after a nested one exits.

Try setting the contents of the ‘id’ version of the tag outside the other call in a variable:

<txp:variable name="webp_thumb" trim>
   <txp:smd_thumbnail type="pc1x" id='<txp:jcr_image_custom name="webp_id" />'><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail>
<\txp:variable>

And then use that variable inside your other smd_thumbnail tag to inject the fixed id image. I expect it’ll work then.

If it does I’ll see if I can fix this.

Last edited by Bloke (2021-03-06 08:00:03)

phiw13 · 2021-03-06 10:11:03

Bloke wrote #329130:

hold on a sec… fires up iMac… copy, paste… shuffle… reload webpage… view source…
:-)

success !

I suspect the plugin is misbehaving because you’re nesting calls to smd::thumbnail. When it encounters the id it will be setting the tag to ‘use this particular image’ and then won’t forget that image id when the inner thumbnail tag ends.

Yes I think that is what I was trying to express in my previous comment. That trick with a variable is working nicely. Thank you.

Current code:

<txp:images id='<txp:custom_field name="article_image" />' sort='rand() asc' wraptag='' break='figure' limit='16'>
<txp:variable name="webp_thumb" trim><txp:smd_thumbnail type="pc1x" id='<txp:jcr_image_custom name="webp_id" />'><txp:smd_thumbnail_info item="url" /></txp:smd_thumbnail></txp:variable>
  <txp:smd_thumbnail type="pc1x"><picture>
  <!-- .webp -->
  <source srcset="<txp:variable name="webp_thumb" /> 1x, <txp:image_url id='<txp:jcr_image_custom name="webp_id" />' /> 2x" type="image/webp">
  <!-- jpg or png -->
  <source srcset="<txp:smd_thumbnail_info item='url' /> 1x, <txp:image_url /> 2x" type="<txp:image_info type='mime' />">
  <img loading="lazy" src="<txp:smd_thumbnail_info item='url' />" alt="<txp:image_info type='alt' />" width="300" height="493">
  </picture></txp:smd_thumbnail>
<figcaption><txp:image_info type="caption" escape="textile, p" /></figcaption>
</txp:images>

the set displays six images (as referenced) and the HTML source is correct down the low-level fallback in the <img /> tag.

philwareham · 2021-03-06 10:40:12

Nice solution! Hopefully we will work out a system in 4.9 whereby you can have multiple formats of the same image ID – but for now that’s a very good compromise.

phiw13 · 2021-03-07 02:42:48

philwareham wrote #329135:

Nice solution! Hopefully we will work out a system in 4.9 whereby you can have multiple formats of the same image ID – but for now that’s a very good compromise.

Yes, such a mechanism would be useful.

One thing is needed: check if the .webp (or .avif) image actually exist, either in my code above or in your solution in this thread (or in a hypothetical TXP 4.9 solution). Otherwise you output a (partly) empty path or reference a non-existing image and serve a missing image icon to the user.

At the moment I have wrapped my WebP <source /> block in a <txp:if_variable /> conditional. Not sure what can be done with your code idea.

Last edited by phiw13 (2021-03-07 02:43:29)

philwareham · 2021-03-07 08:52:00

Yeah my code is an all or nothing. You set whether you want to use additional formats in a global variables form and then have to be diligent that you actually do FTP upload the required files. Not perfect but a solution for now.

Textpattern CMS

Textpattern CMS support forum

#1 2021-03-05 02:36:06