RH2017: Images getting stretched in output

Participant ,
Jun 08, 2020 Jun 08, 2020

Copy link to clipboard

Copied

Hi

I am working on RH2017 and I have come across a very weird issue. 

I am using SnagIt to capture images and then adding to the topics via Insert Image. I also have a style created for my images, width – 801px and height - 435px. Once I apply the style and generate a Responsive HTML output, the images get stretched.

If I insert the image and do local formatting by inserting the same width and height given above and on generating an ouput the images stay intact.

Is there something I am doing wrong?

Does RH2017 does not render the expected output based on image styles?

Is it because I am using SnagIt to capture images. Do I need to use Robohelp’s screen capture tool?

Views

386

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

correct answers 1 Correct Answer

Adobe Community Professional , Jun 11, 2020 Jun 11, 2020
What if you disable it though? Do you see the image more like you expect?

Likes

Translate

Translate
Adobe Community Professional ,
Jun 08, 2020 Jun 08, 2020

Copy link to clipboard

Copied

Snagit is not the problem. It's the best tool around.

 

With one image, if you insert it the two different ways, is the difference obvious in RoboHelp or only when you generate an output?

 

Is the image being stretched proportionally or just in one direction?

 

All images or just some?

 

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Participant ,
Jun 08, 2020 Jun 08, 2020

Copy link to clipboard

Copied

Hi Peter

The Topic Editor and the Topic Preview shows the image size as per my need. But when i generate the ouput, it stretches.

Yes, all images do stretch in the output. The width gets stretched and the height remains the same. It becomes more evident when I hide the TOC panel view in the output by clicking Expand/Collapse. 

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
Adobe Community Professional ,
Jun 08, 2020 Jun 08, 2020

Copy link to clipboard

Copied

So source is OK but output is not. Are you using a master page or selecting a different CSS when you generate?

 

I think it's likely you are using one and that's where the problem is. Take a look and post back.

 

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Participant ,
Jun 08, 2020 Jun 08, 2020

Copy link to clipboard

Copied

I am using a Master Page to get the breadcrumbs and a CSS thats got all my styles. I just looked at the Responsive HTML5 settings and in Content > Apply to All Topics, the Master Page is selected. Do you think this might be the issue?

If I remove the Master Page and select CSS, is there any other way to get the breadcrumbs on the online output?

HTML5 Settings.PNG

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
Adobe Community Professional ,
Jun 08, 2020 Jun 08, 2020

Copy link to clipboard

Copied

Does the Master Page have the same CSS applied to it as the topics? Make sure it does.

 

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Participant ,
Jun 08, 2020 Jun 08, 2020

Copy link to clipboard

Copied

Yes, it does.

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
Adobe Community Professional ,
Jun 08, 2020 Jun 08, 2020

Copy link to clipboard

Copied

Try without using the master page to see if that fixes the problem. I'm not suggesting that as the answer, just to troubleshoot.

 

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Participant ,
Jun 08, 2020 Jun 08, 2020

Copy link to clipboard

Copied

No luck, the issue still persists. I changed Master Page to CSS in the Responsive HTML 5 settings but the image still stretch. Another issue I noticed is once I select the CSS instead of the Master Page in Responsive HTML 5, the ouput for some reason does not pick the my style.

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
Adobe Community Professional ,
Jun 08, 2020 Jun 08, 2020

Copy link to clipboard

Copied

Can you recreate this in a new project with just one topic and one image? Sometimes doing that nails the problem. If not, I'll take a look at that project. Post back when you have tried in a new project.

 

 

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Participant ,
Jun 09, 2020 Jun 09, 2020

Copy link to clipboard

Copied

Created a new project with one topic and image. The image still gets stretched in the output when an image style is applied.

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
Adobe Community Professional ,
Jun 09, 2020 Jun 09, 2020

Copy link to clipboard

Copied

Send me the new single topic project. See Contact page on my site and send the project as instructed there. Do make sure you include a link to this thread and please do not email the project direct.

 

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Adobe Community Professional ,
Jun 10, 2020 Jun 10, 2020

