Dynamically modify number of columns in view, responsive layout

Question

I'm using one of the AdaptiveThemes for a site I'm working on. For the sake of simplicity, we'll say it's a site for set of webseries. On the pages for the episodes, I'd like to have a view that displays thumbnails for each of the other episodes in the series. The view will ideally be setup like Hulu. For example, here, each of the episodes is listed in a slideshow list.

Since the site is responsive, I need to have the number of items displayed change with the size of the window. So, full size might show 4 thumbs, and as the view port gets smaller, it might change to 3 or 2 thumbs at a time. How can I achieve this?

Bonus points if you can give me a hint for scrolling through the list like the hulu site, too. Would that just be an implementation of Views Slideshow?

Answer 1

Clicked on this from the DA active feed, but just spotted it is very old. Hope this is of help to others anyway.

---

You don't need a table, or dynamic changing of columns for this effect.

If I understand correctly, you are just creating a responsive carousel.

There are many out there, but I can recommend Flexslider 2, and it comes with a hand Drupal module too.

Should take you all of 5 min to get working.

Answer 2

I can't see the Hulu link, I'm not in the US, so I can't comment on the slideshow aspect.

I have used Display Suite to create my own layouts and Panels to access the responsive layouts within Adaptive Theme (AT Commerce) because Display Suite layouts are not responsive. I enabled only the core Panels module, trying to do the same with Panels got messy and Display Suite allows you to draw in fields from various sources.

There is a great series of tutorials on using Display Suite here: http://www.youtube.com/playlist?list=PL7E361A55994F1648

You can also use Flexslider to make your images responsive

Answer 3

I have recently installed https://drupal.org/project/footable . Demos can bee seen at http://fooplugins.com/footable-demos/ .

In short it enables you to set columns to appear or disappear depending on the width of the viewport. I think this is what you are trying to achieve.

There are two other modules worth looking at drupal.org/project/responsive_tables and drupal.org/sandbox/minorOffense/1793630 . Both of these seem promising but are somewhat immature.

Answer 4

You can use the jcarousel module, patched with responsive support, to accomplish what you're looking for.

https://github.com/jmtorres/drupal-jcarousel/tree/develop

The original patch is in the jcarousel issue queue on drupal.org

Answer 5

I have used Views Fluid Grid to do exactly this.