Forum:Question about Image Formatting

I have question about image formatting. Is it possible to rotate images? I want to try to do it with an image on a merge template I'm creating that you can see in progress here. --Thenewguy34( Other) 23:45, May 15, 2012 (UTC)
 * Whether you could or couldn't, it would simply be easier and faster to rotate it in a graphics program and then upload the rotated image.


 * I will say that there's no easy way to transform photo orientation using wikicode. I am aware of an extremely complicated template that they once had to use at wikipedia, found at commons:template:rotate.  But it would take you a substantial amount of time to bring all the dependent templates over to your wiki.  You couldn't just cut and paste it.  You'd be cuttin and pasting for a while.


 * You might also be able to use CSS transform:rotate, create some kind of class that rotates to 90 degrees, and then assign the picture to that class. I guess that something like that would work, but CSS is rarely as simple as it seems.


 * But honestly, it's two seconds in Photoshop. At the end of the day, I just don't understand why you'd want to use code in this situation.   01:38: Wed 16 May 2012


 * I believe that the mentioned template also requires a bot to do the rotating. However, doing this with CSS3 isn't as complicated as it might seem:
 * Example text
 * or for images:


 * Example.jpg


 * More info can be found here. — Sovq 06:28, May 16, 2012 (UTC)


 * -- Mathmagician 06:38, May 16, 2012 (UTC)

Thanks for firming up the hypothesis that there was a CSS solution. Glad to know that it does work. As has now been confirmed by Sovq, you can effect the change in  declarations. But like I suspected, it's not quite as easy as it seems. Because  isn't supported in any browser, you can't just use one simple declaration like   or something. You have to use browser-specific declarations to get it to work in each different browser. This means the code looks something like this:  You can make a shortcut for yourself, though. You can make a new CSS class called, say,, and then apply that class where needed, such that your inline code became simply: Again, though, it's not clear what sort of application any of this would have which would be superior to just uploading a 90°-rotated variant. At Commons, they were correcting a technical fault that had arisen on thousands of images. But for a single picture, I still think it's better to choose the simpler option. 20:19: Wed 16 May 2012

It isn't working by just applying any of the code. What is this "CSS" thing, and can you please make the instructions simpler?

Ok, I got it to work, but its location is moving around the page, or the image is disappearing. How do I fix this? --Thenewguy34( Other) 19:23, May 18, 2012 (UTC)


 * It is doing that because you applied the transform styling to the div that contains the image. The div element spans the whole width of the page, so when you rotate it you are rotating the entire width of the div, not just the part that contains the image. You can fix that by making the width of the div equal to the width of the image. Or you could just use a span instead of a div, like so:


 * --Gardimuer { ʈalk } 22:34, May 18, 2012 (UTC)

I tried the span style, but I am not seeing the rotation. --Thenewguy34( Other) 11:47, May 19, 2012 (UTC)


 * Oddly enough, the span rotation works in Firefox but not in Chrome. Here's the div version with a fixed width:


 * --Gardimuer { ʈalk } 17:14, May 19, 2012 (UTC)