Thursday, May 29, 2008

Create a Random Widget with Images

In a previous post, I explained how to use the RotateContent.com tool to create a widget containing text and/or links. In this tutorial, I will explain how to use the RotateContent.com tool to create a widget containing images.

Getting your images ready. The trick to creating a widget with images is that the images have to be published on the web, with each image having its own web address. So, you can publish your images in your webspace if you want - but you might find it easier to publish your images in a shared image website, such as Google's Picasa. For the purposes of this tutorial, I will assume you are going to publish your images at Picasa, although you can certainly choose to publish them at another image service, such as Flickr, or in your own personal webspace.

You also need to make sure that your images are the right size to fit in a widget. If the images are being chosen at random, you need to make sure that they are more or less the same size - usually width is the most important dimension on a webpage, although height can also be an issue. You should probably make sure that your images do not exceed a certain maximum width (or a maximum height, depending on where you intend to use the widget on your webpage). You might even want to make sure the images have the exact same width. To resize your images, you can use an online service like Picnik.com. Remember: you can resize images to make them smaller, but you cannot resize images to make them larger because the image quality will degrade significantly if you try to enlarge them.

As you prepare your images, you should save them in a separate folder on your computer to make them easy to find. Before you go any farther with this tutorial, make sure that you have all your images resized and ready to use in a specific folder on your computer.

Step 1: Publish your images. For the purposes of this tutorial, I will assume that you are publishing the images online at Picasa. If you have a Google account log-on (for Gmail, for Blogger, etc.), you will find Google Picasa service listed as "Photos" when you are logged on to Google search or Gmail - just check the upper left-hand corner of the screen and if the "Photos" option is not listed, click on "More" and you will find "Photos" listed there:



You can also go directly to the Picasa Web Albums service and log on with your Gmail address.

Now that you are looking at the Picasa Web Albums screen, select the option that says New Album:



You will need to give the Album a name, and you should make sure that is listed as a public album, since you will be sharing the images via your widget. You can enter any other information here that you want, and when you are done, click Create.

Now you will upload the files from your computer, using the browse buttons to locate each file and upload it. (You can also choose to install a Picasa program on your computer if you want to make it easier to upload lots of photos at once; you'll see more information about uploading images on the right-hand side of the screen.)

When you are done uploading your photos, each photo in your Album has its own page, with the pages arranged in a slideshow format. What you will need for your widget is to get the address of each image. So, when you get to Step 2, you will go to the individual page of each image in the album, RIGHT-MOUSE click on the image, and select "Copy Image Location" to copy the image address to the clipboard.

Step 2: Add image address to your widget template. Okay, now that you have got your images all published online, you are ready to add the images to your widget. Follow the procedure in the Create a Widget Tutorial for generating your random content template. For the purposes of this tutorial, I will assume you are using the Mozilla Seamonkey HTML editor to add the images to your template. Just open the template in Mozilla Seamonkey, and click inside the content cell where you want to insert an image, and click the Image icon:



This will bring up the Image properties box, where you will paste in the http address for each image. Just go to the individual image page for each image in your Picasa Album, RIGHT-MOUSE click on the image, and choose "Copy Image Location" to copy the image address to your clipboard. Then, paste the image address into the Image properties box. You will also need to enter a brief description of the image in the Alternate Text box. If you have done this correctly, you will see a tiny version of your image appear in the bottom part of the Image properties box. Click OK when you are done.



You should now see the image displaying in the cell. You can add text and/or links if you want. Move on to the next cell, until you have added each of your images to the template. Here's an example of a template table as it gets filled up with an image in each row. Remember to delete any rows you do not use, and if you want to add more rows you can do that, too - just make sure to type the word "random" in the left-hand cell of any new rows that you add.



When you are done, save the template table you have created. Then follow the instructions for converting your template into a script and publishing the script online! After you have created your template with the images in it, there is no difference in publishing your widget; the instructions for a text widget and an image widget are exactly the same.

Publishing widgets with images can be a lot of fun - here is an Internet Bumper Sticker widget which I created using images from InternetBumperStickers.com! You should see a different Internet Bumper Sticker at random each time the page reloads - and notice that I also included a link to the website I used as my source for the images, since it is good to give credit where credit is due. InternetBumperStickers.com is one of many, many sites online which allows you to re-use their images, provided that you include a link back to the source, as I have done here. :-)


(Random Internet bumper stickers)


Some dynamic content may not display if you are reading this blog via RSS or through an email subscription. You can always visit the How-To Tech Tips blog to see the full content, and to find out how to subscribe to the latest posts.