How to post thumbnails from Photbucket

JimD

Waiting for Godot...
Moderator
I figured I would put up these instructions for anybody interested in the "How to" for Photobucket thumbnails. For this example lets assume that you are in the process of creating a new thread on Xweb and want to add a picture (or many pictures). You have entered the text and now your are ready to go get some pics. Here is what you do.

1. Open a new browser window (leaving your Xweb thread open and ready for action) then go to your Photobucket account and select an album to work with. I chose my 2007 FLOSTL Fall Drive:
thumby_tutor_1.jpg


2. Hover your cursor over the first picture in your album and you will see the little menu drop down. Note the empty check box next to the image file name directly below the picture. (In this example it is "IM002196.jpg")
thumby_tutor_2.jpg


3. Click in the empty box and a check mark will appear.
thumby_tutor_3.jpg


4. Do the same for a couple more pictures in your album and note that the check marks stay visible under each pic to remind you that you have selected these pictures.
thumby_tutor_4.jpg


5. Now scroll to the bottom of the Photobucket album page and find the button labeled "Generate HTML and IMG code" which I have circled in yellow.
thumby_tutor_5.jpg


6. Click the "Generate HTML and IMG code" button and you will see the following page. The third section labeled "IMG clickable thumbnails for message boards - recommended " is what we are looking for and I have circled it in yellow.
thumby_tutor_6.jpg


7. Click anywhere inside that box of text and Photobucket will automagically select all the text for you.
thumby_tutor_7.jpg


8. Now find your browsers copy feature (this example is done in Firefox) and use it to take a copy of the highlighted text in the "IMG clickable thumbnails for message boards - recommended " text box.
thumby_tutor_8.jpg


9. Now we shift back to the Xweb forum browser window we started in, which has been patiently awaiting our return. I will use the creation of this thread as an example. ( You are not seeing double... well... Tony might be ;) )
thumby_tutor_9.jpg


10. Now use your Xweb browser windows paste feature to drop the text you copied earlier in the Photobucket browser window.
thumby_tutor_10.jpg


11. Step 10 above will drop in the preformatted text that will display the thumbnails of the pictures you selected from Photobucket. It will look like this when you paste it into your thread:
thumby_tutor_11.jpg


12. It will look like this in the "Preview Post" option if you want to look at your handiwork before hitting "Submit New Thread".
thumby_tutor_12.jpg


13. Now you can play around with it in preview a bit and put text between pics if desired. Which would look like this in text mode:
thumby_tutor_13.jpg


14. And will look like this in preview mode:
thumby_tutor_14.jpg


15. So when you are happy with your work you can finally hit "Submit New Thread" and wait for the flames... err.. I mean wonderful camaraderie Xweb is known for.

I am sure I will get a few whacks on the head for not using thumbys in this post. ;)

Good luck!!
 
Last edited:
How to resize a picture in Photbucket

Hi JJ,

Here is what you need to do to resize a picture:

1. Go into your Photobucket album and note that each picture has a little menu bar above it that says "edit|move|share|delete".
resize_tutor_1.jpg


2. Click on the "edit" button above the picture.
resize_tutor_2.jpg


3. Photobucket will load the picture editing page. It takes a few seconds to load up.
resize_tutor_3.jpg


4. Once the edit screen is loaded, click on the "resize" option.
resize_tutor_4.jpg


5. This will display the resize options for the picture.
resize_tutor_5.jpg


6. I believe it defaults to a new size of 1024x768 (circled in yellow) regardless of how big your original picture is. 1024x768 is a good size for the web. You can click on the "Preset Sizes" drop down (circled in red) to select from smaller sizes if you need to. The most important thing is to leave the "Keep proportions" (circled in green) option checked. This keeps the picture looking normal as you resize it. Without this checked it can make the picture seem as if it has been in a fun house mirror.
resize_tutor_6.jpg


7. Here is an example of selecting the 640x480 rather than the default 1024x768. Notice how the picture looks a bit smaller than on the screen in step 6 above. When you are happy with the size, click on the "Save a copy" or "Replace original" buttons at the bottom of the screen. If you choose "Replace Original" your large picture will be overwritten with the new smaller version. With "Save a copy" you end up with the original large version and the new smaller version.
resize_tutor_7.jpg


That should get you going in the right direction. Note that there are lots of other nice options in the in selectable tabs at the top of edit screen that let you enhance the look of the pictures. It's not Photoshop, but it is really a pretty nice editor for a free web based tool.
 
Back
Top