Board Thread:General Discussion/@comment-25648422-20150710155214

By the title above, I am introducing to you guys a new template to this wiki: the R template.

You see guys, some of us display really huge images, especially external ones, to any area of this wiki. Some of these images are actually so huge that they tend to cover a part of a page you visit or those modules at the right side. And these sizes can usuually range from the height or width of 300px and above. So gigantic much right? Right now, I will teach you guys a template you can all use to resize really large external images whenever you display it to your userpage, a message wall, an article, etc.

Let me use this image one for an example: http://imgur.com/zCJkENv. Displaying its direct link http://i.imgur.com/zCJkENv.png will display...

http://i.imgur.com/zCJkENv.png

Too big right? Takes up a huge amount of space too. Time to use the R template!

If you type, it only displays:

If you hover your cursor into that image and click it, it immediately takes you to the direct image itself.

What if you'd like to resize it? It is easy, I will explain. For example, if you type, the size of the image is now:

Take note that the h=50px I demonstrated is the size that you like for the external image. It can be h=24px or h=5px. On a short sample, typing makes it real small:

Do you want an effect that when you hover an image, there is a text that will display after a second? Here is a sample, typing turns into:

Hover your cursor on the image and a text will appear in a second.

Do you also want an effect that when you click on the external image it takes you to another link? Another sample. Typing turns it into:

Clicking this image will take you to another page. And this is where you see the effect happen. It can also take you to another page outside the wiki too. Like will take you to Imgur.com:

You can also align it either to the left, center, or right. Typing places it to the left:

Typing will place it to the center:

Typing will place it to the right:

Now how about a combination of all these tricks? One more sample. Typing will turn it into:

So here you go guys! The super - effective R template.

If you got any questions or are confused, you can go ahead and ask me if there is something that is not clear to you and I can clarify it for you. You can also use the replies to test this template out with any effective external image (Imgur, Photobucket, wikia cookie .net, etc.). This template functioned very well thanks to Vyris who placed the coding in the CSS to make it function very well. 