Inserting Clickable Thumbnail Images

Step One: Resize the images you want to upload and share. This can be done manually with each picture or there are several programs out there that will resize and edit a large selection all in one go ... alot of time saving!




Step Two: Upload all the images onto an image hosting website. For this example I will be showing it using Photobucket.com. Click here for Photbucket.com



Step Three: Select all the uploaded photos in your album on your photobucket account, making sure you are viewing all the photos (not just page 1 of #). Once selected, click on the "Generate HTML and IMG code" at the bottom of the page.



Step Four: Copy the "IMG clickable thumbnails for message boards - recommended" selection of text into a Word Document.





Step Five: Edit the code so that the IMG tags (Image Code) are in groups of four.



Step Six: Copy the entire code from the Word Document into a new post within a topic and watch your clickable thumbnails appear. Having the IMG tags in the groups of four means that you get 4 landscape thumbnails on each row, for portrait ones you can get upto 6 on each row.

Landscape:









Portrait:

Hi Chris/Tash

Help needed again!

I read your notes on clickable thumbnails and so far so good.

my problem is I am not sure how to get the thumbnails to appear in landscape or portrait?

When I copy the code and paste it the photos always appear down the page not across, I managed it eventually in my insurance clinic post but only after lots of messing about, and I'm not even sure I could do it again! Is there a simple way to get them along the page, a command to insert perhaps. Its just this last bit I have struggled on.

Await your reply


Kim

Hello Kim, I will try to explain in the best way possible.

Easiest way to insert a picture in a post is to upload it (for free) to a photo sharing site like Photobucket.com.
Then copy the [IMG] tag (it will be displayed under the picture once uploaded) into your post.

Example: [img]https://2img.net/h/i733.photobucket.com/albums/lotus/DSCN0498.jpg[/.img]

When it comes to using clickable thumbnails like above (and in the gallery's) it takes a little more patience.
The best way is to copy the code into Word and edit it there before entering it into your post.
When I say edit, all that is required is to remove the line spacing as per example:

With line spacing: (will display the thumbnails down the page)

[URL=https://s280.photobucket.com/albums/kk176/LDC01/?action=view&current=Untitled-1.jpg][IMG]https://2img.net/h/i280.photobucket.com/albums/kk176/LDC01/th_Untitled-1.jpg[/.IMG][/.URL]
[URL=https://s280.photobucket.com/albums/kk176/LDC01/?action=view&current=ldcbannerbetterj.jpg][IMG]https://2img.net/h/i280.photobucket.com/albums/kk176/LDC01/th_ldcbannerbetterj.jpg[/.IMG][/.URL]
[URL=https://s280.photobucket.com/albums/kk176/LDC01/?action=view&current=LDC-Member.jpg][IMG]https://2img.net/h/i280.photobucket.com/albums/kk176/LDC01/th_LDC-Member.jpg[/.IMG][/.URL]

Without line spacing (will display along the page)

[URL=https://s280.photobucket.com/albums/kk176/LDC01/?action=view&current=Untitled-1.jpg][IMG]https://2img.net/h/i280.photobucket.com/albums/kk176/LDC01/th_Untitled-1.jpg[/.IMG][/.URL][URL=https://s280.photobucket.com/albums/kk176/LDC01/?action=view&current=ldcbannerbetterj.jpg][IMG]https://2img.net/h/i280.photobucket.com/albums/kk176/LDC01/th_ldcbannerbetterj.jpg[/.IMG][/.URL][URL=https://s280.photobucket.com/albums/kk176/LDC01/?action=view&current=LDC-Member.jpg][IMG]https://2img.net/h/i280.photobucket.com/albums/kk176/LDC01/th_LDC-Member.jpg[/.IMG][/.URL]

Hope that makes sense?!

Hi Chris, sorry mate thats gone over my head.

I get the photobucket, I get the copy to word, its the last bit about removing the line spacing to get pictures to go across the page. I've looked and looked but I just can't see any difference between the two lots of code in your reply, the top one looks identical to the bottom to me. Can you highlight the bits in red in the top one that are removed in the bottom example.

Sorry for being thick!

Kim

It's fine Kim, nice to see someone taking on a challenge

The code you copy into Word will have paragraphs in them ... so will display each photo thumbnail on a separate line. To solve this you need to find the end of each thumbnail code and select the backspace button so that there is no new paragraph.

To help distinguish what code means what I have coloured it so that thumbnail one is in green, second one in blue and third in orange. Where the red wording is you need to remove the paragraph so that it is all in one.

[URL=https://s280.photobucket.com/albums/kk176/LDC01/?action=view&current=Untitled-1.jpg][IMG]https://2img.net/h/i280.photobucket.com/albums/kk176/LDC01/th_Untitled-1.jpg[/.IMG][/.URL]Remove paragraph here

[URL=https://s280.photobucket.com/albums/kk176/LDC01/?action=view&current=ldcbannerbetterj.jpg][IMG]https://2img.net/h/i280.photobucket.com/albums/kk176/LDC01/th_ldcbannerbetterj.jpg[/.IMG][/.URL]Remove paragraph here

[URL=https://s280.photobucket.com/albums/kk176/LDC01/?action=view&current=LDC-Member.jpg][IMG]https://2img.net/h/i280.photobucket.com/albums/kk176/LDC01/th_LDC-Member.jpg[/.IMG][/.URL]Remove paragraph here

So you will end up with this instead:

[URL=https://s280.photobucket.com/albums/kk176/LDC01/?action=view&current=Untitled-1.jpg][IMG]https://2img.net/h/i280.photobucket.com/albums/kk176/LDC01/th_Untitled-1.jpg[/.IMG][/.URL][URL=https://s280.photobucket.com/albums/kk176/LDC01/?action=view&current=ldcbannerbetterj.jpg][IMG]https://2img.net/h/i280.photobucket.com/albums/kk176/LDC01/th_ldcbannerbetterj.jpg[/.IMG][/.URL][URL=https://s280.photobucket.com/albums/kk176/LDC01/?action=view&current=LDC-Member.jpg][IMG]https://2img.net/h/i280.photobucket.com/albums/kk176/LDC01/th_LDC-Member.jpg[/.IMG][/.URL]

Mine does not look like your example! There are no line/paragraph breaks and so pics still appear down or if I move it all up into continuous code I get this. Don't worry I will figure another way out!



Kim

Atthelimit wrote:Mine does not look like your example! There are no line/paragraph breaks and so pics still appear down or if I move it all up into continuous code I get this. Don't worry I will figure another way out!



Kim

kim, its great your getting the grips with changing your font, but watch it on the coding, as the change in font makes some symbols corrupt- as they are not in all fonts, and so the coding doesn't work.