Photo and Link Tutorial for vBulletin®

We've got some fun stuff going on over at DSP and some of that stuff requires the ability to post images or links into a forum or thread.  I wrote up this tutorial to show anyone who struggles with this type of thing just how to do it.

DSP uses vBulletin so this tutorial is geared for that.  There used to be some pretty nifty short cuts for getting images pasted into the threads but certain browsers tend to like to add a TON of gobbly goop to the web address and vBulletin limits character count to 5,000 or something like that so when all that gobbly goop is added because of the short cut, an error message pops up.  It's very frustrating.  So HERE is how you post pictures and links in a thread the correct way.

Okay, so you've found the photo or page on the site or anywhere on the internet for that matter and you want to include it in your reply or comment on a thread in the forums. 

This is layout was the most recent in the gallery when I wrote up this tutorial.  It just so happens to be a page by Sands_Healy.  I always enjoy her pages and her photos.  Anyway, for what ever reason, this is the photo you want to post.

First, right mouse click on the photo.

That little window there will pop up with some options for you.  Pick "View Image".

This is what you get when you do that.

You need to grab the web address which is at the top.

Highlight the whole stinkin' thing unless it's got something that says "&zenid=.....gobbly goop....."  This can happen when you grab an image or link from the DSP store which is powered by Zen Cart.  I guess it's kind of like having your underwear showing, it just happens.  If that happens, highlight everything up to, but not including the "&".  It's that zenid word.  It's like a bad word for links or something.

Anyway, so you've highlighted the web address for the pretty picture and you need to copy it.  This can be done by another right mouse click which will bring up another little box where you will find the word "Copy" OR the keyboard short-cut of "ctrl" and "c" for windows ("command" and "c" for mac).

Head back over to the tab where the thread is and click on the "Go Advanced" button.  Oh yeah, big time here!!

When you click on that, this screen comes up.  Yuppers, a whole lot of options. 

Right at this moment, we are only interested in the "insert picture" icon.  Looks like a basic landscape photo.

Once you click on that, a box pops up where the web address goes.  You can either right mouse click again on that blue highlighted text and choose "paste" when that option box comes up, OR you can hit "cntrl" + "v" ("command" + "v") to insert the address or URL of the image into the space.

Then click okay.

What's left is this bit of code.  It may or may not be highlighted in blue like it is in the image.  The highlighted part is the web address or URL of the image and the other two bits is the code that tells vBulletin to stick the picture in there.  And there's no need for a super secret decoder ring, COOL!

After typing in what ever comments you have, click the submit reply button.

And, ta-DA... just like magic, there's the picture!

Okay, that's all well and good, but what if you just want to put a thumbnail image into a thread?  Thumbnails are the smaller images from the gallery.  Not sure where or why the word "thumbnails" came from for this situation...maybe someone wrote a dissertation all about it or maybe I should just move along with the tutorial.   Anyway...moving along... do that right mouse clicky thing again to get the thumbnail image alone. 

The grab that address or URL thingy again.

Navigate back to the thread and hit the "Go Advanced again".  Yes, totally the same way.

Same as before.  Kind of boring now, isn't it. 

Pop it in there, press okay...

Yeah, yeah, yeah... easy peasy.

Let's shake things up a bit here. Let's get a link directly to the page address in there.

Go back to the tab where the thumbnail is and hit the go back.

That will take you back to the gallery of all of those thumbnails... (my toe nails are painted blue, by the way... not that anyone can see them... 'cause it's winter... and I wear two pairs of socks.)

Click on the thumbnail to get to the big image.

Grab that big image web address just like you did before.

Navigate back to the tab where the thread with your other bit of code is hanging out.

OOoooo, I lost my big orange arrow.  Sorry... can you see the icon with the Earth and the clippy thing.  That's what my big orange arrow would be pointing to if I hadn't lost it.

Anyway, when you click that icon box, this pops up and.... well, you know what to do.  Slip the address in and click OK.

Lot's more gobbly goop of secret code.  COOL!

Click submit reply....

...and this is what it will look like.

Not bad.  Serves the purpose, a thumbnail and a link.  BUT guess what, we can make it prettier.

BEEP. Beep, back the truck up. At the point where the code for inserting the thumbnail is where we need to be.  Okay, now... highlight the thumbnail image address (URL) and those two codes on either side of it like I did here.

The go back to the full page again to get the URL of the page.  Highlight it and copy.

Oh look, I found my big orange arrow!  Click on that Earth + clip icon again...

...and paste in the URL to the page.

Wooooooooe Nelly, that's a whole lot of Goggly Goop Code there.  It's okay, trust me, it'll work.

After hitting submit reply this time, you'll end up with just the thumbnail.  Where did the link go????

That's where the magic comes in.... that thumbnail is now the link to the actual page.  If you let your pointer hover over the thumbnail, the web address (URL) to the actual page you have your link for will show up at the bottom of your screen.  How cool is that????  And when you, or anyone else, clicks on that thumbnail, they will go directly to the page.  Pretty neat, eh?  That's called a pretty link.


I hope you enjoyed my tutorial and can use this new secret code knowledge for the upcoming festivities that are going on over at Digital Scrapbook Place.