Ultimate Photo Widget

PLEASE NOTE: I am not maintaining or 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.

 

 

72 thoughts on “Ultimate Photo Widget”

  1. Hi. Love the Ultimate Photo Widget. I’m having trouble getting it to crop the small images. I’m using it on my blog with the following settings: (Source: Pinterest, Display Link – check, Width: 554px, Style: Square Tiles, Alignment: Center, Reduced Width: 200px) and my sidebar is 290px. From what I’ve read you’ve experienced similar problems. I was wondering if you knew what I might need to do to get the images to crop correctly. I wonder if it’s not a JQuery thing, but I don’t know much about JQuery so take that for what it’s worth. Anyway, this is a super-picky request, but any help you can offer will be appreciated. Thanks for developing and distributing the widget!

    1. I think I have figured out what is wrong, but it isn’t an easy fix. I’ve learned that some website hosts turn off the getimagesize() function because it is slow. I’m guessing that this is the case for you. As a result, the widget doesn’t know how to crop the images because it doesn’t know how big they are. I’ll work on a fix but it will probably take me a while. Thank you for letting me know and hopefully I can fix it soon.

    1. I’m working on a shortcode (a way of displaying on any page instead of just sidebars) but it is not ready yet. I cannot really promise when it will be ready…. Shortcode is ready.

  2. Interesting widget. Would it be possible for it to use the Pinterest /site// for the photo feed? How about foodgawker’s /post/archive// or other foodporn site equivalent? How about a higher level directory in the WP site and use a random selection from all sub directory paths for each page refresh? Or, allow it to be prioritized by page view or other criteria?

    I’d also ideally like the image to retain a pointer to the post it came from?

    Thanks,
    Tim

    1. Oops, it stripped out the brackets. Reformatting the URL components as:
      /site/(domain.name)/
      /post/archive/(username)/

    2. The widget can only read from sites that have a feed of some sort. While reading a feed is fairly simple, different site organize information differently, making it difficult to simply, accurately, and automatically retrieve and post things like pictures and articles. The Pinterest site doesn’t have a community feed like flickr and I cannot make pinterest images point to the post they came from because the pinterest feed doesn’t report the link to the post. The pinterest feed has very little information, but I have heard that they are in the process of improving it.

  3. Looks awesome! But i get this error when using Tumblr; An error occured:
    – No content found.
    – Check your ID

    Not resizing the photo’s. Just using the 250 size..

    1. Hey Eric, I am getting the same error. An error occured: – No content found. – Check your ID. I have tried both dgroundsel.tumblr.com tumblr ID and my tld http://www.otakugangsta.com custom url to no avail. I have also tried all the display styles and varying photo widths. Using WordPress 3.3.1, Thesis theme. Any help appreciated!

      1. Try just the custom url otakugangsta.com. It worked for me. I don’t know why tumblr didn’t automatically redirect… I’ll add a filter to my next update to check automatically if the “www” should be there or not.

        1. Tired just otakugangsta.com too, but it doesn’t work. Strange demo.tumblr.com works but not my site! Any ideas why it would work for you and not me? Thanks again.

  4. Hi, I updated to Version 2.0.1, and the widget disappeared. It is there somewhere but I think it is hidden… I linked to the site here, and the widget is located on the sidebar under “contestant endorsements.” Before I updated, I had version 1.0.4 working great. Thanks!

  5. When I first got the widget I only had two photos in my Pinterest Board. Then I added some and deleted one of the originals, but it didnt change on my wordpress. I tried a lot of different options (ex. slideshow, vertical, small pics, large pics, etc). I’ve also tried some different forms of IDs (the ID im using now is januarymay). I even tried restarting my computer. I don’t understand what the problem is.

    Thanks for all your help
    Stanley Cooper

    1. There is nothing wrong. Pinterest just doesn’t update the feed very often. Pinterest is so new that they haven’t released the official developer stuff and instead only use RSS feeds (pretty old-fashioned by today’s standards). I know that WordPress will store the RSS feed for 12 hours but I’m not sure how often Pinterest updates. When Pinterest finally releases their API, I’ll be able to make the widget update more quickly.

  6. How could i set more than 20 images?
    Changing the for loop numbers is not enough in the script…

    1. Most feeds only report the 20 most recent images to be added. Pinterest currently cannot do more than 20 photos and getting Flickr and Tumblr to do so is a little complicated. Future versions might be able to handle over twenty, but that is currently not the case. Sorry.

  7. For some reason, the only option that works for me is the “Vertical” setting. The Tiles & Slide show don’t show any physical images. It’s like the images are there — it gives me the option to click on them, but nothing is showing up.

    1. It sounds to me like something is conflicting with the Ultimate Photo Widget. The vertical setting works because it does not use JavaScript or JQuery to edit the images. The rest of the settings (tiles and slideshow) hide the images until they have all been cropped or resized (which is why they seem like they are there) before showing them. This delay speeds up the loading time of pages. Additionally, even if the images were not hidden, it sounds like the JavaScript that resizes them is being disrupted and so they wouldn’t appear correctly anyway. Without seeing what is going on, I’m not sure there is much I can do.

  8. Love the plug-in, can’t get flickr to work right. it only seems to load in two photos. Then after i’ve uploaded new ones and deleted others, it won’t update on my site. Any way to refresh or something? Nothing seems to work.

    1. The delay is caused by the flickr website and not the plugin. The photos should refresh after a little while.

  9. I absolutely love this widget! Thank you! There seems to be a lag in how long it takes to be updated when receiving info from flickr. When I first installed it, the delay was only a few minutes, now it’s taking considerably longer. Any ideas on this?

    1. The delay you experience is how long it takes flickr to update the feed. I’m not sure if there is a way to speed it up, but I can look into it.

  10. From what I understand from reading the comments and replies so far, is that at present pinterest feeds are pretty poop.

    I’ve noticed that the plugin pulls in pictures which are posted from the actual pinterest account holder, however any contributors who for example post to a board, there pictures are not automatically pulled in by the plugin… for example my pinterest account I setup to test reports 3 pins (by me) but also reports 6 pins to the board (3 of which were posted by a contributor) – so again can I presume that this is the fault of the pinterest rss as apposed to the plugin?

    1. Correct. Pinterest is so new that they haven’t released their API, which allows developers to control and/or sort through the information in your Pinterest feed. Until Pinterest releases the API, the plugin is only capable of showing your most recent pins and nothing more.

  11. Few Days ago there was no problem with this cool plugin. But Now a days I am getting this error above my widget:
    “Warning: print_r() has been disabled for security reasons in public_html/wp-content/plugins/ultimate-photo-widget-by-eth/ultimate-photo-widget.php on line 115”

    Please Help Me

  12. Wowowowow… Thank u so much Eric.. Thank u thank u thank u thank u so much..
    Problem solved :)))))))))))))))))))))))

  13. Hi Eric

    I have installed your plugin on my WordPress site and I am trying to feed in from my Pinterest account. However I get an error saying “No content found.”. The short code generated is:

    [ultimate-photo source=”pinterest” uid=”stylescoutuk” display_link=”1″ link_style=”small” size=”930″ style=”vertical” num=”2″ align=”center” ]

    I wonder if you could advise what I may be doing wrong.

    Many thanks

    1. Are you still getting an error? I tried the shortcode and it worked for me. As I have mentioned in other comments, Pinterest can be a little slow and maybe the content just wasn’t ready yet…

  14. Great widget! Anyway to have a pin it button on the images pulled from the Pinterest board available so that people stay on the wordpress site?

  15. Nice but I’m looking for a horizontal format and a wau to select from a pinterest board. Any way to do it horizontal?

  16. Using the plugin for a flickr set (displaying as slideshow). Works great!
    Questions:
    1. Is it possible to make it automatically adjust size smaller for responsive themes? Ideally I could choose 500px, then have it shrink automatically when viewed on mobile device.
    2. Possible to turn off the direct link for each image to flickr?
    3. Possible to display the title of a set (like the real flickr embed) above the slideshow? (It’s easy to use html, but it’d be great if it was automatic.).

    Thanks!
    SL

      1. OK, thanks! If you are taking requests… :)
        1. Allow a way to prevent auto-play of the slideshow.
        2. Random play is always nice.

        By the way, it works better on my responsive site than I expected. Shrinks nicely to fit on my iphone.
        Thanks for you efforts.

  17. Great plugin! Is it possible to display items in a grid? For example, square thumbnails across and then down. So if I had number of photos set to 12 they could show up as three rows of 4 (or 4 rows of three, etc)?

    thx!

  18. Hi, I think I’m having a problem with the settings panel in my wp admin area. Or perhaps I’m just using it wrong. First when I go to settings your widget control panel opens but then disappears. Do I need to do the short code insertion or it that only for customizations? Anyway the plugin is working but not in the way I need it. Right now the slide show only shows one photo over and over again. I tried to make short code but I think the way I have my blog set up won’t allow me to incorporate short code. My blog exists as a category in my wp portfolio site. As a consequence I don’t think there is anywhere in the that area where I can insert code. I might be able to insert the code into the posts themselves but but I want the slide show to run in the side bar and not in the post area. So there are two things going on , one in how the settings page is appearing then disappearing (all I see is the donate button after a few seconds) and then theres the issue with short code. Hopefully thats clear enough for you to help get around these issues.Thanks James

    1. It sounds to me like you’ve got another plugin installed that is closing all the settings panels. The number of photos displayed is set in the widget menu. I use the same methods of opening and closing tabs that the WordPress program does and if something is preventing that from operating, I not sure what I can do. I’m sorry I can’t do more for you.

  19. Eric –
    Used the shortcode and I love it. Works perfectly. I know it was originally designed for a sidebar… but i’m wondering with the shortcode, if it’s possible to have it tile the whole page – or offer a wider option? Right now it’s stuck to the 600 px wide side, which is quite small on a 1024 px wide site.

    1. It should be able to take up the entire page, though it has the be placed in a DIV that has the width of the page. The widget checks the width of whatever it is placed in so as to prevent it from overflowing the intended borders. Also, the SQUARE tile option does a bit of math and so the max width of the widget is set to the min width OR height of ALL the photos shown.
      So the short answer is yes, but you’d have to use the rectangle tile option and the shortcode should be placed within a DIV that has a width equal to the width of the page. Also, all the images have to actually be the size that they report to be. If you upload a 500 by 500 image to any of the sites, the image will still be 500 by 500 even if the widget settings say 800px. I hope that answers your question.

  20. This is by far the greatest plugin I’ve used over the past 6 years! Thank you so much for creating a simple, easy to use, and sleekly designed display for photos!

  21. Good plugin but there are some issues that I hope you can resolve.

    The main issue I have is that if I use this as a sidebar widget with a slideshow and say.. 20 images, and I get them frm my pinterest account, when you use the website, every time you open a page the widget fetches the images from Pinterest, now this is all fine, except when the api has issues and can’t retrieve the images, when this happens the website is extended vertically by a LOT (20 images heights), is there no way to stop this from happening? The only solution is to put the slideshow to 5 images, so most of the time if the API doesn’t work then it doesn’t extend too much.

    Thanks.

    1. I’ll work on that. Most of the pinterest complaints that I used to get were that the images didn’t update quick enough. I had the plugin caching results for 6 hours but most people seemed to want instant updating.

  22. Great plugin and loving it! Only facing one little problem, the photos display well in “single post” page, but didn’t show in the “blog” page, and I couldn’t find any settings to alter this situation. Any suggestion? Thanks!

  23. Eric, Yeah the caching thing had me wondering for a while, maybe put it as an option? I visually fixed my issue with some basic css, max-height, etc.

  24. Hiya!

    Just installed this, and it works great! But for some reason, all the widgets I have placed BELOW this one in my sidebar have disappeared! Any ideas?

    1. Sorry, that really should not be happening. I’ll look into it and let you know if I figure anything out.

  25. I’m trying to use your widget to showcase photos from a group photo pool on the sidebar of our website. I really like the different tile design options. It would be ideal for me if your widget could pull random photos from our flickr photo pool (http://www.flickr.com/groups/cakingtides/pool/) rather than the most recent photos, so different photos would show in the sidebar every time the page is refreshed. Our photo initiative is more active in the winter, so the same photos would be in the sidebar from March to November each year. Is there any option/way to alter the widget so that it does pull from any photo in a photo pool, rather than the most recent photos? Thanks for your help!

    1. That sounds like a good option. I’m fairly busy at the moment, but I’ll look into adding that as soon as i get the chance.

  26. This plugin is simply the BEST one for displaying Tumblr photos. Thank you very much!
    It would be even better if we could display photos in horizontal mode. I’m trying to do this via CSS, but no success :/
    Thanks anyways!

  27. Hello,
    Absolutely love the plugin. Thank you!
    The only thing I can’t get right is the photo order. It won’t show the same as in flickr. What can I do about this?
    Kind regards

Leave a Reply

Your email address will not be published. Required fields are marked *