picture in picture

[mediafoks]

Hello!
If there is already an PICTURE on the page, then the plugin also processes them and it turns out like this:

<picture>
 <source type="image/webp" srcset="***">

 <picture class="responsive-image">
  <source type="image/webp" sizes="***" srcset="***">
  <source type="image/jpeg" sizes="***" srcset="***">
  <img decoding="async" loading="lazy" height="512" width="768" src="***">
 </picture>

</picture>

How to exclude existing PICTUREs from processing by the plugin?

[dgrammatiko]

Where is this happening, can you post the layout?
If this is happening in a textarea field, please make sure you use a modern editor (ie NOT jce)

[mediafoks]

Where is this happening, can you post the layout? If this is happening in a textarea field, please make sure you use a modern editor (ie NOT jce)

Joomla 4.1.4, editor - CodeMirror.
Code before:

<a class="cap-zoom" href="/images/home/gekkold-hitema_01.jpg" data-lightgallery="photo">
  <picture>
   <source type="image/webp" srcset="/images/home/tmb/gekkold-hitema_01--tmb.webp">
   <img src="/images/home/tmb/gekkold-hitema_01--tmb.jpg" alt="About">
  </picture>
</a>

Code after:

<a class="cap-zoom" href="/images/home/gekkold-hitema_01.jpg" data-lightgallery="photo">
    <picture>
        <source type="image/webp" srcset="/images/home/tmb/gekkold-hitema_01--tmb.webp">

        <picture class="responsive-image">
            <source type="image/webp" sizes="(max-width: 1920px) 100vw 1920px" srcset="/media/cached-resp-images/images/home/tmb/gekkold-hitema_01--tmb_768.webp? 
          version=ec4b70336e9ce236ec6bfe3e46cc48b3 768w, /media/cached-resp-images/images/home/tmb/gekkold-hitema_01-- 
          tmb_480.webp?version=ec4b70336e9ce236ec6bfe3e46cc48b3 480w, /media/cached-resp- 
          images/images/home/tmb/gekkold-hitema_01--tmb_320.webp?version=ec4b70336e9ce236ec6bfe3e46cc48b3 320w, 
          /media/cached-resp-images/images/home/tmb/gekkold-hitema_01--tmb_200.webp? 
          version=ec4b70336e9ce236ec6bfe3e46cc48b3 200w">
            <source type="image/jpeg" sizes="(max-width: 1920px) 100vw 1920px" srcset="/media/cached-resp-images/images/home/tmb/gekkold-hitema_01--tmb_768.jpg? 
         version=ec4b70336e9ce236ec6bfe3e46cc48b3 768w, /media/cached-resp-images/images/home/tmb/gekkold-hitema_01-- 
         tmb_480.jpg?version=ec4b70336e9ce236ec6bfe3e46cc48b3 480w, /media/cached-resp-images/images/home/tmb/gekkold- 
         hitema_01--tmb_320.jpg?version=ec4b70336e9ce236ec6bfe3e46cc48b3 320w, /media/cached-resp- 
         images/images/home/tmb/gekkold-hitema_01--tmb_200.jpg?version=ec4b70336e9ce236ec6bfe3e46cc48b3 200w">
            <img decoding="async" loading="lazy" height="512" width="768"
                src="/media/cached-resp-images//images/home/tmb/gekkold-hitema_01--tmb_1920.jpg?version=ec4b70336e9ce236ec6bfe3e46cc48b3"
                alt="About">
        </picture>

    </picture>
</a>

[dgrammatiko]

@mediafoks I'm sorry for the late response here, I thought I have answered on this issue...

If this is something not created by a plugin or an editor button then you shouldn't use picture element because that will be automatically created by the plugin. Eg instead of manually writing

<a class="cap-zoom" href="/images/home/gekkold-hitema_01.jpg" data-lightgallery="photo">
  <picture>
   <source type="image/webp" srcset="/images/home/tmb/gekkold-hitema_01--tmb.webp">
   <img src="/images/home/tmb/gekkold-hitema_01--tmb.jpg" alt="About">
  </picture>
</a>

just write

<a class="cap-zoom" href="/images/home/gekkold-hitema_01.jpg" data-lightgallery="photo">
   <img src="/images/home/tmb/gekkold-hitema_01--tmb.jpg" alt="About">
</a>

That will prevent the Picture in Picture. If this is a generated HTML from some plugin then you can add the directory /images/home in the ignore list [ Excluded Directories * ] so it would be be handled by that plugin and not plugin-responsive-images.

[mediafoks]

Thanks