• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

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

New Here ,
Oct 22, 2021 Oct 22, 2021

Copy link to clipboard

Copied

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.

Views

99

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 22, 2021 Oct 22, 2021

Copy link to clipboard

Copied

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

 

Help others by clicking Correct Answer or Like if helpful. Found your answer elsewhere? Share it here.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 22, 2021 Oct 22, 2021

Copy link to clipboard

Copied

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. 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 22, 2021 Oct 22, 2021

Copy link to clipboard

Copied

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

 

 

Help others by clicking Correct Answer or Like if helpful. Found your answer elsewhere? Share it here.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

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.

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

Could you please share the code?

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

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. 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 24, 2021 Oct 24, 2021

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp