fiduciary

Author Topic: How to make your Pictures clickable.  (Read 15482 times)

0 Members and 1 Guest are viewing this topic.

Offline darthmorbius

  • Master Force User
  • *****
  • Posts: 12196
How to make your Pictures clickable.
« 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



Clickable linked image


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

« Last Edit: December 27, 2010, 06:19:31 AM by QUI-GON JINN »

Offline Darth Resev

  • Man of many names
  • Master Force User
  • *****
  • Posts: 5921
  • I'm back
    • Facebook
Re: How to make your Pictures clickable.
« Reply #1 on: February 29, 2008, 06:43:50 PM »
Thanx DT,Ill be sure to put this to good use  :)
sig removed, ...animation not allowed

Offline Bandit-Jedi

  • Formerly known as Bandit-Jedi
  • FX-SABERS VIP
  • Master Force User
  • *
  • Posts: 2688
  • I have a way with...the Force.
    • My other love...2002 Trans Am Collector Edition
Re: How to make your Pictures clickable.
« Reply #2 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.

May The Force FX Be With You!


Offline darthmorbius

  • Master Force User
  • *****
  • Posts: 12196
Re: How to make your Pictures clickable.
« Reply #3 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:



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


Resized a bit smaller 275x200


250x175


225x150


125x100


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.
« Last Edit: March 01, 2008, 02:39:36 AM by DARTH TYRANUS »

Offline LANDO CALRISSIAN

  • formerly known as Grayven
  • FX-SABERS VIP
  • Master Force User
  • *
  • Posts: 1424
  • I have recently struck a deal with empire
Re: How to make your Pictures clickable.
« Reply #4 on: February 29, 2008, 07:35:59 PM »
Great thread. Well appreciated ;D
 thanks DT
Grayven



All good is just as flawed as all bad. True power lies somewhere in between.
I like spaghetti, You like spaghetti? If so check out the spaghetti party over at judgesabersmith.com

Offline HAN SOLO

  • Jedi/Alliance General aka FX-Sabers' "The Most Interesting Scoundrel"
  • FX-SABERS VIP
  • Master Force User
  • *
  • Posts: 8506
  • Meet my business parter. His name is DL-44.
Re: How to make your Pictures clickable.
« Reply #5 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


Negotiator 007
More to follow.........

Offline darthmorbius

  • Master Force User
  • *****
  • Posts: 12196
Re: How to make your Pictures clickable.
« Reply #6 on: April 16, 2008, 01:17:00 PM »
Yep you sure have. ;)

Offline QUI-GON JINN

  • Also known as Jay-gon Jinn!
  • JEDI/ALLIANCE Master MODERATOR
  • Master Force User
  • **
  • Posts: 8471
  • Your focus determines your reality
Re: How to make your Pictures clickable.
« Reply #7 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.


Offline darthmorbius

  • Master Force User
  • *****
  • Posts: 12196
Re: How to make your Pictures clickable.
« Reply #8 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.

Offline orlandocepeda

  • Force User
  • ***
  • Posts: 144
  • sometimes they call me Darth Parker
Re: How to make your Pictures clickable.
« Reply #9 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

 

retrousse