Responsive HTML5 help: To display images based on the screen size

[Ana2021]

Hello All,

I am working on a project where I want to display different images in the Responsive HTML5 help output based on the screen size/resolution of the device. For example, if the help is opened on a mobile device the set images should be displayed in the help content and similarly different images for the desktop view.

Is implenting the scenario possible in the Robohelp 2019 version?

Example URL: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture 

Note: For some reason, I don't want to use the Multiscreen HTML5 help output.

[Peter Grainge]

You must be using 2019 Classic as multiscreen is not an option in the new UI.

Regardless the responsive outputs automatically resize the images. If you want to greater control for some reason, multiscreen is the only option and I wouldn't recommend it. It was not included in the new UI version because it was a pain to set up.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

[Ana2021]

Yes, I am using RoboHelp 2019 Classic.

And, I want use different images (size and different image) based on the screen size (responsive help) of the device. Please have a look at the given URL as an example. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture 

Thank you for your quick reply. 🙂

[Peter Grainge]

I did look and I do understand what you want except I was thinking different sizes of the same image. What I am telling you is that if you want that level of control within RoboHelp it is only available using the multiscreen option. It is a pain to set up and you specifically said you don't want to use that output. Also if you later upgrade to the new UI versions, then it would not be supported. 

You can always create a simple project and try it in Classic but I very much doubt it would work there as I think Adobe would have gone that route to make it easier.

The new UI versions would in theory support that code but I haven't tried it. You have 2019 New UI installed as both get installed. You can even upgrade your Classic project to the New UI and it leaves your Classic version untouched. There is also a learning curve with the new UI but that's another matter.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

[Amebr]

If you want to manually type in the code, it might be possible, although RH Classic will display the picture and source tags as red codes because it doesn't know what to do with them. And you'll have to add the alternate images (the ones not in the img tag) as baggage files, otherwise they won't be included in the output. It seemed to work in RH2019 Classic, but I'd advise you create a small test project to test it out.

[Ana2021]

Thank you for the reply. I have already tested it and whatever you have explained is right. It works only when we manually add code images in the html files of the generated help folder. If we add code in souce folder it doesn't work. 

I guess, nobody has thought about this scenario. RoboHelp must add this feature.

And, manually adding code in the output files is not practical, because whenever the output is generated this task becomes repetitive which is not suitable for large projects that have hundereds of files.

[Amebr]

I added the code in the RH Editor, not in the output and it worked fine. Switch to the HTML view to add the code manually.

[Ana2021]

Yes, I had done the same. But, after generating output it has not worked.

[Ana2021]

Could you please share the code?

Are the added images changing based on the page/screen size (when you resize the page)?

[Amebr]

I just entered it as per the example you provided - except I updated the 465px value to 505px. Because the Chrome desktop browser wouldn't go any smaller than 500px I couldn't see the final transition, so I had to make it slightly larger to see on my PC.

Make sure you add the images listed in the <source> tags as baggage files in RH. Right-click on the folder where you want the image and select Import Baggage > File.

And make sure you get the relative paths right for your <source> images.

[Amebr]

I assume you added the img file as normal, then added the special code around it. However, if you also manually entered the img, then make sure you get the relative path right for it as well. 🙂

[Ana2021]

Thank you. 🙂 I will try this and update you here.

[Ana2021]

Are you trying the same code that I had mentioned in an example? If not, could you please share it here?

[Amebr]

Yes, I used the code in the example. I made the one change I mentioned in my last post.