You are either not logged in or not registered with our community. Click here to register.
 
June 23, 2021, 05:06:48 pm

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

Click here if you are having problems.
Default Wide Screen Beige Lilac Rainbow Black & Blue October Platinum Send us your theme!

Been Vaccinated? Or not?
...sharing central.

Wiki Blogs Dicebot

Author Topic: Image Rotation  (Read 458 times)

0 Members and 1 Guest are viewing this topic.

Offline MalkavianTopic starter

  • Your Twisted Demiurge • Satanael's Bastard Child • Bride of the God-Emperor • Cthulhu's Beloved Yandere
  • Lady
  • Enchanter
  • *
  • Join Date: Mar 2019
  • Location: UK
  • Gender: Female
  • No great mind exists without a touch of madness.
  • View My Rolls
  • Referrals: 1
Image Rotation
« on: May 03, 2020, 12:20:31 am »
Does anyone know how to rotate an image using BBCode?

Offline jouzinka

  • Elf                            Guardian of the Blind Unbowed,Unbent,Unbroken. Law, Hîr nín, ú dollen i Rîw…
  • Lady
  • Addict
  • *
  • Join Date: Nov 2008
  • Location: Surely wielding my mad makeup skillz somewhere
  • Gender: Female
  • The E mantra: Sip, swallow, scroll, sip, swallow..
  • View My Rolls
  • Referrals: 1
Re: Image Rotation
« Reply #1 on: May 03, 2020, 01:12:21 am »
In theory it can be done using rotateangle or flip code, but I couldn't make it work (admittedly, I'm on my phone), so maybe it's not installed on E.

Link to SMF source

Quote
New optional attributes in BBC tags:
img:
rotateangle, rotatebgcolor. Rotate an image with a given angle in degree and using a background color for the uncovered zone after the rotation. The background color is an hexadecimal with 3 or 6 digits (#rgb or #rrggbb), a RGB color (r,g,b) or a color name of these:
aqua   =   #00ffff   =   #0ff   =   0,255,255
black   =   #000000   =   #000   =   0,0,0
blue   =   #0000ff   =   #00f   =   0,0,255
fuchsia   =   #ff00ff   =   #f0f   =   255,0,255
gray   =   #808080         =   128,128,128
green   =   #008000         =   0,128,0
lime   =   #00ff00   =   #0f0   =   0,255,0
maroon   =   #800000         =   128,0,0
navy   =   #000080         =   0,0,128
olive   =   #808000         =   128,128,0
orange   =   #ffa500         =   255,165,0
purple   =   #800080         =   128,0,128
red   =   #ff0000   =   #f00   =   255,0,0
silver   =   #c0c0c0         =   192,192,192
teal   =   #008080         =   0,128,128
white   =   #ffffff   =   #fff   =   255,255,255
yellow   =   #ffff00   =   #ff0   =   255,255,0
If the color does not exist in the image and can not be added, is used the closest color. Default value is 0 (rotateangle) and black (rotatebgcolor). Values without quotes.
flip. Flip an image in a direction. Permitted values are: horizontal, vertical. Value without quotes.

Code: [Select]
[img rotateangle=degree rotatebgcolor=color flip=direction]image[/img]
Alternately, you can use some of these online editors.

The following 5 online image editors strike different balances between ease of use and wealth of features:

Offline MalkavianTopic starter

  • Your Twisted Demiurge • Satanael's Bastard Child • Bride of the God-Emperor • Cthulhu's Beloved Yandere
  • Lady
  • Enchanter
  • *
  • Join Date: Mar 2019
  • Location: UK
  • Gender: Female
  • No great mind exists without a touch of madness.
  • View My Rolls
  • Referrals: 1
Re: Image Rotation
« Reply #2 on: May 03, 2020, 01:43:55 am »
Thanks! ;D

Offline jouzinka

  • Elf                            Guardian of the Blind Unbowed,Unbent,Unbroken. Law, Hîr nín, ú dollen i Rîw…
  • Lady
  • Addict
  • *
  • Join Date: Nov 2008
  • Location: Surely wielding my mad makeup skillz somewhere
  • Gender: Female
  • The E mantra: Sip, swallow, scroll, sip, swallow..
  • View My Rolls
  • Referrals: 1
Re: Image Rotation
« Reply #3 on: May 03, 2020, 01:46:20 am »
You're welcome. I hope it helps. Maybe there will still be some wizard dropping by with some better code. XD

Offline Formless

  • Mr. Salt & Pepper
  • Knight
  • Addict
  • *
  • Join Date: Mar 2013
  • Location: Somewhere familliar , yet distant.
  • Gender: Male
  • View My Rolls
  • Referrals: 0
Re: Image Rotation
« Reply #4 on: May 03, 2020, 05:45:02 am »
If I may ...

Let's use the image of this kitty to show case a few tricks we can do with images.



There's a rotate tag to angle the image to any degree you'd like. Simply type the command [rotate=the angle you want to rotate the image to within a value from 0 to 360][/rotate] just like the example below.

Code: [Select]
[rotate=45][img height=200]https://s-media-cache-ak0.pinimg.com/736x/7f/ad/81/7fad819d31495b2f4fa93b309a193c33.jpg[/img][/rotate]


You can also rotate it counter clockwise by adding a negative value like this:

Code: [Select]
[rotate=-45][img height=200]https://s-media-cache-ak0.pinimg.com/736x/7f/ad/81/7fad819d31495b2f4fa93b309a193c33.jpg[/img][/rotate]



You can also use the flip code, to flip the image upside down:

Code: [Select]
[flip][img height=200]https://s-media-cache-ak0.pinimg.com/736x/7f/ad/81/7fad819d31495b2f4fa93b309a193c33.jpg[/img][/flip]


And lastly you can use the reverse code to turn the image from left to right or vice versa:

Code: [Select]
[reverse][img height=200]https://s-media-cache-ak0.pinimg.com/736x/7f/ad/81/7fad819d31495b2f4fa93b309a193c33.jpg[/img][/reverse]


I hope this helps. :-)

