WordPress

Introducing the WordPress Image Rotator Widget

WordPress

DK New Media has had this WordPress plugin on the back-burner for some time. The demand for a simple, quality image rotator plugin was high not only for our clients, but also the WordPress community. The plugins I had found that promised to do what we needed were either broken or did not work at all. So we made our own.

Download or Install the Image Rotator Widget

The first version was ugly, and consequently never added to the WordPress Plugin Repository. Aesthetics were not the only issue: you could only run one instant of it per page, there were two different places where settings had to be configured, did I mention it was ugly?

The rotator comes with three transitions: Linear, Loop, and Fade. Linear will scroll the images horizontally across it’s container. Once a linear rotator has reached the end of the images, it will bounce back and scroll the opposite way. Loop rotators are circular: when the last image is reached, the first image in the list will appear next, and the loop starts over. Fade will fade each image in and each image out.

These transitions weren’t our biggest issue though. It was the settings. That was the ugly part, but this time we made something elegant. We knew that the process of adding images to the rotator needed to be simple. A plain “+” button will invoke WordPress’ Media dialog. From there, users may chose to upload a new image, or to select a previously uploaded image from their Media Library, just like they would if they were inserting an image into a post. After the image has finished uploading or the user has selected an image, they must press the “Send to Image Rotator” button. Once all of the desired images have been uploaded, they’re really easy to manage.

Image Rotator Widget

Hovering over an image name will display a tooltip that contains the image. We didn’t want to clutter the widget settings, so we decided that loading all of the images into the settings container was not an option. Our decision to put the images into a tooltip preview paid off two-fold: users don’t have to wait for images to load before than can edit, reorder, etc…; and it kept our interface clean, which makes for easy sorting and deletion.

Sorting is as easy as clicking on empty space within the image list item and dragging it to the desired position. Imagine how choppy this would have been had we loaded the images(all with different proportions) straight into the settings container.

To delete an image from the widget, press the “-” button that is next to the image you want to remove. Keep in mind that you must click “Save” or none of these changes will take place.

If you give this plugin a run, please feel free to leave any comments, bugs, or feedback in the WordPress support forums(we monitor these) or by contacting us directly.

Download or Install the Image Rotator Widget

29 Comments

  1. 1

    How does image sizing work?  I notice that the upload box says 200×200.  What if my image is of different proportions?

    • 2

      I think that would add way too much complexity to this plugin.  And it would never look right because they may not be properly centered horizontally, could get pixelated, etc.  Just like you need to size images appropriately for a post, the user should have to resize it correctly here.

  2. 3

    DIfferent width proportions will work, however height proportions will not. As of now, to get the best out of the widget, you should make all of the images you plan to use the same height.

    In the next release I’ll be adding dimension settings to the widget. You’ll be able to choose the width and height of the entire widget, and consequently the images will be resized proportionally to it.

  3. 5
  4. 9
  5. 10

    I really would like to use this plugin, but when I upload an image, I get no ‘send image to rotator widget’ possibility, only the ordinary ‘insert to post’.
    I have deleted and reinstalled the plugin, but so far no luck. Can you please help me out?

    I have added a screenshot, and eventhough it is in Dutch you should be able to see that the ‘send image… ‘ button is missing. I would highly appreciate your help.

    Thanks,

    • 11

      Hi @google-2b6c75e336d02071c15626a7d8e31ccd:disqus ,

      I can only guess that it will require us to build a translation file.  Can you tell us what “send image to rotator widget” is in Dutch?  We’re not planning a release soon, but will try to slip this in.

      Doug

      • 12

        Hi Doug,
        Thank you so much for your swift reply. The correct translation would be ‘invoegen in image rotator widget’.
        I really hope this works. On the other hand, I wouldn’t mind using the ‘send image to rotator widget’ in English if that would solve the problem.

        Kindest,
        Helen

      • 13

        Doug,
        I have several WP sites running, so I tried this image rotator in an English version, and it works just fine. So, I think you are right, this has to to with the translation. Would be great if you could get around to build the translation somewhere in the near future. If you need me to translate more from English to Dutch, I will be glad to help.
        Another question: is there a way to click a picture to make it stay, so people can read the text I added? Or in the loop, make it less fast?

  6. 14
  7. 18

    Hi, I’d like to change the javascript for the image fade so one image fades into the next instead of fading to white inbetween. What do I need to change for this?

  8. 19
  9. 21
  10. 22

    I love the plugin and it is working very well for me. My one questions, is there a way to have the link open in a new window?

    • 23

      Unfortunately, it doesn’t look like the media upload page has that feature – we’re just using the WordPress dialogue that’s built in. We can look at making it an option on the plugin, though! Between now and then, it is possible to do that with jQuery if you have some experience doing that development.

    • 26
  11. 27

    Thanks for a great plugin. One question – Is there the option to have two instances of the plugin? I’d like to use one set of images in one spot and another set of images in another.

  12. 29

Leave a Reply