Rotate an image

This forum is for Single-Sourcing your Flare content to multiple outputs.

Rotate an image

Postby Matze on Thu Jun 28, 2018 12:50 am

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>
Matze
Propeller Head
 
Posts: 78
Joined: Mon Jun 20, 2016 10:35 pm

Re: Rotate an image

Postby devjoe on Thu Jun 28, 2018 5:52 am

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
devjoe
Sr. Propeller Head
 
Posts: 305
Joined: Thu Jan 23, 2014 1:43 pm

Re: Rotate an image

Postby RamonS on Fri Jun 29, 2018 4:33 am

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.
RamonS
Senior Propellus Maximus
 
Posts: 4286
Joined: Thu Feb 02, 2006 9:29 am
Location: The Electric City

Re: Rotate an image

Postby Matze on Tue Jul 03, 2018 4:25 am

nice that helps me a lot, thanks
Matze
Propeller Head
 
Posts: 78
Joined: Mon Jun 20, 2016 10:35 pm

Re: Rotate an image

Postby Suzanne_Dialog on Fri Jan 11, 2019 4:42 am

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.
Suzanne_Dialog
Jr. Propeller Head
 
Posts: 3
Joined: Wed Nov 14, 2018 4:33 am

Re: Rotate an image

Postby Matze on Thu Jan 31, 2019 10:57 pm

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);
}
Matze
Propeller Head
 
Posts: 78
Joined: Mon Jun 20, 2016 10:35 pm


Return to Single-Sourcing

Who is online

Users browsing this forum: Google [Bot] and 3 guests

cron