Copy link to clipboard

Copied

There is definitely an issue here and it's more than you have reported.

  1. Yes the image is getting stretched. In the editor I added a string of Zs to the title to match the right side of the image and in the output, the image is further across, as you reported.
  2. I then copied your image and used an image editor to change the width only to match your image style.
    When I put that in the topic the widths matched. However, the editor I used matched your width and kept the proportions. However, that gave a different height to your style and you could see your image was being vertically stretched.
    When I generated, the image without the style was fine but the image with was a mess, as you say.
  3. If you change the proportions in your image style, it still gets stretched widthways so it's still a mess.

 

Is using an image style a means of getting all your images to one size? Unless they all have the same proportions, which is highly unlikely, that is never going to work.

 

Maybe it's just a means of getting the one image to the size required? If so, right clicking the image and changing the size in Image Properties is better. In the output it will be narrower than in the editor (that never was a 100% accurate view of how things would be in a browser). 

If an image is say 1000px by 800px and you want it to be 500 by 400, if you use a style to achieve that, you don't get the same results as resizing it to 500 by 400.

 

For what it's worth, I upgraded your project to 2019 New UI and the only problem was that the proportions of your style are not right for the image. The only stretching was because you have too much height in relation to the width. In a browser both the image with a style and the image with the right sizes applied remained the same in the output, albeit both narrower than in the editor. That would be a matter of adjusting the size to what you want in the browser.

 

Sorry that's all very confusing. Bottom line is using styles to resize doesn't seem to be a good plan.

 

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Participant ,
Jun 10, 2020 Jun 10, 2020

Copy link to clipboard

Copied

Thanks Peter for the update.

Most of the images in my project are large and to bring uniformity to all images, I created a style 800px by 435px. Setting this size in the Image Editor gives a perfect output, hence created a style with the same dimensions but the output was not as required.

As we do not have a fix for this, I will continue to resize the image in the Image Editor and avoid using an image style.

If I correct the width to height proportions of the image, will the images be stretched in the output if I use RH2019? I do not want to compromise on the quality of the image though.

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
Adobe Community Professional ,
Jun 10, 2020 Jun 10, 2020

Copy link to clipboard

Copied

I disagree that you are getting a perfect resize. Create a copy of the image you sent and resize that, then insert it into a topic without the style.

 

Look at your original with the style applied and you will see Australia is too deep.

 

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Adobe Community Professional ,
Jun 10, 2020 Jun 10, 2020

Copy link to clipboard

Copied

Perhaps the setting "Convert absolute image size to relative image size" is affecting what you expect to see? It's in the Optimization section of the output dialog box.

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
Participant ,
Jun 10, 2020 Jun 10, 2020

Copy link to clipboard

Copied

Hi Amebr

"Convert absolute image size to relative image size" was already enabled in the output settings 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
Adobe Community Professional ,
Jun 11, 2020 Jun 11, 2020

Copy link to clipboard

Copied

What if you disable it though? Do you see the image more like you expect?

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
Adobe Community Professional ,
Jun 11, 2020 Jun 11, 2020

Copy link to clipboard

Copied

Not sure but I think those settings are for viewing on mobile devices.

 

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Participant ,
Jun 11, 2020 Jun 11, 2020

Copy link to clipboard

Copied

Hi Amebr

I disabled "Convert absolute image size to relative image size" and the image is not getting stretched in the output. 

Thanks.

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
Adobe Community Professional ,
Jun 11, 2020 Jun 11, 2020

Copy link to clipboard

Copied

Well done Amber. My assumption was wrong.

 

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

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
Adobe Community Professional ,
Jun 12, 2020 Jun 12, 2020

Copy link to clipboard

Copied

LATEST

@Siju, glad it worked. 🙂

 

@Peter, you might have been right. It's hard to tell what things are for without documentation. I figured it was an easy thing to test.

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