Offline jouzinka

  • Elf                            Guardian of the Blind Unbowed,Unbent,Unbroken. Law, Hîr nín, ú dollen i Rîw…
  • Lady
  • Addict
  • *
  • Join Date: Nov 2008
  • Location: Surely wielding my mad makeup skillz somewhere
  • Gender: Female
  • The E mantra: Sip, swallow, scroll, sip, swallow..
  • View My Rolls
  • Referrals: 1
Re: Image Rotation
« Reply #5 on: May 03, 2020, 06:04:45 am »
Neat! Thanks - I thought you were supposed to put the rotate tag inside the IMG tag, like you do with height.

This is cool :-)

Offline Formless

  • Mr. Salt & Pepper
  • Knight
  • Addict
  • *
  • Join Date: Mar 2013
  • Location: Somewhere familliar , yet distant.
  • Gender: Male
  • View My Rolls
  • Referrals: 0
Re: Image Rotation
« Reply #6 on: May 03, 2020, 06:08:37 am »
I learned those tags from a thread in this tutorial forum. But I can't for the life of me find it. So I shared the tags I learned. ;D

Offline Jag

  • They/Them Pronouns|| Alpha Raptor || Skitter Bug || Lil' Spooder || Murdoc
  • Centurion
  • Carnite
  • *
  • Join Date: Nov 2008
  • View My Rolls
  • Referrals: 20
Re: Image Rotation
« Reply #7 on: May 03, 2020, 08:20:24 pm »
You can do it with text too.

Flip It!
,
Reverse It!
, and


Rotate It!



Code: [Select]
[flip]Flip It![/flip], [reverse]Reverse It![/reverse], and


[rotate]Rotate It![/rotate]

And the emojis.

  ;D  ;D  ;D
;D         ;D
  ;D  ;D  ;D

Code: [Select]
  [rotate=135];D[/rotate]  [sup][rotate=180];D[/rotate][/sup]  [rotate=225];D[/rotate]
[rotate=90];D[/rotate]         [rotate=270];D[/rotate]
  [rotate=45];D[/rotate]  [sub];D[/sub]  [rotate=315];D[/rotate]

Offline MalkavianTopic starter

  • Your Twisted Demiurge • Satanael's Bastard Child • Bride of the God-Emperor • Cthulhu's Beloved Yandere
  • Lady
  • Enchanter
  • *
  • Join Date: Mar 2019
  • Location: UK
  • Gender: Female
  • No great mind exists without a touch of madness.
  • View My Rolls
  • Referrals: 1
Re: Image Rotation
« Reply #8 on: May 03, 2020, 09:23:11 pm »
Thanks for the feedback, all! ;D