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 4354 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? --Thenewguy34^(Other) 19:23, May 18, 2012 (UTC)