Single-sourcing images for mobile/web (not PDF)

[YE-TW]

Hi,

In HTML5 (side nav) output, I'm trying to display different images depending on the browser size. For mobile phone width (max-width: 650px), I want to show "image A", and for tablets and desktops/laptops width (min-width: 651px), I want to show "image B".

How do I do this please? Googling returns various ways of using the <picture> element, for example (this is just one variation that I found - with and without <meta name="viewport" content="width=device-width, initial-scale=1.0"/> in the head ):
<picture>
<source media="(min-width: 651px)" srcset="image_B.png"/>
<source media="(max-width: 650px)" srcset="image_A.png"/>
<img src="image_B.png"/>
</picture>

In Flare, even if I wrap this is a container (div or p), the output shows a missing image, and the XML shows <source><source/><source><source/>.

I've also tried with the media defined in our CSS instead of hard-coding the min/max width.

Any ideas on how to achieve this in Flare?

Thanks in advance!

Best regards,
Yael

[NorthEast]

I've tried your example and it works fine for me in my HTML5 output.
But it doesn't work in the preview and displays a missing image. In the XML editor, I see <source></source/><source></source> and a working image (for the img tag).

So it looks like Flare's XML Editor will display the srcset images as <source></source>, but apart from that it works ok in the output.

As your reguilar img tag isn't working either, then I'd guess that the image is not in the same folder as your topic (maybe it's "Resources/Images/image_B.png"), or the image filename is wrong. If you insert the image in the topic first, then you'll know you've got the correct path and filename.

[YE-TW]

Thanks, NorthEast! The paths all use the full Resources path - my sample was just to simplify things.

I rebooted (isn't that always the solution?).

Then I followed your advice. I deleted what I had, inserted the images afresh, and tried again. I added alt text to all 3 lines, so that I could see what's being displayed on failure. I also tried to do this in another existing Flare project thinking that maybe there's something awry with the project itself. They both use the same CSS though, if that matters...

Here are the results (please pretend that the underscores represent the screen width):
\image_B.png displays correctly from the specifed min-width. Yay!
|___:D <image_B.png>_____________________________________________________________________________________________________|

For narrower widths, the alt for <img src...> is displayed instead of the image.
Here's what it looks like the following for a narrower screen (as soon as I resize, or if I open the browser with a narrow screen to start with):
|__<missing image icon>Default text when srcset fails_____________|

Then I tried to do this in a completely new project that uses Flare's out-of-the-box everything. And it works perfectly, just like you said. I didn't even have to add the meta to the head.

Can you think of anything that might be preventing this from working correctly?

Thanks in advance!

Best regards,
Yael

[YE-TW]

Hi NorthEast,

I decided to troubleshoot from scratch. Literally. I rebuilt the project piece by piece.

Guess what the issue is... In the target > Advanced pane > Content to list, we need to select All Content. Our target was set to Content linked directly from the TOC. Content linked directly or indirectly from the target doesn't work either. This actually makes sense because, as you rightly noted, Flare doesn't recognize the content in srcset.

Problem solved!

Thanks so much for your encouragement and for pointing me in the right direction!

Best regards,
Yael

[NorthEast]

Glad you found the problem.

I'd suggest reporting that as a bug, because although you can't insert a picture tag, it's a problem if Flare can't recognise all valid HTML when it comes to analysing links.

Go to Help > Report a Bug
https://www.madcapsoftware.com/feedback/bugs/