General > Post Your Pictures/Video

Photobucket Tutorial for thumbnailing your images

(1/5) > >>

mowdak1:
Since we seem to still have some folks that are having trouble with the Photobucket thumbnail approach to doing things, and we will eternally have newbies arriving that will need this information as well, I've put together this step by step approach to the process for everyone's benefit. This thread can be used for future reference of this process.

First go to Photobucket, set up your account or log into your existing account. Select My Album from the menu top of the page at right. To arrive at this screen.



Here you can browse the files on your computer, select the image file and upload.



If you click on the Add more images link just below the upload form it will open up multiple forms to load as many images as you wish at once.

When loading multiple images, if they are in a dedicated order, such as this demonstration or step by step in a build, you need to upload them in reverse order i.e. 5, 4, 3, 2, 1. Photobucket inverts the order when it uploads them, and when you cut your code it will all be bassackwards!




Once your images are loaded, scroll down the page to the images you want to load and check the little box under each image you want to create code for. Please note inverted order in the Photobucket album here! You've got to load them backwards!!



Go to the bottom of the page, and click "Generate HTML and Image Code" to generate code. This can be done for a single image, or for multiple images all at once. See above comments on inverting image order in the case of images in dedicated order.



You will advance to the Image and Clickable Thumbnail Generated Code page next. Scroll down to the Image "Clickable Thumbnails for Message Boards".



Park your cursor in the box next to the code, and left click to highlight all code. Right click and select copy, or you can use the Ctrl + C shortcut to copy the code.



Come back to Mowbetter, or wherever you're going with this, select Reply or use the Quick Post form. Left click in the form to set your cursor in the form.



Then right click and select Paste or use the Ctrl + V shortcut to paste the code in the form box.




Your code should look like the above example The URL establishes the link to photobucket on the IMG, the url or if prefer web address within the IMG tag is the thumbnailed image. This is denoted by the th_ preceeding the file name. i.e. th_PB3.jpg as seen above. Please note the above images were loaded in PB1, PB2, PB3 order... the order in Photo Album and thus in generated code was backwards. Had to delete these and start over in inverted order. 


Once the code is set you can move down the right side, and click Enter a couple of times after each closing URL tag to separate your images, and insert text between the images. As seen here and in the build threads.


--- Code: ---[/URL]  <~~ That is a closing URL tag the / switch tells the browser to close the [URL] tag in code.
--- End code ---

Then click Preview to make sure everything is correct, click Spell Check to correct all the errors in your written text, and then click Post!

And, that's how it's done guys!!

fox_racin4:
i get it now hahaha

mowdak1:
That's cool!!

It was way overdue, and I had a slow afternoon, so I figured it was time.

Moweracer227:



Got pic to load in reply but not in my profile, what am I doing wrong.  Used same url.

mowdak1:
If you're trying to load it as an avatar it's too big, the forum will not accept images larger than 90 x 90 px for avatars. I'll fix it for you!

Navigation

[0] Message Index

[#] Next page