note: if you are upgrading from an older version to 1.3 or earlier and you were using the cache function you will need to manually clean up the cache folder from pictures.

note 2: if you are just looking for css tips for styling head hover here.

This widget is born from the frustration of not fiddling what I was looking for in the repository. There are tons and tons of Flickr related plugins and the ones I have tested where not giving me everything I wanted and more.

I thought it would be easy to write one myself, based on the almost perfect FlickrRss plugin made by Dave Kellam and Stefano Verna. Those two guys did a brilliant job in making something that was simple to use and did pretty much everything you would need to display a Flickr photostream.

What I have added to their approach is the new widget code, using the interface added in WP 2.7. This makes the widget multiwidget enabled (meaning you can have more than one entity of the widget and they can all have different parameters).

The second change, which was implied by the first one is that the controls are widget based. So you can have a widget displaying you photostream, another one displaying your favs and so on.

The downside of the multiwidget thing is that if you want to use the same parameters for different widgets you still have to configure then one by one. I might add a “copy setting from this widget” later, who knows.

The styling will be entirely up to you, the widget does not come with any css. You can do pretty much anything with the default markup, like the header on this site, you just need the idea.

Since version 1.3, classes are added to the li’s tags with the number of the item (like ‘item-2′) and ‘first’ and ‘last’ on the first and last element displayed respectively.

The widget also comes with a caching option that will download and and save the picture on your server for faster access. The pictures are saved for one hour and should be deleted automatically if you are running 1.3 or higher. I say should because I’ve seen some cases where some are deleted but not all of them. Can’t figure out why so it might be a good idea to check and clean up the uploads folder every so often.

Download from WordPress repository here.

Flickr ID:

If you are using a pretty permalink for your flickr photostream you might not remember you id. You can use this site to help get it: http://idgettr.com/, just paste in the address of your photostream.

Picture size:

The sizes available are set by Flickr. There are 4 different: square (120×120), small (250px wide), medium (500px wide) and large (1024px wide).

To change the size displayed by the widget to something else than the default “square” you have to replace “%image_square%” in the item html (in the widget controls) by one of the other possible values : %image_small%, %image_medium% or %image_large%.

Now if you want a very specific size, like lets say 275px wide, it’s slightly harder.

First find the nearest bigger (very important) size, here ‘medium’ would do. Even if ‘small’ with its 250px wide is closest, we would end up with poor quality images by making them bigger.

So in the ‘item html’ section, in the widget control, change the size by the one that works for you and then, to get the exacte width, add width="275px" (change 275 to the width you want) just before the “alt” attribute (leave a space between the two).

You should end up with something like this in the Item html section:

<li class="picture-item %classes%"><a href="%flickr_page%" title="%title%"><img src="%image_medium%" width="275px" alt="%title%"/></a></li>

Note about the height: you can also change the height of the images by adding height=”200px” (or the value you want) but you will likely end up with distorted pictures. There are other ways to do it in CSS but it might be a bit too advanced for this page.

CSS tips:

As I mentioned above, the plugin does not come with the styling. If you are trying to get the picture displayed in two columns, you will have to add some CSS to your theme stylesheet.

Here is a quick way to achieve it:

li.picture-item {
float:left;
}

I know it does look a bit easy but usually that’s all it takes. You could also add some margins and maybe a border around each thumbnails:

li.picture-item {
float:left;
margin:5px;
border:5px solid #eee;
}

The number of columns depends of the space you have for the pictures. If you display the widget in a wide sidebar for exemple, you might have 3 or 4 columns. Here on this blog my sidebar is 220px wide, which leave enough space for 2 columns.