Skip to main content
A
Ana2021
Known Participant
October 22, 2021
Question

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

  • October 22, 2021
  • 6 replies
  • 528 views

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.

    This topic has been closed for replies.

    6 replies

    A
    Amebr
    Braniac
    October 25, 2021

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

    A
    Amebr
    Braniac
    October 25, 2021

    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.

    A
    Amebr
    Braniac
    October 25, 2021

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

    A
    Ana2021Author
    Known Participant
    October 25, 2021

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

    A
    Amebr
    Braniac
    October 25, 2021

    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.

     

     

    A
    Ana2021Author
    Known Participant
    October 25, 2021

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

    A
    Amebr
    Braniac
    October 25, 2021

    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.

    A
    Ana2021Author
    Known Participant
    October 25, 2021

    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.

    Peter Grainge
    Peter Grainge
    Braniac
    October 22, 2021

    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 if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.
      Peter Grainge
      Peter Grainge
      Braniac
      October 22, 2021

      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 if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.
      A
      Ana2021Author
      Known Participant
      October 22, 2021

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

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