SlideDeck 2 is now responsive!

SlideDeck 2 is now responsive!

We’ve talked before about how we believe that the responsive movement is the way forward for the Web, and now it’s time for us to stand by our words – starting with SlideDeck 2. Thanks to a lot of engineering trickery that we discussed a little while ago, today, we’ve updated SlideDeck 2 to be responsive! Now your sliders can automatically resize themselves to fit neatly on the page, regardless of the size of your screen or device – skip to the bottom to see how.

Try it for yourself

Check out how SlideDeck 2 reconfigures itself to accommodate for different screen resolutions. Note that this behavior can now be enabled for all of your existing SlideDecks , and all of the existing Lenses! Super cool, is it not?

The three stages of a responsive SlideDeck


Want to try it out for yourself? Subscribe for updates from the SlideDeck blog, and you can download SlideDeck 2 Lite for free to see it in action on your own site!

Get SlideDeck

We’ve also updated our free SlideDeck 2 Live Demo, so you can play with the responsive features right this minute.

 

How to make your SlideDecks responsive

As always, we’ve sought to make this changeover as simple as possible for you all:

  1. First, either purchase SlideDeck 2, or update your copy of SlideDeck 2 to the latest version, via the “Plugins” menu in the WordPress admin
  2. All of your current SlideDecks can be made responsive by simply adding the parameter “ress=1” to the shortcode used to embed it in the page/post. Here’s an example:
    [SlideDeck2 id=XXXX ress=1]
  3. Actually, there is no step 3 – uh, that’s it!

But wait, there’s more! Simply using the “ress=1” attribute will enable your SlideDecks to scale proportionally, based on the width of the screen that’s viewing it – but what happens if you need it to stay the same height ? Well, we’ve got another little trick baked into the latest update for you. Just add the parameter “proportional=false” to your ress-enabled SlideDeck shortcode to maintain its specified height:

[SlideDeck2 id=XXXX ress=1 proportional=false]

Don’t have SlideDeck yet? Now’s the perfect time.

Get SlideDeck

So are you going to start creating SlideDecks with content optimized for your mobile visitors? Is this a useful feature to you? Let us know your ideas in the comments!

