Many people know flickr as a wonderful site for storing and sharing pictures and as a photo community.
It is that, of course, but you can also use flickr as a storage place for your school pictures and then easily use them as part of your web site. This includes making slide shows, posting random pictures and more.
Placing a single picture in a page
This is actually quite easy since flickr does most of the work for you. First, log into your flickr account and then find the picture you want to embed in the page.
Click the icon for All Sizes at the top of the picture and then click on the size you want to use. Small is usually the best combination of your user being able to see the details and the file size not being too large.
Below the picture you will find the code you need to copy and paste into the code of your page.
Copy the code from the first box. Don’t use the code in the second box unless you just want to link directly to the picture (to send it in email, for example).
After you’ve copied the code, switch to the code view of your web editor and paste the text into the page at the point you want the picture to be seen. If you’re not sure where that is, copy it in any open space between the body tags. Then you can switch back to the design view and drag the picture to the correct location.
For this you are going to create a flickr badge using the picture or pictures you want to use in your page. Start by going to the Flickr badge creator page. If you are not already logged in, flickr will ask you to do that.
Step 1, select the type of badge you want. The first will place one or more pictures into one block on your page. The second will create a Flash file that animates the display of the pictures you’ve chosen. For this example, we’ve chosen the first option.
In step 2, you’ll select the pictures you want to include. You can choose from all of your public pictures, only those with a specific tag, or only those from one of your sets. Using sets is probably the easiest way to make sure you get the ones you want.
Step 3 offers a variety of choices for the layout of your picture. It’s probably best to say no to the first one. The next three are pretty self-explanitory. The last option will only apply if you are going to display more than one picture.
In step 4 you choose the colors that will be used for the background and border of your pictures. To make them fit best in the color scheme of your site, it’s probably best to set no background and no border. However, play with this to see what you get with different combinations.
Finally, you get the necessary code to copy and paste into your page.
If you make any errors or don’t like what you got, just start from the beginning.
There are many different ways to make this happen. The easiest is to let flickr create the slide show for you. Here’s how.
Open the main page of the set you want to use and click on the Slideshow link in the upper right corner: .
When the slide show starts, click the Share link in the upper right corner. In the box that appears, click the link that says Customize this HTML.
In the top part of the next page you can choose the size you need (in pixels, of course). It’s usually best to stick with the presets but don’t be afraid to experiment.
Once you’re happy with your slide show, copy the code on that page and paste it into the code view of your web page. Again, you may have to paste it somewhere and then switch to the editor view to move it to where you need it.
If you don’t like the flickr slideshow, there are several other sites listed below which offer different options. In all these sites you’ll enter some information about where your pictures can be found in flickr (it’s best if you have your photos in sets), set some options, and click a button.
As always, to place the slide show in your web site you’ll need to copy the code generated by the site and paste into the page.
flickr Slide Show Generator gives you the code to use the “classic” slide show format, the one flickr used to use that was embedded in the page (as opposed to the new version that opens in a new window).
SlideFlickr gives you even more options for your slide show, including adding music to the show (which must be an mp3 with a web address).
FlickrSlidr is very similar to SlideFlickr, both in name and features.
Slideoo offers a slightly different twist on the flickr slide show – the orientation is horizontal rather than square. Enter your flickr name, choose a set, set the size, and it gives you the code to embed the show in your page.
Splashr offers another very simply way to generate a slide show but with many more options to alter the appearance, including templates for borders and backgrounds.
flickrShow produces a very simple, user-controlled slide show. However, placing it in your page will require a little bit of knowledge about coding, which also gives you many options.
If you’re looking for an option to generate a slide show that doesn’t involve flickr check out Bubbleshare. The site allows you to upload pictures from your desktop and then create slideshows as well as adding text and audio captions to the photos.
You could create a gallery using Photoshop Elements or any number of other programs. However, if your pictures are already in flickr, take a look at the Flickr Album Maker. The interface is a little hard to use at first, but once you get used to it, you’ll find all sorts of options.
If you want something a little more flashy (as in using Flash) and even more customizable, you can find templates for creating interactive slide shows and galleries like this one. You will need to own the Flash editor software (currently about $250 for educators) and the time to learn some basics about the process.