Tutorial for Posting Linkable Thumbnails -1 reply

Please wait...

AbblePC

I don't spend enough time here

50 XP

20th October 2002

0 Uploads

24 Posts

0 Threads

#1 15 years ago

This is a Turorial for posting Images {Thumbnails} with linkable Url's to other Images or pages. In this Tutorial I will have you follow through various steps to create an Image and a Thumbnail then use that thumbnail to link to a larger image or other web site, file etc..

[color=yellow]Step 1.[/color]

[color=orange]Obtain your free web space via your ISP or many of the free online web space providers like AngelFire, Geocities, etc..[/color] For example I have an ISP that gives free web space. This is probably the easiest to use since they give you the tools or FTP space to add your pages or files needed for a personal web page.

[color=yellow]Step 2.[/color] [color=orange]Open image...[/color]

Take an image, in this example I will use a screenshot.. and open it in a graphic editing program. Again for an example I will use PaintShop Pro. open_image_tmb.jpg open_image1_tmb.jpg [color=yellow]Step 3[/color] [color=orange]Create a Thumbnail...[/color]

Resize that image to a size that is more appropriate to posting on a forum. A good rule of thumb I like to use is Height 30 Width 30 and this is using Percent of original image not pixel size. You can experiment on this part for the best results of size. The main idea here is to resize your image for use as a Thumbnail.

open_image_resize_tmb.jpg resize_img_tmb.jpg

[color=yellow]Step 4.[/color]

[color=orange]Save your Thumbnail[/color]

Save your thumbnail as a jpeg and give it a file name such as image01_tmb.jpg

save_tmb_tmb.jpg Image01_tmb.jpg

[color=yellow]Step 5.[/color]

[color=orange]Save your Image..[/color]

For the purpose of this next step, in the graphic program select undo to undo the resize of your image. Img_undo_tmb.jpg The image should now look to be the same as it was before you resized it. Now save the image into the same directory as your thumbnail in the previous step. Most often when you save this image it will still have the filename as the thumbnail in the previous step in the Save As.. diolouge window. Simply edit the end of the file name to not have the _tmb.jpg by making it look like this... Image01.jpg and save it. img_sav_tmb.jpg

You will now have two saved sizes of the same image with different file names, one as a thumbnail and the other as the original size.

[color=yellow]Step 6.[/color] If you have already obtained webspace before, you will not have to do this step to post images therefore you will only need to skip to step 7

[color=orange]Add your Image to your webspace...[/color] This is by far the hardest part and can be done in several different ways. For this tutorial I will explain by using a method called Web Space, since many of you are running WinXP or Win2K and have this option built into your OS.

Go to your My Network Places and click on the link that says,, Add a Network place. Follow through the wizard answering the questions with your appropriate Web Space address and account information. Once completed you should now have a new icon in your Network Places that is a link to your Web Space. This is the same for both WinXP and Win2K. If your using Win98 or earlier, try one of the programs listed below.

make_netwrk_tmb.jpg wizard01_tmb.jpg wizard01_acct_tmb.jpg

Other ways are to use an FTP program such as CuteFTP, SmartFTP, AceFTP, etc.. There are many freeware solutions out there that allow you to use thier program to upload Archives, Documents and Images to web spaces.

Click the Icon for your Web Space and log on if neccessary. Then simply Drag the previous saved files to your Web Space window form the directory you saved them in.

drag_n_drop_tmb.jpg

I typically use the My Pictures folder in My Documents and have a Folder for different types of Images, from Screenshots to graphic images or Digital Camera Personal Pics I like to post online.

If you want to use Choice one in the Step below then only copy your original sized image01_jpg to your Web Space.

[color=yellow]Step 7.[/color]

[color=orange]Posting your Linkable Thumbnail[/color]

In this step you have have already created an image as both a thumbnail and the original sized image and have copied them to your Web Space by either dragging the images to your Web Space folder or by using an FTP program as mentioned in step 6. Now you are ready to post your image to a Forum or other web page that allows linkable images.

[color=orange]2 Choices[/color]

[color=red]Choice 1[/color] If you are posting to a Forum that allows Attachements such as images or archived files you can do this next step easily to attach your thumbnail and only have to copy your original sized image to your web space. This is probably the easiest form for showing your thumbnail along with posting a link to the actual sized image beside it. Or you can just attach your original image01.jpg, but we are asuming it is either too large for the forum to accept it or that it is uneccesary to add images to an already growing database of archives and other images. Most forums have a web space available that can only store so many items. Check with your forum admin to be sure that attaching large files is ok. It's best if you attatch the thumbnail version since it's smaller in size and easier ofr others to view a preview of what you are showing, then add a url to point to the full size image.

Do this by adding your {ATTACHMENT} by using the attach file section below the Post window by clicking the "Browse" button and locating the Thumbnail image Image01_tmb.jpg then click "open". Click the "http://" Type in a comment if warranted, if not you can click Cancel and on the next line type in your URL to the Full sized Image01.jpg which would be along the lines of http:// users.adelphia.net/~abblepc/image01.jpg (space added to omit link).

[color=red]Choice 2[/color]

[color=yellow]Spaces are added in the VB Code in the following examples to allow you to see the code used.[/color]

In this option you post your thumbnail image01_tmb.jpg in the following manner.

[ img]Insert URL here to your thumbnail then close it with [/img ]

You then attach the link to that image as a URL so that a person will go to it when they click on your thumbnail...

[ url=http://users.adelphia.net/~abblepc/image01.jpg][ img]http://users.adelphia.net/~abblepc/image01_tmb.jpg[ /img][ /url]

The URL code is added if you noticed, to the begining and the end of the Image code IMG. So you essentially are doing the following

[Link to this URL of larger image][ to this image that shows on the page as a thumbnail] [End my link]

When completed it will show your thumbnail with a URL link to the original sized image on your Web Space.

________________________________________________ You have now completed the Tutorial and have done either of the following... If you used Choice 1, you attached your thumbnail image using the "Attach File" option and then simply added a URL pointing to your original sized image on your Web Space. If you used Choice 2, you inserted your thumbnail image from your webspace using it's web address as an image placeholder, then embedded in that thumbnail a URL that points to your original sized image on your Web Space. I hope this helps many of you on attaching linkable images using thumbnails, as I know I myself love to see these images in posts and being able to click them to see a larger more detailed image. This is a great way to post smaller images that link to things like Screenshots, Background Images, Web Pages, Download files via FTP sites, and the list goes on. Your imagination is the limit to posting linkableimages. Link On! :D




Iniog

I want to be like Revenge

50 XP

6th September 2002

0 Uploads

328 Posts

0 Threads

#2 15 years ago

Why thank you another handy thing i didnt know would work

Make this a sticky !




aquaorange

Slightly cooler than a n00b

50 XP

20th March 2005

0 Uploads

30 Posts

0 Threads

#3 13 years ago

Go to this website: http://home.swipnet.se/~w-52253/hyper/program/free_product.htm#gallery and download Gallery version 1.5.5. It's a really good program that makes thumbnails, and if you choose, html pages that you can choose the amount of collumns/rows, if it shows the dimmensions, size, and it will link to the full size for you. The thumbnails you can choose the size of too.