TUTORIAL: Creating Clickable Thumbnails

[Mister Phes]

Creating Thumbnails

Step 1: Getting the Thumbnail link

If You're using FireFox

Right Click on the thumbnail in the Brickshelf folder and select "Copy Image Location"

If You're using Internet Explorer 6 or above

Next

Right Click on the thumbnail in the Brickshelf folder and select "Properties" then wait for the Properties dialogue box to appear.

From Address: (URL) highlight the entire link and then copy (CTRL C or Right Click then select "Copy").

E.g. Highlight

Make sure you highlight all of the URL as it may span 3 lines!!!

To ensure you highlight the entire URL click it and then press CTRL A or Right Click then "Select All".

Step 2: Paste Thumbnail link into Eurobricks

• Return to Eurobricks thread.
  
• Select the Insert Image button then paste (CTRL V or Right Click and select "Paste") the Brickshelf URL into the box that pops up.
  
• The result should be the following:
  

Step 3: Getting the Image link

• Return to Brickshelf.
  
• Click on the thumbnail to load into a Brickshelf Preview of that image.
  
• Click on the preview image to go directly to the image file.
  It is important to click a second time because if you copy the preview URL you will get an error message when attempting to post the image in the forum.
  
• Highlight the image address in the Address Bar then copy (CTRL C or Right Click then select "Copy").
  

Address to be copied should look something like this:

Step 4: Make the Image a link

• Return to Eurobricks
  
• Highlight the image code you have just inserted and then click the "Insert Link" button.
  
• Paste the link you just copied into the dialogue box which appears.
  

The URL tag should wrap around the IMG tag, for example:

Remember

• The code should only occupy ONE line, it only spans two lines in this example because of space limitations.
  
• Be sure to let users know the thumbnail is a link otherwise they may not realise.
  

End Result

You should finish with this:

Click on Thumbnail to view larger image

[Bonaparte]

Nice job Mr. Phes! These tutorials are very useful!

I would propose to combine them with the "TUTORIAL: How to perform a batch image resize" in the same thread. So we have all the tutorials in different posts in 1 thread inorder to avoid too many pinned topics.

What do you think?

[Mister Phes]

I think its a good idea but unfortunately its not that simple.

For you see the posts are sorted chronologically so if I was to move the above posts or merge the threads then posts be adhered to the very end of the thread. So what we'd have is the first tutorial about 15 posts of discussion and then the two tutorials which wouldn't be very orderly.

The second option is to edit the first post of the other thread and add on to it but I'm reluctant to do that because the post is already long, and when posts get really long they become hard to manage. Besides I'd lose my feedback pole.

Third option is to merge the tutorial posts and move the discussion posts to a seperate thread. Maybe that would be the most convenient option but I'll leave them as they are for the moment.

[Bonaparte]

The third option seems best to me.

This way its also streamlined with the other pinned topics which also have a separate discussion thread.

[Mister Phes]

However, for the sake of the feedback poll I'll keep them as seperate threads for the time being.

So if anyone has any comments, feedback or suggestions regarding this tutorial:

POST THEM HERE!!!

[Holodoc]

Thank you very much for this tutorial!

I had a little problem with the FF/IE partition, but after a moment of confusion I got the picture! :) (my fault, so don

[Norro]

I gave this a 5. I wish it had been around when I was trying to learn how all the computer people on Lugnet were able to do this. I also assume you meant the FF steps to double for Safari...

God Bless,

Nathan

[Mister Phes]

I had a little problem with the FF/IE partition, but after a moment of confusion I got the picture! :) (my fault, so don

[captaintau]

That's really useful. I'll probably revisit this another time when I feel the need, so please keep it prominent.

[Norro]

A little late... I didn't use this program, but the tutorial did inspire me to try batch treatments, so I would rank it as a huge success. Remember every time you help an under-educated computer user... God smiles ;-)

God Bless,

Nathan

[Norro]

But if you've got a Mac Mr Norro then by all means test it and let us know how you went.

The safari steps are almost identical to FF... just a few minor name changes...

God Bless,

Nathan

[Bonaparte]

Very nice to see all these great tutorials grouped in 1 thread *y* !

[Optimax X]

Well i tried that firfox tutorial and it didn't work at all, i followed the tutorial as it said, and if anything, i has made it bigger.

[Mister Phes]

Can you post a link to the thread where you were attempting to create the thumbnail?

I'll have a look and then I'll tell you what you did wrong and how you should be doing it.

[Just Imagine]

I'm really sorry for bumping a 3 year old topic, but when I try to put 3 images in my sig as links to my MOC's I get an error. How come other members have more then 3 images as links to their topics? I did as the tutorial said, but I get an error message because I have more then 2 URLS.

Edited July 13, 2010 by Just Imagine

[SlyOwl]

I'm really sorry for bumping a 3 year old topic, but when I try to put 3 images in my sig as links to my MOC's I get an error. How come other members have more then 3 images as links to their topics? I did as the tutorial said, but I get an error message because I have more then 2 URLS.

Vassals can only put a maximum of 2 links and 4 pics in their sig - essentially to prevent cluttering up threads and to stop people joining for the sole purpose of self-promotion

[Brickstarrunner]

I'd hate to bump, but this needs to be updated, because the new coding is giving me trouble because it inserts images and links automatically instead of just having text.

[Big Cam]

I'd hate to bump, but this needs to be updated, because the new coding is giving me trouble because it inserts images and links automatically instead of just having text.

That makes it even easier. Click the image button, paste your image URL(thumbnail sized) [ then hit submit, you then highlight the newly displayed URL that now has image tags around it, then click the URL button, the image tagged url should already be in the text portion and you now paste the full sized URL in the URL field.

Being that this thread is five years old, I don't see a need to update it, since most people don't know it exists, and this type of tutorial is probably better suited elsewhere today than just the pirate forum.