Skip to main content
KN-Marketing
KN-Marketing
Known Participant
July 15, 2019
Answered

Rotating images in RoboHelp

  • July 15, 2019
  • 2 replies
  • 908 views

Hello,

I recently started working with Robohelp (2019 release)...

Some of the common features that I'm used to when working with Creative Cloud apps are missing though.

Like rotaing images.

Is there any possibility to rotate pictures in RoboHelp? The path over Photoshop takes a really long time, considering I use many images in my project.

I hope someone can help my with my issue.

Kind regards,

Pascal R.

This topic has been closed for replies.
Correct answer Stefan Gentz

I guess the question is not about "rotating images" (animated images that show how something is rotating), but about "how to rotate an imported image" (e.g. by 90°).

To do so, you can add a style attribute to the image and use CSS transform to rotate the image:

<img src="photo.png" style="transform: rotate(90deg)" alt="a simple photo" />

With transform: rotate(90deg) you can rotate the image by 90° clockwise. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

You could also just set up a couple of predefined image styles in your CSS and then simply apply it to the image in question. Here two examples for two classes that rotate an image by 90° counter or counter-clockwise:

img.rotated90clockwise {
  transform: rotate(90deg);
}
img.rotated90counterclockwise {
  transform: rotate(270deg);
}

Hope that helps.

2 replies

Captiv8r
Captiv8r
Legend
July 16, 2019

One of the things I've discovered with images is that if someone uses an iPhone to capture them, something called "Exif data" is used to store the orientation. I've seen many cases on the facebook where a relative will share an image that appears to be rotated. It looked correct to them until they uploaded it. And the browser sensed that data and respected it.

So I'm wondering if this is coming into play here. And if so, would a CSS style overcome it?

Cheers... Rick

M
mandys89001272
Participant
August 20, 2019

Rick!  Captiv8r​

This is exactly what's happening to me and what drove me to the message boards.  Is there an easy way to fix this?  I'm in Robohelp 2015 for now.  Does it not have a rotate image 90 degree feature? 

Thanks. 

Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
August 20, 2019

It's not built in so you will have to try the answer marked Correct.

See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
July 15, 2019

I assume rotating images are ones where you can view an object all around. For example you could look at a laptop computer from the front, the back, the sides and all angles between.

It is not something built into RoboHelp itself, either Classic or 2019. However, many years ago I saw a demo of the parts of a car disc brake being exploded and then rotated. That was done in Acrobat and the PDF was then imported into RoboHelp. That was a Classic version and I don't know if it would work in the new version.

What format is the Photoshop rotating image and have you tried adding one to 2019?

The path over Photoshop takes a really long time. Please clarify what you mean here.

See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
S
Community Manager
Stefan GentzCommunity ManagerCorrect answer
Community Manager
July 15, 2019

I guess the question is not about "rotating images" (animated images that show how something is rotating), but about "how to rotate an imported image" (e.g. by 90°).

To do so, you can add a style attribute to the image and use CSS transform to rotate the image:

<img src="photo.png" style="transform: rotate(90deg)" alt="a simple photo" />

With transform: rotate(90deg) you can rotate the image by 90° clockwise. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

You could also just set up a couple of predefined image styles in your CSS and then simply apply it to the image in question. Here two examples for two classes that rotate an image by 90° counter or counter-clockwise:

img.rotated90clockwise {
  transform: rotate(90deg);
}
img.rotated90counterclockwise {
  transform: rotate(270deg);
}

Hope that helps.

KN-Marketing
KN-MarketingAuthor
Known Participant
July 16, 2019

Sorry, I've misspellend that. I guess this should work, but might take some time as well 'cause I have to edit the code itself.

As a layman for coding in html and css this is not as easy as for someone who had a few years of experience.

I'll try this. I have to see wich one is the faster and easy way for me.

Thanks for your help.

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