Responsive Slideshows

I have been building more responsive websites lately and receiving more and more requests from users for responsive slideshows, so I have updated the slideshows to scale automatically.

If you are using a fixed width theme the slideshows will remain unchanged at their original dimensions. But if you are using a fluid or responsive width theme those are used as the maximum dimensions and the slideshow will scale, shrinking to fit the theme on smaller screens and devices.

Any custom slideshow templates, stylesheets, or scripts you are using would have to be updated from the default versions in 1.5 to add this responsive functionality.

Try resizing the Meteor Slides homepage in your browser to see the responsive slideshow in action!

Touch Wipe Navigation

Another mobile friendly update in Meteor Slides 1.5 is support for touch navigation. I added the jQuery Touchwipe plugin which allows previous and next navigation with the swipe of a finger. This works on many touch devices including the iPad, iPhone, and Android mobiles and tablets.

Built In Support

The contextual help feature has been updated to use the new help functions in WordPress 3.3 and expanded with more information and links to relevant documentation.

Click the help tab in the upper right corner of any Meteor Slides admin page for more information.

Improved Slideshow Widget

The Meteor Slides Widget has been updated with a new slideshow selector. This option only displays if you have created one or more slideshows, allowing you to easily choose a slideshow from a dropdown without having to enter the slideshow’s slug.

Even More Translations

Thanks to these translators, Meteor Slides is now available in twenty languages!

Belarusian: Translation by Alexander Ovsov
Czech: Translation by Ondřej Carda
Danish: Translation by Kim Hansen
Dutch: Translation by Leon Buitendam
German: Translation by Maximilian Brandl
Persian: Translation by Peyman Asadi

A Five Star Year

Since 1.4 was released last year the downloads have more than doubled to 93,000, and it has zoomed up to a 145 ratings.

I have gotten so many awesome comments, tweets, emails, and even donations from Meteor Slides users this year, thanks everyone for your feedback and generosity!

If you want to keep up with and participate in the development of Meteor Slides, check out the project on Github.

Update: It looks like WordCamp Omaha didn’t happen this year either, better luck next year…

Let’s say you need two slideshows on your site. The larger slideshow, Jupiter, is 500×200 and the smaller slideshow, Mercury, is 300×150.

The height and width options on the slides settings page determine two things, the dimensions of the slideshow itself, and the maximum dimensions of the individual slides. Smaller slides can be used, but any slides that are larger than these dimensions will be cropped, so the height and width in the slides settings should match the largest slideshow on your site.

Start with the largest slideshow

Start by setting up the largest slideshow in the standard way. In the slides settings, set the Slide Height to “200″ and the Slide Width to “500″. Then create a slideshow called “Jupiter”, make your slides with images that are 500×200, and add them to the Jupiter slideshow.

Here is an example shortcode to load the largest slideshow with the name Jupiter:

[meteor_slideshow slideshow="jupiter"]

Note that you don’t need to use metadata to set the dimensions of the largest slideshow because it should match the dimensions on the settings page.

Then setup the smaller slideshow

Now for the smaller slideshow, create a slideshow called “Mercury”. Make the slides for this slideshow with images that are 300×150 and add them to the Mercury slideshow.

Because you have used smaller slide images which were prepped to fit 300×150, all you need to do is override the default slideshow height and width using metadata to shrink this specific slideshow to the proper dimensions.

Here is an example shortcode to load the smaller slideshow with the name Mercury:

[meteor_slideshow slideshow="mercury" metadata="height: 150, width: 300"]

When using metadata, only values which are strings should use single quotes, other types, such as the integers in the above example, should be used without single quotes.

Styling specific slideshows with CSS

By default the slideshows will be full width block level elements. Maybe you would like to wrap some text around the smaller slideshow though.

When you specify a slideshow, a unique ID is created for it based on the slideshow’s slug. So the Mercury slideshow ID would be “meteor-slideshowmercury”. With this ID you can target just that slideshow with certain CSS rules:

#meteor-slideshowmercury {
	float: left;
	margin: 0 20px 20px 0;
}

Keep it simple

But don’t forget, less is more! A slideshow is a great way to get a visitor’s attention, but when you add multiple slideshows or other animated elements to the same page you are dividing the user’s attention and diluting that page’s potential.

