Without trying to sound like a commercial for Photobucket; creating an account is free, easy and very quick. All you need is an email address; to which, as far as I'm aware, you get sent no spam at all from Photobucket themselves. Photobucket give you 500mb of free storage and if you manage to fill that, you just go to Hotmail, create a new email address and use that to create another Photobucket account - and another 500mb of storage!
However, Photobucket is free because it splashes adverts across every screen you see. They have now started throwing videos at us as well. However, on balance, this is a small price to pay for such a great service. I have blacked out the adverts on these pages - its a principle thing :)
In your browser, go to http://photobucket.com; somewhere on that page there will be a green "Join Now: It's Free" button, like the one below. Click it.
On the next screen (like the one shown below), think of a username and type your chosen password into the appropriate boxes. If the username is already taken, try again. Then click the "Next Step" button.
The screen shown below will appear, asking you to enter some more details, an email address and an anti-spam code. Enter all this information and click the "I accept" button.
You now get the option to sign up for their premium service - unlimited storage space.
Click Next if you want to sign up or the little tiny "No thanks" button beneath it to ignore the message. If you click Next you will see this screen...
Just use the top bar navigation menu to return to the home page. You will be signed in under your new username already.
You will end up at the home screen - full of adverts.
If you are going to load lots of photos, its best to organise them into folders, as they would be on your computer. Photobucket calls these albums of course and you can create as many albums as you like. Use the "Create your first album" button (see above) to create one (see below).
You will be taken to the new album automatically and you are ready to upload some photos.
There are two ways to upload photos. If you are only uploading a couple then use the "Upload images and videos" button. This method is shown in full below. The other method is quite new and is called the "bulk uploader". This installs some Java code in your browser and allows you to upload whole folders of files at one go. Very useful if you want to upload lots of files. But lets just concentrate on uploading a small number of photos to start with.
By clicking the "Upload images and videos" button, you are presented with the standard Windows file selection dialog box. Navigate to the file(s) you want to upload and if its a single file; double click it. This will automatically close the dialog and start the upload process. If you want to add several files from the same folder on your PC then single click the first one and then hold down the CTRL key and single click the other files in the folder; as shown below. Then click the "open" button.
When the "open" button is clicked, the upload process begins.
The file size on Photobucket is limited to a maximum of 1024x768 and by default this is what your photos will be reduced to if you select a photo on your machine that is bigger than this (which most photos will be unless you have reduced them already).
However, the upload process will copy the original file from your PC, in its original size and will reduce it during the save process on the Photobucket server. This means of course that if your original photo is 3Mb on your machine (which it could well be), then Photobucket will pull 3Mb across your network connection for every file you upload. Even on a broadband connection this will take forever, especially if your uploading a few files.
The best idea therefore is to reduce the photos you want to upload, before you upload them. This reduces the bandwidth you use on your broadband connection and it significantly increases the speed with which you upload files to Photobucket.
In my case, I have a folder in My Pictures called "Photobucket" and in here I copy all the photos I want to upload and I reduce them to 1024x768 - or whatever other resolution I want to upload them as. I can then upload them much quicker.
Once the upload process has finished, Photobucket gives you the chance to add a title and a description to the photos you just added to the album. If you choose not do this, the photo will have no description and the title will be the filename of the photo.
Make any changes you wish and at the bottom of the page, select the "save and share now" button.
That's it. You've added a number of photos to an album in Photobucket and you're most of the way there. If you want to share the photo in facebook or myspace then use the options at the top of the page shown below, otherwise, just click "Return to album" to go back to the album homepage.
The screen below, shows the finished album. This one has just one photo in it. Each photo has four different links associated with it; one each for email and instant messaging, a direct link, HTML code for a web site and and IMG link for adding to a message board. More about these below. Suffice is to say at this point that this is the real beauty of Photobucket over any other image hosting website I have found to date.
There are many image hosting websites out there and I have tried most of them. Some have much better features than Photobucket for other functions, but none lend themselves to website publishing the way Photobucket does.
A really useful feature of Photobucket is the ability to send your photo codes to Walking Places editorial staff - so they can include them into journals - this is particularly useful if your journal is being managed completely by Walking Places.
You can select multiple photos in your album by clicking the check box beneath the photos you want to send - or you can check the "Select All" box at the bottom of the page to choose all the photos in the current album. You can then click the "Generate HTML and IMG Code" button (see below).
The resulting page has a number of fields, which will all be populated with code. Click the second box down "HTML Images...." and it becomes highlighted. Copy and Paste this code into an email and send it Walking Places. We can then use that code to create your web pages.
You've already done the hard part. You've resized and uploaded your photos to the Photobucket account you created. Now all you need to do is add those to your webpage.
I can only speak for Microsoft Frontpage (or Microsoft Expression Web as the replacement for Frontpage is now called), but I'm sure this is pretty much the same process for any other web publishing program you want to use.
You will have already resized the photo and possibly cropped it on your PC at home to make sure its the right size and showing the right subject matter. You will then have uploaded this to Photobucket, with a maximum possible size of 1024x768 - big enough for most websites. However, Frontpage or whatever other publishing program you are using will let you resize the image once its embedded into your HTML document, so don't worry too much if it doesn't look quite right when it first appears in Frontpage.
The images below, are what appear in the album you created in Photobucket and then uploaded from your PC. Each photo has four weblinks associated with it. We are interested in the "HTML Code" link. This is the link we need to embed in our Frontpage document to point to the image in Photobucket.
Click inside the box to the right of the word "HTML Code". The box will be
highlighted and you will see a yellow popup that says "Copied" appear next to
the box (as shown below). This is one of the nice features about Photobucket.
It's just copied that code into your clipboard for you.
Now go to your Frontpage document in "Design" mode and click the page where you want the photo to appear. Now go into "Code" mode - thats the view that shows the code that makes up the webpage. Because you clicked the place you want to photo to appear in Design mode, the cursor will now be located in the correct place in Code mode. Simply click "Edit > Paste", or press CTRL+V and the code from Photobucket will be pasted into the correct place.
Return to Design mode and see how it looks. Frontpage retrieves the link from the code you just pasted and displays the photo you have loaded in Photobucket. You can now double click the picture thats appeared in Frontpage and modify its settings if you wish. You can change the size on the screen, change the caption that appears when the reader hovers over the picture and so on. Just don't change the link!!
That's it done then! Hopefully you've got the photos from Photobucket on your webpage and you've saved a load of space on your server (or our server if you're uploading to Walking Places).
When you're dealing with 20 or 30 photos, the process described above can become a little painful. Copying and pasting 20 or 30 lines of code will take you ages. But fear not, Photobucket have thought of something that will help a lot.
At the bottom of each album you will see a check box a four greyed out buttons. By selecting the check box you automatically select all the photos in the album and enable the four buttons. The one we are interested in (unless of course you want to delete or move all your photos), is the one on the end labeled "Generate HTML code". Click it.
The following screen appears. Photobucket has consolidated all the code lines for all your photos into one copyable block of text. One block of text for each of five different types of applications. The one we are interested in is the second one; "HTML images for Ebay... etc."
Again, if you click inside the box you automatically get all the text copied to your clipboard - no need to find "Edit > Copy" or CTRL+C. You can then take all this code to your webpage (in "Code" mode) and CTRL+V to paste it into your page.
Note that the text includes a <center> and </centre> command at the beginning and the end of the block, so you may want to get rid of these, as they position the photos in the centre of the page.
You can then go back into your "Design" mode and add the text you want around the pictures as appropriate. Saves you going back and forward to Photobucket loads of times.
I personally prefer to show the full size photo on my web page, rather than a small thumbnail version and a hyperlink to the full photo. Photobucket allows you to do either.
If you are showing the full photo, then a hyperlink is irrelevant and could lead people away from your site by accident. So the best idea is to be aware of the different ways Photobucket handles hyperlinks.
When you add photos into your website one at a time, as discussed in the first part of this document, Photobucket inserts the hyperlink into the code you copy into your webpage. As in the dialog box on the left below.
If you left this code as it is, and a reader clicks on the photo (left above), they will be taken to a new page (or tab if you are using IE7) and that photo will be opened in Photobucket as shown below. Complete with adverts and all the other clutter Photobucket adds to the picture. Not ideal I'm sure you'll agree. Surely if you want the reader to see the full photo you would be better off showing it on the webpage in the first place?
If, however, you use the multiple photo code block we discussed in Advanced Options (and used the second block - not the first), then the code you end up pasting into your webpage does not include the hyperlinks (as seen in the dialog box on the right above). This means that the Windows cursor will not change to the pointing finger when you hover over it and clicking it will have no effect.
I have used the same two dialog boxes to identify another thing to be aware of.
Photobucket will always try to promote itself - which is to be expected, but not necessarily desirable.
When a reader hovers their mouse over a picture on your site, they are generally expecting some description of that photo to appear next to the mouse cursor. This is called "Alternate Text" by Frontpage and is designated by the code alt="xxxx" in HTML. As we can see from the screen shots above, Photobucket puts its own name in this space by default. So we need to change it if we are to avoid our readers seeing "Photobucket" every time they hover over a photo on our site.
We can do this a couple of ways.
Firstly, when we uploaded the photos to Photobucket it asked us if we wanted to add a title and a description to the photo. We may at that point have said "no thanks", but this is the first opportunity we have to change the default "Photobucket" caption to something else. If you add a title to the photo, this title will be added to the Alternate Text field of any links that are subsequently created for that photo by Photobucket.
The second chance is once the photo code has been copied into the web page. We can either double-click each photo and change each individual Alternate text field to something more appropriate, or we could go into Code mode in Frontapage and do it there. Just search for alt=" and then change the Photobucket entry to something you want to have associated with the photo.
That's pretty much it. If you have any questions about this tutorial, then drop me a mail here: LoneWalker