• Protip: Profile posts are public! Use Conversations to message other members privately. Everyone can see the content of a profile post.

Clickable Thumbnail Links

Rating - 0%
0   0   0
Joined
Jul 16, 2002
Messages
5,630
Location
Bay Area CA
Here's a "how-to" guide if you would like to include in your posts, a clickable thumbnail picture that links to open your full-size picture in a new window.
This will allow you to link lots of pictures in your thread w/o necessarily taking up too much space & being kinder on those with slower connections (who can then select which pics to view in greater detail)

If you would like to utilize this feature, it's not too difficult - Here's what you do:
(Of course I used the technique for the pics in this illustration so click on them to bring up the full-size image.)

1) Start by uploading your picture to your NSXPrime gallery



Just follow the instructions after you click on the "upload photos" link. Note that on the extreme left side of the same tool-bar is a link that will take you to your personal gallery at any time, designated "My Gallery".


For next steps, utilize the tools in the create message toolbar:




2) Go to your gallery and place your mouse over the thumbnail of the pic you wish to use: Right-click over the thumbnail image, left click to select properties, then place the cursor over the URL and hold left click down & drag across the entire URL to highlight it (release button at the end of the highlighted string); then right-click, "copy" & "OK"
.


For the following directions, I have substituted the [] brackets with {} otherwise it would enable the code to work & not illustrate the format; so when you see {} these will really be [] in the actual result.

3) Take the URL of your thumbnail that you just copied and use the "Insert Image" tool and paste it to create an image link in your post field.

e.g. {IMG}http://www.nsxprime.com/photopost/data/500/5957DSC000681-thumb.JPG{/img} (with [] instead of {} of course);



4) Then "cut" that string you just created & use the "Insert Hyperlink" tool to make the link; "paste" the "cut" image code into both fields when the tool prompts i.e. the text for the link and also the URL

This will now be placed in your post field.

e.g. {URL={IMG}http://www.nsxprime.com/photopost/data/500/5957DSC000681-thumb.jpg{/img}}{IMG}http://www.nsxprime.com/photopost/data/500/5957DSC000681-thumb.jpg{/img}{/URL} (again I replaced all the [] with {})




5) To complete, you need to make a final edit by deleting the {IMG} codes along with the "-thumb" component in the first part (the link) of the string :
{URL=<s>{IMG}</s>http://www.nsxprime.com/photopost/data/500/5957DSC000681<s>-thumb</s>.jpg<s>{/img}</s>}{IMG}http://www.nsxprime.com/photopost/data/500/5957DSC000681-thumb.jpg{/img}{/URL}

= {URL=http://www.nsxprime.com/photopost/data/500/5957DSC000681.jpg}{IMG}http://www.nsxprime.com/photopost/data/500/5957DSC000681-thumb.jpg{/img}{/URL} - normally all square brackets again.

(You can of course just paste the actual link for the full-size picture when you make the URL, but it's quicker & easier to paste the same link twice while it's already on your "paste" clipboard and just delete the "extra" parts - the IMG code & the -thumb extension.)



& this is what the final result should look like, when I do it "for real" retaining the [] instead of the {} I used for illustration above:




(Note: if you click on the "quote" feature look at the bottom of the quoted field & you will see the actual coding for the linked image below - no need to submit the quote, just use it for illustration)

Tip: when posting multiple pics from your own gallery, the format is very similar for all your pics - so just copy the entire string & paste it, then just replace the component at the end with that from the new picture

e.g. to use same for this pic {img}http://www.nsxprime.com/photopost/data/500/5957equips_005.jpg{/img}

First copy & paste the previous entire string created

i.e. {URL=http://www.nsxprime.com/photopost/data/500/5957DSC000681.jpg}{IMG}http://www.nsxprime.com/photopost/data/500/5957DSC000681-thumb.jpg{/img}{/URL}

Then delete the unique picture identifier & replace with the new appropriate identifier

so becomes {URL=http://www.nsxprime.com/photopost/data/500/5957<s>DSC000681</s>equips_005.jpg}{IMG}http://www.nsxprime.com/photopost/data/500/5957<s>DSC000681</s>equips_005-thumb.jpg{/img}{/URL}

(colour & strikeout coding added for illustration only)

or {URL=http://www.nsxprime.com/photopost/data/500/5957equips_005.jpg}{IMG}http://www.nsxprime.com/photopost/data/500/5957equips_005-thumb.jpg{/img}{/URL}

which is actually (with correct [])




Hope someone finds this useful & follow the hieroglyphics - it looks more complicated than it is in practice with having to use the {} for illustration.
 
Last edited:
Top