So try to keep it simple by spreading these elements out to different pages to reduce the clutter and increase the quality of your website.

By default slide posts use the same capabilities as blog posts and only admins can change the slide settings. So admins, editors, and authors can create new slides, and contributors can create slide post drafts. This is straightforward, but not exactly ideal.

Most of the time I only want the admin and editor to create and edit slides. And what if you want to give an editor access to the settings? This is where Members comes in handy.

Customizing roles with Members

When you activate the Members plugin it creates the custom capabilities for the slides post type. None of the roles have these custom capabilities, so the slides menu disappears for all the roles.

Now you can go to Users -> Roles and edit the roles you want to add the slides capabilities to. Typically I will add all the capabilities to the admin role, and add all the capabilities aside from meteorslides_manage_options to the editor role. With this setup, both the admin and editor can manage slides, but only the admin can manage the slideshow settings.

Changing the Members Settings

One thing to note, the Members plugin has several features that are activated separately. Two of these are active when you install the plugin, the Role Manager and Content Permissions. Content Permissions adds an extra metabox to the slide, post, and page editors, so if you aren’t planning to use that, I would suggest going to Settings -> Members and deactivating the Content Permissions feature.

Other awesome things you can do with Members

I install Members on every site I build so that I can create a streamlined experience for the end user. None of the default roles are ever quite right for the client. I want them to be able to edit all the content on their site including slides, forms, and widgets, but I don’t want to make them an admin and give them access to the WordPress settings or the ability to install new themes and plugins.

So to create the perfect role for the client, I make them an editor and customize the capabilities of this role to include just what the user needs to manage their site.

One example is removing the links menu. This feature is almost never used, so I avoid a lot of confusion by just removing the manage_links capability, which completely hides the Links menu from that role. An example of something I always add is the edit_theme_options capability. This allows editors to manage theme options, menus, and widgets, but won’t let them switch themes or install new ones.

If you aren’t already using Members, go try it out and be sure to leave a good rating for this awesome plugin!

Meteor Slides has been busy since version 1.3.3 was released. The number of downloads doubled to over 40,000 with nearly 80 ratings and many generous donors have also helped to keep my coffee cup full, thanks!

I recently created a GitHub repository for Meteor Slides; drop by if you’d like to fork, pull, watch, or otherwise fiddle with my plugin.

A new slideshow skin

The most noticeable change in version 1.4 is a new skin for the slideshow. The new navigation arrows and paged buttons improve the visibility on a wider range of backgrounds and just freshen things up a bit. See it in action on the plugin homepage.

These updates should enhance the navigation’s usability without being too drastic of a change visually. But no one has to switch the design of the slideshow on their site. I have packaged up the original design as a slideshow skin called Retrograde that you can drop into the theme to use the original design.

Keep an eye out for more slideshow skins, I have a few on the drawing board that I will release soon.

Members plugin support

You might be able to tell from my plugin, but I don’t like to add functionality to themes when there is an awesome plugin that could be used instead. The same goes for adding functionality to plugins!

Allowing users to control which roles have access to Meteor Slides has been on my GitHub issues list for a while now. This could be built into my plugin, but that adds complexity that most users don’t need and deviates pretty far from the plugin’s purpose. And there is already an awesome plugin for managing users and roles called Members.

Justin Tadlock’s Members plugin is one of the few plugins I use on nearly every site I build. With Members it is simple to customize a role for a client that has just the capabilities they need to create a better user experience.

I knew I wanted to extend those custom roles to include Meteor Slides capabilities as well. My first attempts at supporting Members didn’t work out, but thanks to Justin’s book, Professional WordPress Plugin Development, which he co-wrote with Brad Williams and Ozh Richard, I was able to get it working great!

Adding support for the Members plugin is the most noticeable improvement, but there are a lot more behind the scenes. I added uninstall functionality for plugin options, moved the admin functions to a separate file, re-organized the plugin, and really improved the code overall. If you want to write awesome WordPress plugins, this is the book to get!

Custom slideshow script

I have extended Meteor Slide’s support for custom stylesheets and templates to include slideshow scripts as well. This should rarely be needed, but is handy if you need to heavily customize the paged navigation. Check out the documentation on custom slideshow scripts to learn more.

More translations

