Text only | With Images

FX-Sabers.com

Jedi Temple => Padawans Training Room - Introduce yourself => Topic started by: darthmorbius on February 29, 2008, 06:35:03 PM

Title: How to make your Pictures clickable.
Post by: darthmorbius on February 29, 2008, 06:35:03 PM
Hello everyone!

I have noticed that there are a lot of pictures posted around the forums that could benefit from this tutorial. By nesting your tags properly, you can make it easy for all browsers to recognize your photos as a clickable link that opens a larger version of the picture in another window.

Here's how you do it! ;)


First we add the URL tag: This can be done in the "Reply" controls using the "insert hyperlink" button.
Code: [Select]
[url][/url]

Next we add the image tag: This is done the same way but using the "insert image" button.
Code: [Select]
[url][img][/img][/url]

Then you add an = in the opening URL tag like so:
Code: [Select]
[url=][img][/img][/url]

Now we add the actual link to your photo by copy and pasting it in the first URL tag after the =  
Code: [Select]
[url=http://i157.photobucket.com/albums/t45/DarthMorbius1977/VaderESB001.jpg][img][/img][/url]

Finally, you paste the same link between the IMG tags like this!
Code: [Select]
[url=http://i157.photobucket.com/albums/t45/DarthMorbius1977/VaderESB001.jpg][img]https://i157.photobucket.com/albums/t45/DarthMorbius1977/VaderESB001.jpg[/img][/url]

regular image
(https://www.fx-sabers.com/forum/proxy.php?request=http%3A%2F%2Fi157.photobucket.com%2Falbums%2Ft45%2FDarthMorbius1977%2FVaderESB001.jpg&hash=428da2c7958233ed7ee80a512d2e184883b7abfa)


Clickable linked image
(https://www.fx-sabers.com/forum/proxy.php?request=http%3A%2F%2Fi157.photobucket.com%2Falbums%2Ft45%2FDarthMorbius1977%2FVaderESB001.jpg&hash=428da2c7958233ed7ee80a512d2e184883b7abfa) (http://i157.photobucket.com/albums/t45/DarthMorbius1977/VaderESB001.jpg)

I hope that this helps everyone understand how to do this.

Title: Re: How to make your Pictures clickable.
Post by: Darth Resev on February 29, 2008, 06:43:50 PM
Thanx DT,Ill be sure to put this to good use  :)
Title: Re: How to make your Pictures clickable.
Post by: Bandit-Jedi on February 29, 2008, 07:02:48 PM
I make good use out of that trick for all my reviews.  Its very useful especially with the size limitations for the images.
Title: Re: How to make your Pictures clickable.
Post by: darthmorbius on February 29, 2008, 07:09:38 PM
Now about resizing your displayed pictures.  Sometimes, you may have a large amount of pictures that you want to post.

In this case you can change the width and height of how your pics are displayed. You can decrease those values. After you post, the forums automatically assign pixel count values to your pictures. You can then go into your post and modify it further and change the width and height to a lower number so that you can have more pics in your posts.

Be forewarned however, that if you do reassign new values to your image size, it can distort the image.

Code: [Select]
[url=http://i157.photobucket.com/albums/t45/DarthMorbius1977/VaderESB001.jpg][img width=300 height=225]http://i157.photobucket.com/albums/t45/DarthMorbius1977/VaderESB001.jpg[/img][/url]
As you can see in the above code, the IMG tag is modified with a height of 225 pixels and a width of 300 pixels. This is the default size that the site allows for pics.  it looks like this:

(https://www.fx-sabers.com/forum/proxy.php?request=http%3A%2F%2Fi157.photobucket.com%2Falbums%2Ft45%2FDarthMorbius1977%2FVaderESB001.jpg&hash=428da2c7958233ed7ee80a512d2e184883b7abfa) (http://i157.photobucket.com/albums/t45/DarthMorbius1977/VaderESB001.jpg)

now, let's scale the pic down a bit...

Code: [Select]
[url=http://i157.photobucket.com/albums/t45/DarthMorbius1977/VaderESB001.jpg][img width=275 height=200]http://i157.photobucket.com/albums/t45/DarthMorbius1977/VaderESB001.jpg[/img][/url]
The above code is modified by decreasing both width and height values by 25px. It will look like this:

Normal (forum default) size 300x225
(https://www.fx-sabers.com/forum/proxy.php?request=http%3A%2F%2Fi157.photobucket.com%2Falbums%2Ft45%2FDarthMorbius1977%2FVaderESB001.jpg&hash=428da2c7958233ed7ee80a512d2e184883b7abfa) (http://i157.photobucket.com/albums/t45/DarthMorbius1977/VaderESB001.jpg)

Resized a bit smaller 275x200
(https://www.fx-sabers.com/forum/proxy.php?request=http%3A%2F%2Fi157.photobucket.com%2Falbums%2Ft45%2FDarthMorbius1977%2FVaderESB001.jpg&hash=428da2c7958233ed7ee80a512d2e184883b7abfa) (http://i157.photobucket.com/albums/t45/DarthMorbius1977/VaderESB001.jpg)

250x175
(https://www.fx-sabers.com/forum/proxy.php?request=http%3A%2F%2Fi157.photobucket.com%2Falbums%2Ft45%2FDarthMorbius1977%2FVaderESB001.jpg&hash=428da2c7958233ed7ee80a512d2e184883b7abfa) (http://i157.photobucket.com/albums/t45/DarthMorbius1977/VaderESB001.jpg)

225x150
(https://www.fx-sabers.com/forum/proxy.php?request=http%3A%2F%2Fi157.photobucket.com%2Falbums%2Ft45%2FDarthMorbius1977%2FVaderESB001.jpg&hash=428da2c7958233ed7ee80a512d2e184883b7abfa) (http://i157.photobucket.com/albums/t45/DarthMorbius1977/VaderESB001.jpg)

125x100
(https://www.fx-sabers.com/forum/proxy.php?request=http%3A%2F%2Fi157.photobucket.com%2Falbums%2Ft45%2FDarthMorbius1977%2FVaderESB001.jpg&hash=428da2c7958233ed7ee80a512d2e184883b7abfa) (http://i157.photobucket.com/albums/t45/DarthMorbius1977/VaderESB001.jpg)

When clicked, the images still show up full size in a new window.  You can make any size, but sometimes you have to play with the values a bit to get the image to look decent.  Typically you want to decrease your pixel values by the same amount (25px in this case on both).  Use your "Preveiw" button before posting to check sizes.  Once you find a nice size, then you can make all your picture values the same, and have smaller pics and still be able to post them all.
Title: Re: How to make your Pictures clickable.
Post by: LANDO CALRISSIAN on February 29, 2008, 07:35:59 PM
Great thread. Well appreciated ;D
 thanks DT
Grayven
Title: Re: How to make your Pictures clickable.
Post by: HAN SOLO on April 16, 2008, 11:02:19 AM
Thanks DT. I need to incorporate this technique. I have a tendancy to post alot of pics..... ;)

That ESB looks familiar....Have I seen it before? ;D
Title: Re: How to make your Pictures clickable.
Post by: darthmorbius on April 16, 2008, 01:17:00 PM
Yep you sure have. ;)
Title: Re: How to make your Pictures clickable.
Post by: QUI-GON JINN on January 01, 2009, 07:54:49 AM
I have a small update to add in here!  If you do not wish to resize your pics or write the code to make your pics clickable,  and if you have a Photobucket account,  you can use the "Thumbnail Link" option in your Photobucket account instead.  To find  and activate the option:

"First, go to the "account options" page. It is on the top right of your screen. Scroll down on this page until you get to the subdivision titled "Album Settings." Click on the blue "Link Options" text. In the popup window, find the "clickable thumbnail" box. Make sure it is checked. Save your changes. Now when you hover over pages, in addition to the usual img tags, you will get a thumbnail one."*

*Quoted from Lord Maul at TCSS (Aluke123 on these forums)

Remember,  this is only for those with a Photobucket account.
Title: Re: How to make your Pictures clickable.
Post by: darthmorbius on January 01, 2009, 08:55:15 AM
Thanks Qui-Gon For that update. 8)

I had been meaning to come over and make mention of that feature of photobucket.  It is really handy, and makes for much less hassle getting pictures resized correctly using the pixel counts.
Title: Re: How to make your Pictures clickable.
Post by: orlandocepeda on January 01, 2009, 09:33:48 AM
now thats what im talkin about a step by step man i needed that i hope that wasn't for me DT my last pic was clicky, its a great thread you should sticky this one to the padawan training room
Text only | With Images