Ultimate Photo Widget

PLEASE NOTE: I am not currently updating this plugin. Please try out the plugins at the Alpine Press if you are looking for more features.

This page describes some of the workings of the Ultimate Photo Widget for WordPress. If you’d simply like the see the widget in action, jump over to Kylin Untitled’s demo page. To download the widget yourself, check out the WordPress plugin page. The Ultimate Photo Widget retrieves photos from Flickr, Tumblr, and Pinterest using user photo feeds and displays them on a WordPress site using different display options.

Source Options

A quick note on the photo size option: Flickr, Tumblr, and Pinterest all store various photo sizes on their websites. For example, for every photo you upload to Flickr, Flickr will create and store seven copies of that photo and each copy will be a different size. I looked up the different size options for Flickr, Tumblr, and Pinterest and embedded the specific image size options for each within the widget.

FLICKR

The Ultimate Photo Widget can retrieve photos from five different Flickr sources: a user’s photo feed, a user’s favorites, a group’s photo feed, a user’s photo set, and from the Flickr community. The plugin will make up to two attempts to retrieve photos from these feeds, the first using a PHP Serial feed and the curl_init() functions and the second using a RSS 200 feed and SimpleXML functions. If no photos are found after both attempts are made, the plugin will report such.

To find your Flickr ID, use the website http://idgettr.com/ and replace the word ‘username’ with the username of your flickr account. To find the ID of a set, go to the URL of the set you want and copy the numbers at the end of the address. For example, the set ‘Mac and Cheese’ has the URL http://www.flickr.com/photos/kylinuntitled/sets/72157628958212725/, therefore the Set ID is 72157628958212725.

When a  photo is uploaded to your Flickr account, seven different copies of various sizes are saved. The sizes used in the Ultimate Photo Widget include 75px, 100px, 240px, 500px, and 640px, where the size represents the length of the longest side. Of the various source options in the plugin, Flickr has perhaps the most developed API, making it the most functional option.

TUMBLR

The Ultimate Photo Widget will retrieve the most recent photos from your Tumblr. The plugin attempts two photo retrieval methods using a PHP Serial feed and a JSON feed. If both methods fail, the plugin attempts to get images from your Tumblr RSS Feed using the SimplePie fetch_feed() function that is included in every installation of WordPress. The sizes available for photos from Tumblr are 75px, 100px, 250px, 400px, and 500px.

PINTEREST

Because Pinterest has not officially released their API to developers, the plugin’s functionality is fairly limited. In other words, Pinterest is not quite ready for people to make plugins and apps, so the only thing that the Ultimate Photo Widget can do is retrieve the most recent pins or pins from a certain pinboard.

Also, the photo are retrieved from your Pinterest using the SimplePie fetch_feed() function only. This function caches (i.e. stores) results for some period of time and so you may notice that your pins are not updating as quickly as you would like. Again, this is a functionality that I hope to improve in the near future. Pinterest also has rather odd size options: 75px, 192px, 554px, 600px, and 930px. In most cases, the size is only an approximation of the photo’s actual size.

Style Options

VERTICAL

The first option I will talk about is the vertical display option.

The vertical display is the simplest of the four options. Here, the Ultimate Photo Widget simple takes the photos and places them in a vertical list. The vertical option does not try to re-size photos in any particular way. Consequently, the widget will display the photos exactly as they are found (based on the user’s chosen photo size). This behavior is helpful in some cases but can cause trouble in others. Most WordPress themes place widgets in the sidebar, give the sidebar a specific width, and limit the maximum width of images inside the sidebar to be the width of the sidebar. If this is the case, a 500px wide photo placed in a 230px wide sidebar will become 230px wide. For the most part, this is what people want. If you want the photos to be 200px wide but the size options are 100px and 500px, set the size to 500px and set the Reduced Photo Size option to 200.

For some themes, a sidebar width is not specified. This case creates a lot of sizing and cropping problems for the Ultimate Photo Widget, most of which can be resolved using the Reduced Photo Size option. For the vertical display option, if photos are too big or being cut off by the sidebar, apply a Reduced Photo Size.

TILES

The second options is the tiles display option.

The tiles option uses jQuery to re-size the images. First, the widget finds the minimum width of the photos retrieved and sets this width as the maximum width of the display. This is to ensure that the display is sleek and uniform. Out of every three photos retrieved, one remains large (the width of the display) and two are re-sized to half the width of the display, as shown in the preview to the left. After the new width of the two small photos has been applied, the height of the two small photos is set to the minimum of the two. If a tall photo happens to be next to a wide photo, the bottom of the tall photo will be cropped.

The tiles option works best with large photos in a theme that limits the widths to the width of the sidebar. A common problem that I have found is that the first photo of the display is too big or has white space below it. This is caused by the widget asking the theme for the sidebar width and getting an answer that is incorrect. As a result, the photo is too big. The white space is the result of the WordPress theme re-sizing the photo AFTER the widget has re-sized it. The rest of the images are sized correctly because when the widget asked for the sidebar width a second time, the correct answer is return BECAUSE of the first photo being re-sized BY THE THEME.

To avoid all of this, apply a Reduced Photo Size. To ensure that problems never occur, set the photo size to larger ( greater than 500) and set the Reduced Photo Size to between 200 and 250.

 

Square Tiles

The square tiles option is very similar to the tiles option except that each photo is cropped to a square.  The square tiles option uses jQuery to re-size the images. First, the widget finds the minimum height or width of the photos retrieved and sets this minimum as the maximum width of the display. This is to ensure that each photo can be cropped to a square, but it also means that the width of the display will be less than the photo size option. Each photo is then cropped and re-sized to fit in large or small square. This option works best with tall photos since they will only be cropped from the bottom and not from the right side.

Again, to avoid re-sizing problems, apply a Reduced Photo Size. To ensure that problems never occur, set the photo size to larger ( greater than 500) and set the Reduced Photo Size to between 200 and 250.

 

 

Slideshow

The final option is the slideshow display.

This option uses a jQuery script to create a dynamic display.There are three options for how the slideshow changes photos: Rotate, Fade, and Shutter. The width of the slideshow is set as the minimum width of the retrieved photos. All photos are then re-sized to fit into the slideshow using this width. Because of the way the slideshow is set up, a common problem is the “Next” button being cut off. This can be resolved using the Reduced Photo Size.

Again, to avoid re-sizing problems, apply a Reduced Photo Size. To ensure that problems never occur, set the photo size to larger ( greater than 500) and set the Reduced Photo Size to between 200 and 250.

Finally, new to version 2.0.1 is a link to Kylin Untitled and Electric Tree House. This link can be disabled from the widget options page.

If you are experiencing any difficulties or have any suggestions for improvements, please leave a comment below.

Again, if you’d like the see the widget in action, jump over to Kylin Untitled’s demo page.