Issue with alpine template <img :src> tag not converted in <picture> tag - Hyva themes

[rahul-navigate]

I am having yireo/magento2-webp2:0.13:4 installed along with hyva theme 1.3.7

I have used alpine component using to render dynamic category images on home page but the tag is not converted in tag.

Below is the syntex which i am having.

<template x-for="category in categories"> <a :href="category.url"> <div class="w-suto sm:w-auto relative h-auto sm:h-auto md:h-auto xl:h-48 hover:text-orange-h1 hover:drop-shadow-md"> <img :src="category.thumbnail_image" class="relative w-auto mx-auto block border-gray-h3 border border-solid bg-white relative" :alt="category.name" loading="lazy" height="151" width="160" /> <div class="relative bottom-0 w-full top-2 sx:top-1 uppercase"> <span :href="category.url" class="block text-sm font-bold text-center" x-text="category.name" > </span> </div> </div> </a> </template>

Expected result:
tag should converted in tag with webp format as it works well in other pages too.

Actual result:
tag not converting in tag.

Magento version: 2.4.6-p1
PHP version: 8.1
Module version: 0.13.4

[jissereitsma]

Thanks for posting. As you probably know, the code you posted 100% relies upon JavaScript. Therefore, there is no logic to replace the img tag with a source category.thumbnail_image where that source can only be resolved via JavaScript. Instead, the solution needs to be added to your Alpine model.

[rahul-navigate]

@jissereitsma thanks for sharing update on it. So according to you there is no such possiblities in it ? or there is other use case where image src is being update by ajax then ?

[jissereitsma]

Sure there is. But where are the source images coming from? That's where the fix needs to be added. Imagine that those images are coming from a remote webservice, then a Magento extension will be not useful. So, the question to you as a developer is: What is the source? Where are the images coming from and how are they added to your custom Alpine model? Next, add the WebP images there!

[rahul-navigate]

Source is from magento itself. But as we need dynamic data to be add on load more so we have utilized alpine component and rendered the category using alpine.

so as you can see category has all the data along with thumbnail_image which we are getting in ajax resposne and parse that

:src="category.thumbnail_image" :: the concern is with this syntex here in category.thumbnail_image it has the complete image url

Here is the attached reference of alpine template rendered.

if i pass src="static_image_url" it works perfectly and generate picture tag.

[jissereitsma]

Sure, I trust that the Magento category data is coming from Magento. But how do they end up in Alpine JS? My guess is: PHP code. Which PHP code is this and who wrote the PHP code and who wrote the AlpineJS code? Please note that I can't volunteer to write a complete integration of my WebP extension in a custom project. I need you to pick up on that responsibility.

You say "[we] rendered the category using Alpine", so you must know the code that is loading the image for it. So where is the connection between Magento and AlpineJS? How did you add the category? How do you want to add an additional image? It is your code, so you must know.

[rahul-navigate]

HI @jissereitsma thanks for update. I do understand alpine and magento both code and i have written the same code.

No issues i'll figure out something. but the answer which i was looking for if image tag has dynamic url bind in src will it convert with the exntension or not ?

Thanks

[jissereitsma]

I literally don't know. The extension is not a blackbox product that you as a developer simply rely on to do some magic. Instead, it is an open source project that you can make use of.

First of all, a custom solution like yours, requires a custom workaround. Make sure to invest time in this.

Second, if your data is coming from GraphQL, check this README because this extension extends upon the GraphQL endpoints to add WebP sources. Next, you can simply add the additional image sources in your own JS code.

Third, if your data is coming from some PHP code into your ownJS code, you probably want to check if WebP support is available to see when the WebP source and when the original source is used. You can use this: https://github.com/yireo/Yireo_Webp2/blob/master/view/frontend/templates/hyva/add-webp-class-to-body.phtml

Other sources for use:

• https://github.com/yireo/Yireo_Webp2/blob/master/view/frontend/templates/hyva/gallery-additions.phtml
• https://github.com/yireo/Yireo_NextGenImages/blob/master/view/frontend/templates/hyva/gallery-additions.phtml

But again, I don't know your code, you have only copied browser code and no PHP code, so I'm blank here.

Perhaps it is best to imagine that there is no extension. But there is an image file. How would you try to load a WebP file in your own code? Next, check my extensions for source code, so you don't need to build it yourself.