Determining how to implement a slideshow

Topics: Writing modules
Jun 28, 2011 at 5:00 PM

I'm going to be implementing a slider module that allows the admin to create slides, and on the front-end display those slides with the ability to navigate between them using a left or right arrow button. Each slide will likely be consisted of some rich text/HTML, and the user can create N number of html slides.    It should also be able to show some text following the slideshow. We want to allow them to create any number of different slideshows and place them on different pages throughout the site.

We have the front-end worked out on a static example, I'm just not sure how to implement this using Orchard.  I originally thought about creating this as a part that we could then tie to a content type/page using randompete's mechanics module.  Then we'd just create a content type called Slider and have this new custom slideshow part tied to it.

I'm not sure a part makes sense here, or at least I can't visualize how that would work on the admin side.  It almost seems like this works better as a straight up module with a controller and views, but I'm not sure how we could tie it to pages.

In my infancy with Orchard, I still struggle at what the best Orchard functionality is to solve certain problems.   I'm not sure if I'm even asking my question correctly because I don't know how to articulate it in Orchard speak, but I wanted to get some feedback from people and perhaps start a discussion to get more educated. So, what are your thoughts? Can you point me in the right direction for coding a module such as this?

Jun 28, 2011 at 5:07 PM

There are two routes you can go down with something like this;

- As you've said you could use Mechanics - along with Media Garden. Media Garden lets you create the images as content, then you can use Mechanics connectors to build the slideshow model. You can then customise the templates to add the Javascript for the slideshow. Finally you can use PaperclipsPart to push a slideshow to a particular zone, and you can just attach the slideshows to different pages wherever you need them. It's a lot easier (at least from my point of view!) because most of the work is done for you.

- If you want a more controller/view style way of building it, you can implement a Widget. You'll end up with the same result, except having multiple slideshows will be trickier. Orchardproject.net has tutorials on building widgets so I'd recommend starting there.

Jun 28, 2011 at 9:04 PM

Dang, I had notifications turned off, so I missed this reply.  I was literally just looking into the docs for this (http://www.orchardproject.net/docs/Writing-a-widget.ashx). I think we've committed to using Mechanics for layout purposes as it seems more intuitive a way of organizing things on pages.  So, if don't use media garden and we go the widget route (which is really just a content part that has a few extra things to define it as a widget) would we still be able to use that with Mechanics?

So, if I see it correctly, would it go like this:

  • Create a new content type called "SlideShow Widget" or something.
  • Create our content part and attach it to the type we just created
  • Use mechanics to tie it to a page

How would you handle the ability to add slides to the slideshow? I know I could use 1-N data migration stuff for this, but as far as the UI goes, I'm not visualizing it.  Normally when I go to add/edit a content type, if a part is attached to it, it'll display the fields and view that's attached to the type. In a case like this, instead of fields, it'd be a list of slides attached to it, and you'd need to be able to click into them to edit the HTML for each slide.  Is something like that even possible with a driver? I've only used them for edit/display purposes thus far. 

I'm going to look into using MediaGarden as well, I just want to know what my options are for both paths...

Jun 29, 2011 at 10:47 AM

Well I'm working on a decent integration between Mechanics and Media Garden; so the following will happen:

- Create a "Slideshow" type with a many-to-many relationship to "Image"

- When you create or edit a Slideshow, you'll see an upload button which will automatically add the images you upload into the slideshow (in addition to other search options)

Right now, you could do the above, and you'd get checkboxes for which images you wanted to add to the slideshow, just like with any Mechanics connector. You can upload the images through the Media Garden interface.

Jun 29, 2011 at 2:40 PM

I see two concerns with this...first, the slides are made up of HTML, not just an image.  Secondly, and more importantly, I'm concerned that our admin user might find the whole process of doing all of this a little complicated.  I have to assume a low of technical prowess for this user just to be safe.

My question in the previous post:

How would you handle the ability to add slides to the slideshow? I know I could use 1-N data migration stuff for this, but as far as the UI goes, I'm not visualizing it.  Normally when I go to add/edit a content type, if a part is attached to it, it'll display the fields and view that's attached to the type. In a case like this, instead of fields, it'd be a list of slides attached to it, and you'd need to be able to click into them to edit the HTML for each slide.  Is something like that even possible with a driver? I've only used them for edit/display purposes thus far.

I should be clear, I meant that as a question in the context of NOT using mediagarden.  If I go the widget way, will this be possible? The way I understand it if I use a widget, it'd have a driver with a display and editor overload.  In my scenario, I need a list view (for all the slides attached to a slideshow), a slide details view, and a slide add/edit view.  Can that be accomplished with a driver setup?