Highlighted

Rotating images in RoboHelp

New Here ,
Jul 15, 2019

Copy link to clipboard

Copied

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.

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.

Views

318

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

Rotating images in RoboHelp

New Here ,
Jul 15, 2019

Copy link to clipboard

Copied

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.

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.

Views

319

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
Adobe Community Professional ,
Jul 15, 2019

Copy link to clipboard

Copied

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

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Adobe Employee ,
Jul 15, 2019

Copy link to clipboard

Copied

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.

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
Reply
Loading...
New Here ,
Jul 15, 2019

Copy link to clipboard

Copied

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.

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
Reply
Loading...
LEGEND ,
Jul 16, 2019

Copy link to clipboard

Copied

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

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
Reply
Loading...
New Here ,
Aug 20, 2019

Copy link to clipboard

Copied

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. 

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
Reply
Loading...
Adobe Community Professional ,
Aug 20, 2019

Copy link to clipboard

Copied

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

www.grainge.org for free RoboHelp & Authoring info. 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
Reply
Loading...
Captiv8r LATEST
LEGEND ,
Aug 20, 2019

Copy link to clipboard

Copied

Well, I have to say that if it were me, I'd likely do what I also do when I see these things from relatives. I grab the image using TechSmith SnagIt, rotate it properly, and then save it out from there. If you snag the image by capturing, there should be no ExIf data to be concerned with.

I'm unsure if this can be overcome by leaving the image as is and defining a CSS rule. Hence the question in my earlier post.

I did some googling and found the article linked below that may help.

Click here to view

Keep us posted on what you find.

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
Reply
Loading...