2 posts tagged “widget”

Edit 11/26: The creator of PictoBrowser, Diego Bauducco, not only responded to my feedback, but also read this post, and has addressed all of the issues I brought up regarding the software.  Please see the updates below in red if you're interested in how the issues were corrected.  Having a developer who is receptive to feedback and is actively looking to improve his product for the users is another definite plus that you should consider when considering this for your own use.

I recently converted my personal website (that I host for my family and friends) from auto-generated HTML pages of pictures to a template/widget-based system that separates the photo content and presentation of the photos.  My preferred implementation choice for this is PictoBrowser.

Similar to Flickr's slideshow, PictoBrowser allows you to embed some of your photos in another website or blog.  Unlike a Flickr slideshow, PictoBrowser relies on the user to click through the photos (which I like) and by default displays thumbnails and picture titles at all times (which I also like).

PictoBrowser allows you to select a flickr set, tag, or group as the basis from which to pull pictures from.  To set one up, you click the word "PictoBrowser" at the bottom right of any existing widget, enter your flickr username, and then choose from the available tags, sets, or groups.  PictoBrowser only pulls your publicly available photos to use in the slideshow, which makes sense as you don't have to log in anywhere to use the application.

If you want, you can also use the advanced builder (found here) to configure your embedded widget a bit more to your liking.  Details like displaying notes, hiding thumbnails, changing the width/height of the embedded viewer, and background color are all configurable through an easy-to-use GUI.  After making your selections, you just need to hit "continue" to auto-generate the code snippet to copy over into your page (Vox users should paste into an "embed" box).

Here's an example PictoBrowser using my flickr set from my recent trip to the Renaissance fair, so you can see how it behaves:

There are a couple things I'm not satisfied with quite yet:

• You can see that some of the picture titles are cut off after 40 characters (a limitation that seems to have been added to this latest version).  This means you need to shorten your picture titles and put the rest of the information in a note to make sure you get the info across to the viewer.  Titles have been updated to fit the available width, and should fit just about any caption you plan to use for your photos.
  
• 
  
• Notes are not turned on by default, so you'll need to use the builder to create your widget if you want this on.  (Since only the pictures that have notes will display the word "note" indicating that there is additional information, you'd think notes would be displayed by default, and only turned off if the user wanted to add notes to the photo, but for some reason didn't want them to show up on the pictobrowser widget.)  Notes are now on by default, so you don't have to do any special configuration to have these shown.  If your photo doesn't have a note, no "note" indication will be shown for that picture.
  
• 
  
• In order to view a note, you have to drag your mouse down to the thumbnail area in order to see whether a picture even HAS a note.  This seems counter-intuitive - you should click on a picture to progress to the next, and immediately see whether the picture has a note, just like you immediately see the title to a picture.  Same with the word "link" that takes you to the picture's flickr URL.  The words "note" and "link" that lead to the photo notes and photo URL now are displayed automatically without needing to move your mouse anywhere!  As soon as the picture loads, these are made visible, so it is easy to see where you need to move your mouse to view the note or go to the photo's URL.
  
• 
  
• Once you're viewing a note, you have to click-and-drag to scroll down the note field on a long note.  While this is very Web 2.0-ish, again it's not very intuitive, especially as there is a non-functioning scroll bar on the right side of the note.  This scroll bar is an indicator only, and not for navigation.  I was wrong on this point - the scroll bar CAN be used for navigation, and works just fine for this purpose.
  
• 
  
• The widget still doesn't allow you to repeat from the beginning when you've reached the end of the slide show.  To start over, you have to either refresh the page or navigate back to the beginning using the thumbnails at the bottom.  It would be nice to have this repeat from beginning as an option, if not the default behavior for the widget. Diego explained to me that this is not allowed by design - he said that this repeat behavior proved too confusing to users when it was implemented, especially if the thumbnails at the bottom were hidden.  I'll trust him on this one, and the addition of keymappings to your left, right, up, and down arrows on your keyboard to navigate through the photos does make up for this.
  
• 
  
• The widget relies on flash hosted on the creator's site (http://www.db798.com).  This means:
  
• If for some reason, that site was unavailable, you wouldn't be able to view the pictures through the widget, even if they're available on flickr.  (Unlikely to happen nowadays with most people's webhosting providers, but it IS possible.)
  
• If the creator makes an update to the widget, any copies you've embedded will be updated to reflect the latest widget behavior.  In my case, this meant something that worked previously (titles longer than 40 characters) suddenly stopped working without my knowledge.  I don't expect the creator to intentionally break/change a previous feature, but this is aggravating when it does happen.
• Again, I was wrong about this.  By default, the flash file is hosted on Diego's site, but you CAN save a copy of it to host on your own site.  You will have to update the HTML snippet you load on your page to direct it to your copy of the flash file, but after that it should work just fine.  I would actually recommend against doing this, though, as you will be losing out on any future improvements or bug fixes in the program if you rely on a locally-hosted copy of the flash file.  However, it is nice to know that you can hold on to a copy to utilize in case the hosting website is ever no longer available.
  

All-in-all, PictoBrowser is a really slick way to display your flickr photos in another location.  I hear there is a plugin for Wordpress blogs (which don't allow the HTML "object" tag).  For other sites like Vox, it is really easy to copy/paste the code into the page you want to display your pictures. 

I would definitely recommend PictoBrowser to others who are looking for a good way to share their pictures online.  It is a simple way to disseminate flickr photos to friends and family in a way that is user-friendly and intuitive, even for folks who aren't familiar with flickr or technology in general.

Based on the response I received from a recent comment I left on Crankypants' blob, I realized not everyone knows that you can successfully add more than one widget to your sidebar.  It's really easy to do, and I figured I'd throw up a quick post to help guide you.  Don't worry, even if you don't know any HTML you can follow this guide to have a way to put up 2, 3, even 4 widgets (depending on how big they are) in your sidebar.

Here's the key - Your sidebar is basically a box sized to fit about one widget.  If you add a second widget (by adding the code for it below your first in the widget edit box), you may find it gets cut off, or worse yet, doesn't appear at all.  The problem is the widget is outside the dimensions of the default box.  The solution?  Change the size of your box.

In order to make your sidebar taller, so you can fit more widgets in, you want to define a box big enough for all your widgets.  Before your first widget, paste the following line:

<div style="height: 900px;">

and then after your last widget, paste the following line:

</div>

What this does is create a box 900 pixels tall in the sidebar - this is bigger than your original sidebar, and will allow you to fit in multiple widgets inside it, one after another (e.g. in my sidebar, I have a Creative Commons link, a last.fm widget, and then a KVOX music widget).  You can change the "900" to any number you choose to fine-tune for your choice of widgets.  If you're still cutting off a widget, make it bigger.  You can also make it smaller if you don't require so much space.

Things to consider:

• You may think having 4 widgets is cool (and yes, they probably are), but remember that every time someone loads your page, they will be loading your widgets.  The longer it takes to load the widgets, the longer it takes to load the page.  You're also requiring someone's browser to use more RAM to display your page, which means you could slow their system down if you go overboard.
• This will NOT increase the width of your sidebar, which is limited to 140 pixels.  Using widgets wider than this will either cut them off on one side or keep them from working properly (or both).
  
• If you have a short post, increasing your sidebar's length may affect the length of your page for your post.  This may mean you have blank space in between the end of your entry and the bottom of the page.  This is the reason you don't want to make your sidebar 2000 pixels long when you only have 2 widgets in there.

Good luck adding your widgets!  If you come across a cool one, post a link to your vox homepage (where we can find your widget displayed) in the comments below, so everyone else can ooh and aah at your widget prowess!