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.

 

 

72 Responses

  1. Travis R. says:

    Reply

    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!

  2. Kelli Maxwell says:

    Reply

    Any way to display on a wordpress page instead of the sidebar?

  3. Tim says:

    Reply

    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. Tim says:

      Reply

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

  4. Dennis says:

    Reply

    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. Dietrich says:

      Reply

      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!

  5. Laura says:

    Reply

    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!

  6. Kara says:

    Reply

    Love the widget, and would like to second the request for a shortcode option :) Thanks!

  7. Jen says:

    Reply

    Hey this is a great widget – thanks for creating it!

    I’m trying to use the slideshow option in my sidebar (http://jennifertewellconsulting.com/) and it works when I select 2 photos but when I choose more it stops working…

  8. Brenda Ellison says:

    Reply

    I got it working right and it is AWESOME! Thank you so much for this widget!
    Brenda

  9. Stanley says:

    Reply

    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

  10. ki11ua says:

    Reply

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

  11. Kasey S says:

    Reply

    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.

  12. DJ says:

    Reply

    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.

  13. Kimberly says:

    Reply

    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?

  14. Graham Carter says:

    Reply

    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?

  15. Yogesh Gamer says:

    Reply

    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

    1. eric says:

      Reply

      Sorry about that. I just submitted an update that should fix the problem.

  16. Yogesh Gamer says:

    Reply

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

  17. Van says:

    Reply

    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. eric says:

      Reply

      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…

  18. Prital says:

    Reply

    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?

    1. eric says:

      Reply

      I’ll look into that.

  19. Randy says:

    Reply

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

    1. eric says:

      Reply

      Not at the moment, but I can work on it.

  20. Syao says:

    Reply

    Awesome plugin! Any possibility of a feature for retrieving images from a specific pinboard in the future?

    1. eric says:

      Reply

      Update your plugin to add the option.

  21. andrea says:

    Reply

    Love it but can you choose which board in Pinterest to use? I’d like to show my different boards but not all together.

    1. eric says:

      Reply

      Actually, it was pretty easy to add pin board options. Update your plugin to add the option.

  22. Sam Lowry says:

    Reply

    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. eric says:

      Reply

      Those are all good ideas and I’ll definitely work on it, but no, not currently possible.

      1. Sam Lowry says:

        Reply

        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.

  23. Lawrence says:

    Reply

    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!

  24. james wasserman says:

    Reply

    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. eric says:

      Reply

      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.

  25. audi says:

    Reply

    Cannot upload any pics from Flicker. Checked my ID so it is not that. Any suggestions

    1. eric says:

      Reply

      Can you send me your ID? I wont display it here; I just want to see if I have a similar issue.

  26. Hilary says:

    Reply

    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. eric says:

      Reply

      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.

  27. Allen says:

    Reply

    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!

  28. Cap says:

    Reply

    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. eric says:

      Reply

      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.

  29. Fiona says:

    Reply

    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!

    1. eric says:

      Reply

      That sounds like an issue with your theme. I’m not sure how to fix that. Sorry.

  30. Cap says:

    Reply

    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.

  31. Colby Brown says:

    Reply

    Any interest in allowing a feed to be pulled in from Instagram?

    1. eric says:

      Reply

      Eventually, yes, but probably not for a while. Sorry.

  32. Shawn Hazen says:

    Reply

    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. eric says:

      Reply

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

  33. Holly says:

    Reply

    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. eric says:

      Reply

      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.

  34. Luciana (lullie) says:

    Reply

    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!

  35. Marleen says:

    Reply

    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

What do you think?

(required)