Skip to main content
P
P235192848i3d
Participant
March 10, 2022
Question

When Using <picture> for Responsive Images Last Image Does Not Show in DWT File

  • March 10, 2022
  • 1 reply
  • 165 views

I am using the code below to insert different images. It works as expected when tested within a regular HTML page, but as a DWT file the third image shows only as a placeholder. The first two continue to load properly. Is there a reason for this and a way to fix?

 

The technique is described here. https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/#using-picture

 

<picture>
<source
srcset="images/header.png"
media="(min-width: 1000px)"
/>
<source
srcset="images/zoom_header.png"
media="(min-width: 600px)"
/>
<img
src="images/more_zoom_header.png"
/>
</picture>

    This topic has been closed for replies.

    1 reply

    O
    osgood_
    Legend
    March 10, 2022

    Can we establish the code  is working outside of a .dwt file? Have you tested with another image?

    P
    P235192848i3dAuthor
    Participant
    March 10, 2022

    As mentioned the code works fine in a regular HTML page with no attached .dwt file. But if I put the same code in a .dwt file and then attach an HTML page to that template, the third image does not show. Just a placeholder icon. IOW only the first two show as the screen is progressively resized

     

    Happens every time and with any images. I do not understand why. Can anyone please suggest code that will accomplish the same task and work in this situation?

    O
    osgood_
    Legend
    March 10, 2022

    I don't know why when saving a .dwt file it wouldnt work as I dont use that method. What part of the code is missing if you look at the pages source code. Is the path to the image different to the other 2 images paths?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices