Rotate an image

This forum is for Single-Sourcing your Flare content to multiple outputs.
Post Reply
Matze
Sr. Propeller Head
Posts: 163
Joined: Mon Jun 20, 2016 10:35 pm

Rotate an image

Post by Matze »

Hi all,
In my topic I have an image which is needed for PDF and HTML5 output.
Later I´d like to work with one svg format only, later ...

At the moment the original image for the PDF output is an illustrator eps in portrait
For the HTML5 output I save this file as JPG image.

But for the HTML5 output I need this file in landscape. How can I do / rotate this?

I guess, with capture it does not work because capture rotates only objects on top of the image.
I´d tried this idea with the rotate attribute, but does not work.

<p MadCap:conditions="Generate_Output_Conditions.ScreenOnly">
<img src="../../Images/4_Images_BLD/L6000_BLD.jpg" alt="L6000 Block diagram" rotate="90" />
</p>
devjoe
Sr. Propeller Head
Posts: 337
Joined: Thu Jan 23, 2014 1:43 pm

Re: Rotate an image

Post by devjoe »

You want to use the CSS property transform with the value rotate(90deg) as described here:
https://www.w3schools.com/cssref/css3_pr_transform.asp
RamonS
Senior Propellus Maximus
Posts: 4293
Joined: Thu Feb 02, 2006 9:29 am
Location: The Electric City

Re: Rotate an image

Post by RamonS »

I can also dig up some PHP code that rotates images on the fly based on settings stored in a database. I used that for a photo viewer web app years back where I had image files that needed to be rotated left 90°, right 90°, 180°, or not at all.

Honestly, use the CSS approach and craft various styles that do what my code does. When I coded this CSS and browsers couldn't do this. Using the style transform is likely much faster and much easier to implement in static pages such as HTML5 help.
Matze
Sr. Propeller Head
Posts: 163
Joined: Mon Jun 20, 2016 10:35 pm

Re: Rotate an image

Post by Matze »

nice that helps me a lot, thanks
Suzanne_Dialog
Jr. Propeller Head
Posts: 3
Joined: Wed Nov 14, 2018 4:33 am

Re: Rotate an image

Post by Suzanne_Dialog »

Does rotating images work in PDF output? I have a separate img class in my css to but it doesn't seem to be doing anything.

Thanks in advance.
Matze
Sr. Propeller Head
Posts: 163
Joined: Mon Jun 20, 2016 10:35 pm

Re: Rotate an image

Post by Matze »

Hi,
I´ve this div class below but I use it as a screen only conditions. So I guess at the moment I had problems
- rotating the image JPG file, works fine for HTML5 output
- rotating the EPS illustration for PDF output. Does not work.

I should check this as responsive svg image for both, but that svg issue needs a couple of time ....



div.ImageRotate90
{
transform: rotate(90deg);
}
Post Reply