Forum:Question about Image Formatting

Forums: Index → Support Requests → Question about Image Formatting

Fandom's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 4350 days. It is considered archived - the discussion is over. Information in this thread may be out of date. Do not add to unless it really needs a response.

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. czechout ☎ ✍  fly tardis  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:

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

 You like this.-- 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 div style declarations. But like I suspected, it's not quite as easy as it seems. Because transform:rotate isn't supported in any browser, you can't just use one simple declaration like font-weight:bold 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:

<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:

<div class=rotate>[[file:rotate.jpg]]</div>

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. czechout ☎ ✍  fly tardis  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:

<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>

--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:

<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>

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

Thanks for the help; it was very useful. I'm going to put this forum into my archives!--Thenewguy34^(Other) 10:11, May 20, 2012 (UTC)