66 replies
  1. J Shepley
    J Shepley says:

    I have added a responsive slidedeck to our homepage but it continually loads when I access it from an iphone. Is the new feature compatible with an iphone and if so, what is going wrong?

    Reply
  2. John R. Webster
    John R. Webster says:

    I just gotta say that you people rock! God bless you.

    The new responsive features you added to SlideDeck 2 are right on the money. Just what the doctor ordered.

    I’ve been searching deep and working hard looking for a solution for one of my clients websites. Eureka! I have found it with SlideDeck 2 and the new responsive features.

    My client’s upgraded site is still in development, so I can’t provide a link to it here… yet. Perhaps, once it’s all done and live, I can add another post with the link?

    Let’s just say for now, I am one happy camper. Everything with SlideDeck 2 is working beautifully on computers and mobile devices.

    Your support has also been exemplary. Great support is a rare commodity these days, but yours is one of the best I’ve experienced.

    I am truly grateful for your great work and support. Keep it up!

    Reply
  3. Guy
    Guy says:

    Hi I’m new to this but I found SlideDeck super easy to use. One thing I’ve noticed though is that the image switch method is different if viewed on a mobile device compared to my laptop. I’d like it work the Sam if possible is there something I need to setup. It’s so cool though!!

    Reply
  4. meg
    meg says:

    This is great, but with the proportional – what if it needs to be the same width on the computer screen? When I add this, it is great on the iphone but on the imac, it makes it much wider. How can I make it stay the same width (the width specified) on the mac?

    Reply
  5. Nur Ahmad Furlong
    Nur Ahmad Furlong says:

    I was really excited to see the responsive feature and started using slidedeck after being uncertain whether to invest in it previously. I really love the way this product has been put together, the wide array of options and lovely UI to make it easier to manage.

    I am very disappointed in the responsiveness though a,d find the iFrame approach really horrible to customise. Also having major problems getting responsive versions of the slidedecks I’m building to display their contents correctly without being cut off.

    I guess it’s a new feature that needs a ton of work.

    Reply
    • Jason
      Jason says:

      Hey Nur

      Thanks for the feedback. Yes, the responsive mode for SlideDeck is very much a first pass for us. It was a significant engineering challenge to get it to work with all our own lenses, so it’d be very difficult to account fully for custom Lenses where we have very little insight into what you would be building on top of the plugin. I’d recommend you chat with our support team, and they’ll be able to point you in the right direction.

  6. Thomas Ryan
    Thomas Ryan says:

    Hey there good people of SlideDeck.

    I was using the flickr portion of slidedeck and noticed a blank image in the slide. Turns out, this was a video on my flickr timeline. However, there isn’t an option NOT to display these in the slidedeck!

    I guess what I’m trying to say is: is there any way for you to add an option so that flickr won’t display the video in the deck? If this isn’t possible, would it be possible for the slidedeck to grab the thumbnail to use as the image? Right now it just shows up black!

    Thanks.

    Everything else is working great.

    Reply
  7. Greg Roth
    Greg Roth says:

    Thank you Jason, At this point, I am unable to access SD2 without a bunch of errors showing up on my page and individual posts where the Slidedecks are supposed to be. Also, I am unable to create slide shows for my stories. So all of my slideshows for articles that I have written over the course of the last 6 months are not showing up. I am going to deactivate the plugin until someone can help me. 24-48 hours seems like a very long time to get this issue resolved. I run an music news site and I cannot have my photos not showing up. Where can I escalate this issue? Or is there someone on these forums that can help? Thank you!

    Reply
    • Jason
      Jason says:

      You’re welcome Greg! Our support forum is the best way to get help, since this is just our blog comments section.

  8. Greg Roth
    Greg Roth says:

    Hello, I have been using SD2 with great success but now I cannot access any of my photo slideshows and if I leave the SD2 Plugin installed. I get these messages at the top of my website and also where the Slideshow should be.. Bottom line SD@ is not longer functional. I would try uninstalling and then reinstalling but I am then afraid that I will lose all os my slideshows. I currently have the Plugin disabled on my site. I have submitted a help ticket as well. Can anyone help?

    Warning: array_merge() [function.array-merge]: Argument #2 is not an array in /home/content/53/5975853/html/wp-content/plugins/slidedeck2-personal/classes/slidedeck-lens.php on line 484

    Warning: Invalid argument supplied for foreach() in /home/content/53/5975853/html/wp-content/plugins/slidedeck2-personal/classes/slidedeck-lens.php on line 541

    Warning: array_merge() [function.array-merge]: Argument #2 is not an array in /home/content/53/5975853/html/wp-content/plugins/slidedeck2-personal/classes/slidedeck-lens.php on line 484

    Warning: Invalid argument supplied for foreach() in /home/content/53/5975853/html/wp-content/plugins/slidedeck2-personal/classes/slidedeck-lens.php on line 54

    Reply
    • Jason
      Jason says:

      Hi Greg

      All your created SlideDecks are stored as custom posts in the WP database, so you shouldn’t lose them if you uninstall & reinstall the plugin. If you’ve submitted a ticket, one of our friendly developer ninjas will be in touch within 24-48 hours. Sit tight, we’ll be in touch!

  9. jason
    jason says:

    I was demoing the slider and noticed two things that would be ideal. If I use the forward/back arrows to skip around, I want to the option for the auto-play to start again. From what I see, as soon as you skip forward/back then the auto-play stops and you can’t turn it back on, forcing you to manually move through the slides from then on until you reload the page.

    The 2nd thing is related, which is if you added pause/play button option then you could turn the auto-play back on once you’ve skipped around the slides.

    Reply
  10. mick
    mick says:

    Hi guys, I just purchased the full Dev license and this feature doesnt seem to work.

    Once I set i to Responsive it cuts the width down to 300px from 962???

    Reply
    • Jason
      Jason says:

      Haha, yep, sometimes you just gotta throw your hands up and admit defeat in the face of awesomeness =) Thanks Jason!

  11. Matt
    Matt says:

    The right side of my slidedeck is being cut off a little on PC but a good amount on mobile which means that with certain lenses, the text is being cut off as well. Using proportional=false fixes it but then makes the slider a bit too big for mobile. I’ll find a fix for now. Using Esplanade theme for WP.

    Reply
  12. Shelley Gammon
    Shelley Gammon says:

    I’m looking for a wordpress widget that will pop up a random image (from a directory or other method) from a select group of images that will link to another page. I don’t want animation or an option to thumb through the other images – I just want a random image of a group of selected images to show in a spot when the page loads. Can slidedeck do this for me?

    Reply
    • Jason
      Jason says:

      Actually, for the most part, yes it can! =)

      You would want to create a SlideDeck that has the navigation and next/previous arrows hidden, as well as auto-play turned off, and the slide order randomized. This way, when people land on the page, the SlideDeck will randomly show one of the images in the set, and not advance. Give it a shot for yourself in the free live demo – http://demo.slidedeck.com/wp-admin

      Hope that helps!

  13. Mark Downing
    Mark Downing says:

    Jason,

    Is the promo closed? I just found out about your product. Tight budget. As a patriot I am working feversihly to inform my family, loved ones and friends that we are in a fight for our lives and our constitution. I’d like to be able top afford your slidedecks fully featured liscence, but just can’t find 200.00 laying aroind as a disabled veteran on a fiexed income.

    Reply
    • Dave
      Dave says:

      Hey Mark, we actually just dropped the price to $49, $99 and $149 for the Personal, Professional or Developer license respectively.

  14. Chad
    Chad says:

    This is a great solution to cover all the bases, and I couldn’t imagine a better way to achieve this. However, for some of my clients, the iframe just loads too slowly, with a visible blip of the SD “loading” screen on every load of the page. This does not happen with a slidedeck placed directly on the page.

    I’d like to be able to make just the background image responsive, for example, and to integrate its responsiveness into my existing responsive themes. I’m a pretty capable developer, very handy with CSS, but diving into the tangled complexity of a slidedeck and trying to customize specific pieces is shockingly difficult. It seems that some elements are styled with the main lens stylesheet, some with the stylesheet in one of the three SD plugins, some with the styles of another of those three, etc. I can analyze a static beast with Firebug, but this moving target evades easy analysis.

    I would be very happy with some clear, concise documentation that outlines exactly what in a slidedeck gets styled from where, and in which order of the cascade. I’d like to know the most efficient way to override the huge pile of styles coming in from different places without having to resort to !important declarations that really are too big a hammer for precision work (and which totally break my media queries).

    I still haven’t seen a comprehensive guide on how lenses are put together and how to customize them, and that might be the answer I’m seeking. Any idea when you might put something like that together?

    Reply
    • Jason
      Jason says:

      Hey Chad

      Thanks for the kind words! At this point, the RESS implementation for the responsive feature is just a first step – we know that we want to continue refining the feature to get better performance out of it. Expect more from us on this.

      As for the documentation, yes, SlideDecks are tricksy beasts, and far more complex than they appear, simply due to the high degree of different configurations we have to account for. It’s something we’re balancing between writing, and continuing to improve the product itself. Once we get a few more updates out to cover some popularly-requested features, we’ll likely turn our attention to opening things up for everyone to dive in and customize to their hearts’ content.

      In the meantime, we definitely encourage any intrepid souls who feel like exploring to share their work!

  15. Jason
    Jason says:

    Hi folks – just a heads-up that our Twitter promo is now CLOSED. Make sure to subscribe for updates, so you don’t miss any more offers and announcements! =)

    Oh, and thanks so much to everyone who tweeted on our behalf!

    Jason

    Reply
  16. Web Design Kipo
    Web Design Kipo says:

    Wow it is great i love responsive web design. Many people can not understand the necessity of this site you can visualize equally well on phones tablets and smartphones, but this is the future in web environment

    Reply
  17. Rachel
    Rachel says:

    Hi Jason,

    I retweeted and DM’d a copy to slidedeck (from @rachael_be). Apologies but don’t know how to find the tweet URL to DM to SlideDeck(!).. new to using Twitter. SlideDeck looks absolutely stunning and I cannot wait to use it! Congratulations.

    Thanks,
    Rachel

    Reply
  18. Nicole Cairns
    Nicole Cairns says:

    Thanks!! I just tweeted the url of my RT to you…I couldn’t get my DM to send for some reason. Please let me know what to do next in order to place my order with the applied discount.

    Reply
  19. Jeff Walberg
    Jeff Walberg says:

    Are you planning to also make slidedeck.js responsive? We’re moving towards a responsive design on a large site that uses WordPress for some purposes but another CMS for the bulk of the site. It would be terrific to use the same slider across the site.

    Reply
    • Jason
      Jason says:

      Hey Jeff

      It’s in the cards, yes. This update to SlideDeck 2 is just a start – we see ourselves working to improve the responsiveness of not just SlideDeck, but all our products moving forward.

  20. Kevin Gilbert
    Kevin Gilbert says:

    Ok. Scratch that. I see the settings in the widget. My apologies. I had two sites open, thought I had updated both, but hadn’t, and was looking at the widget in the non-updated site. Although, once I did get it right, updating the widget to be responsive completely altered the output. I’ll open a ticket, but just wanted to clarify the comment here.

    Reply
  21. Kevin Gilbert
    Kevin Gilbert says:

    Way cool. I’m excited. I’ve converted over a few decks so far and overall it’s working well, though, I’m seeing some inconsistencies, but I’ll open a ticket for that if I can’t get them working well.

    I was curious as to whether the SD widget supports the new responsive features by default, or if there’s a way to enable responsive there, too. I have a theme, with a wide, widgetized home screen on which I have a slide deck placed, but being that it’s done using the widget, I’m unclear as to what I should be seeing?

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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