This Forum has been archivedVisit the new Forums
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. <span style="
- 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:
- or for images:
- Mathmagician 06:38, May 16, 2012 (UTC) --
div styledeclarations. But like I suspected, it's not quite as easy as it seems. Because
transform:rotateisn't supported in any browser, you can't just use one simple declaration like
font-weight:boldor 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:
<div style= "-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg)">[[file:rotate.jpg]]</div>
You can make a shortcut for yourself, though. You can make a new CSS class called, say,
.rotate, 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. <span style="
It isn't working by just applying any of the code. What is this "CSS" thing, and can you please make the instructions simpler?
- 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:
<span style="-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg)">[[File:Deuterium-tritium fusion.png|125px]]</span>
- Oddly enough, the span rotation works in Firefox but not in Chrome. Here's the div version with a fixed width:
<div style="-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); width:125px;">[[File:Deuterium-tritium fusion.png|125px]]</div>