Meteor Slides is now available in fifteen languages thanks to the kindness of these translators!

Hebrew: Translation by Ariel Klikstein
Japanese: Translation by COCOM
Polish: Translation by Marcin Pronobis
Portuguese: Translation by Hugo Baeta
Russian: Translation by Boris Homiakov
Updated Swedish: Translation by Simon Wämmerfors

In 2009 I drove down for Chicago’s first WordCamp. I had a great time at WordCamp, but it was a long hectic drive by myself. Not going to make that drive again, but I also don’t want to be one of those people on Twitter complaining about delayed flights and TSA jackboots so I’m going to take the train instead.

I’m packing a nice thick book and hoping for a stress-free trip, don’t let me down Amtrak!

Looking forward to meeting a bunch of people I only know from Twitter or their blogs, new people who I haven’t bumped into online yet, and maybe even some people who use Meteor Slides.

Meteor Slides reached a couple of big milestones this week. My plugin broke 50 ratings while holding onto a five-star rating. It has also now been downloaded over 25,000 times, that’s a lot of slideshows!

To celebrate Kristine and I baked some gold star cookies with the kids—alright, they baked the cookies and I ate them.

Thank you everyone who has tried and rated my plugin, marked it as working, or left a comment. I really appreciate all of the feedback!

Meteor Slide 1.3.2 has some updated functionality for WordPress 3.1, improves support for slideshows of different sizes, and now includes contextual help for all of the slideshow admin pages.

This plugin recently reached 17,000 downloads, and after 40 ratings, Meteor Slides is still holding onto five stars! Thanks everyone who has tried my plugin, rated it, and especially those who have been kind enough to donate. Seen a few cool implementations of Meteor Slides lately and I’d love to see more if you want to share a link.

Meteor Slides 1.3.2

Meteor Slides 1.3.2 improves support for multiple slideshows and adds updates for WordPress 3.1 compatability. Any custom stylesheets or templates will need to be updated for use with this release.

• Improved support for multiple slideshows of different sizes
• Fixed transparent PNG bug
• Updated functions for WordPress 3.1 compatibility
• Updated screenshots for WordPress 3.1
• Updated jQuery Cycle to 2.94
• Updated jQuery Metadata to 2.1
• Added message filters for slides
• Added contextual help
• Added Chinese translation by Yu Haoran

Updating Custom Stylesheets and Templates

To fully support multiple slideshows of different sizes I had to make some changes to simplify the markup of the slideshow. This will not affect most users of Meteor Slides, but if you are using a custom stylesheet or slideshow template you will want to replace these with a fresh copy from 1.3.2 and update your changes.

Sorry for any inconvenience, but these changes should improve the flexibility and reliability of the slideshow. If you have any problems or questions please let me know.

Note: I had a generic function in 1.3.2 that was causing a conflict, Meteor Slides 1.3.3 resolves this issue.

But there is an issue with using multiple slideshows of different sizes. Not all of the different elements in the slideshow are resizing dynamically when the dimensions are changed in the metadata. This issue is most noticeable when using navigation.

I have a development version of Meteor Slides 1.3.2 in trunk that fixes this problem and I could use some help testing it. The CSS and HTML markup of the slideshow have had some significant changes. These changes simplify the slideshow and should make it easier to customize in the future, but they could cause problems with existing customizations.

If you are using multiple slideshows and resizing any of them using metadata, please try the development version and let me know in the comments if this fixes the problem.

I’d also like to hear from users who aren’t having this problem that have tested version 1.3.2 to make sure that it doesn’t cause any new problems!

If you are using a custom stylesheet, please use caution, you might want want to test this on a copy of your site before making it live in case you need to make any changes to your stylesheet.

There have been a few projects where I have needed to customize the template for the slideshow, so this version adds support for a custom slideshow template. I added some documentation for using a custom template which shows how to add titles or captions to the slides, and there is also now a page in the documentation on custom stylesheets.

Be on the lookout for more Meteor Slides screencasts and documentation in the near future!

Meteor Slides 1.3.1

• Fixed post thumbnail registration conflicts.
• Added support for custom slideshow loop.
• Fixed navigation for multiple slideshows.
• Improved support for transparent images.
• Fixed slideshow layout issues.
• Updated French translation by Thierry Michalowski