Accordion Slider: First steps indications (HELP)

Topics: General
Sep 13, 2013 at 10:47 PM
Edited Sep 13, 2013 at 10:49 PM
Hello:

I need to build a module (I think is a module) to make an Accordion Slider like the one shown in this site:

http://www.david-beta.com/

Image

Where should I beggin? Recommended links, tutos, things I must have into account?

Thanks!
Sep 17, 2013 at 12:37 AM
Hello?

Anyone? :)
Developer
Sep 17, 2013 at 2:38 AM
Hey there.

There are a couple of ways you can go about this. One way could be defining a Slide content type, and a Slider content type which is a projection of a query that returns Slides. The disadvantage here is that you will get all slides for any slider (unless you add some conditions to your query to only filter by certain criteria).

Another, perhaps better option is defining a Slider and Slide content type, where the Slider type has a ContentPickerField attached, which you use to select the slides to be rendered.
Then in your theme you render the accordion using the selected Slides.

No module is required, unless you prefer to provide the types from a module (perhaps even if all you provide is a recipe).
Sep 18, 2013 at 6:07 PM
Edited Sep 18, 2013 at 6:17 PM
sfmskywalker wrote:
Hey there.

There are a couple of ways you can go about this. One way could be defining a Slide content type, and a Slider content type which is a projection of a query that returns Slides. The disadvantage here is that you will get all slides for any slider (unless you add some conditions to your query to only filter by certain criteria).

Another, perhaps better option is defining a Slider and Slide content type, where the Slider type has a ContentPickerField attached, which you use to select the slides to be rendered.
Then in your theme you render the accordion using the selected Slides.

No module is required, unless you prefer to provide the types from a module (perhaps even if all you provide is a recipe).
I think I understand you and I see more clear the second option you told me. Though I haven't tried this yet (I'm still doing other things in Orchard), can you please tell me where should I put the jquery for the animations? With the Content Types and everything you explained me I will just render what I need raw (right?); which is the right way to apply the javascript it needs?

Many thanks for all your help! =]
Sep 20, 2013 at 3:40 PM
Hello:

This is just to send the thread right to the top... I'll be waiting.

Thanks!
Sep 23, 2013 at 4:23 PM
Edited Sep 23, 2013 at 4:24 PM
Hello:

I will describe what I did and at the end I'll write some questions about the process I followed.

I followed the second option sfmskywalker suggested (thanks again) so I made a Slide Content Type that has: Media Library Picker Field (for the slide image), RedirectUrl (read more url), TexField (message to show), a Title Part and a Common Part. In the following image you can see how it looks:

http://s21.postimg.org/vbkfwfd7b/Slide.png

Then I created the Slider Content Type, this slider only has a Content Picker Field (to select the slides content type), and the common part. See the following image:

http://s18.postimg.org/s9fdgewjt/Slider.png

Now, as I needed the slider to be visible in a Projection that I have as my home page I added a Content Picker Field to the projection Content Type that allows to select only one Slider.

I Created the Slides, then created the slider with those slides and finally I added the Slider to the Home Projection. When I looked at how the slider was rendered It was shown only with a title and a link:

Slider: view

As I needed to show the Slides (showing links to them was useless), I started reading some post that had similar problems to mine:

https://orchard.codeplex.com/discussions/397345

https://orchard.codeplex.com/discussions/448316

https://orchard.codeplex.com/discussions/457076

... and some others.

With that info I tried to solve the problem the way I could so I ended up making a template alternate for the SliderField of the Projection called: Fields.ContentPicker-SliderField.cshtml. The content of this file is thisone:
@using Orchard.ContentPicker.Fields
@using Orchard.Utility.Extensions;

@{
    var field = (ContentPickerField) Model.ContentField;
    string name = field.DisplayName;
    var contentItems = field.ContentItems;
    dynamic ciSlider, ciSlide;

    // field contiene el sliderfield que lo único que contiene es un Slider en su primera posición
    ciSlider = field.ContentItems.First(); 
}
<ul>
    @if(contentItems.Any()) {
        foreach(var slideContentItem in @ciSlider.Slider.Slides.ContentItems) { 
            // Se iteran los contentItems del Slider
            ciSlide = slideContentItem;
            <li>
                <span class="ei_preview">
                    <img src="@ciSlide.Slide.Image.MediaParts[0].MediaUrl" alt="image"/>
                </span>
                <span class="ei_image">
                    <img src="@ciSlide.Slide.Image.MediaParts[0].MediaUrl" alt="image"/>
                </span>
                <div class="ei_descr img-des">
                    <h1>FAVORITE PUBLICATIONS</h1>
                    <h2>@ciSlide.Slide.TitlePart.Title</h2>
                    <p>@ciSlide.Slide.Message.Value</p>
                    <a class="more slider-wrapper" href="@ciSlide.Slide.RedirectUrl.Value">
                    @ciSlide.Slide.RedirectUrl.Text</a>
                </div>
            </li>
        }
    }
    else {
    }
</ul>
Now, with all this info I have some questions:
  1. Was my way of solving the problem the correct way of doing it? (including the template alternate)
  2. Was it right to add the slider to the projection using a Content Picker Field, would it be a better way of doing it?
  3. In the code above I had to cast the ContentItem to a dynamic value type. I did that because I saw it in one of the threads linked above. Can you tell me why is the dynamic value needed?
  4. Where should I put the jquery and javascript needed to make the animations work? How should I use it in the slider so that it behaves as it is intended?
Many thanks for all your help!

=]
Sep 25, 2013 at 3:53 PM
Can I get some help over here please? :)
Developer
Sep 30, 2013 at 7:38 PM
Edited Sep 30, 2013 at 7:38 PM
Sure:)
  1. There are lots of ways to solve 1-N (or N-M) relations, so it all depends. If it works for you that's fine.
  2. Seems fine. Extending types with fields when it makes sense is always ok.
  3. The dynamic value allows you to access parts like properties, without having to use .As<T>() extension method, ie item.MyPart on the dynamic object equals to item.As<MyPart>() when using strong typing. A nice shorthand, but I personally prefer strong-typing when possible.
  4. I'd create a resource manifest class (there are lots of examples in core), describe my custom script as a separate resource dependent on jQuery and use @Script.Require("ResourceName") within the slider field shape you pasted above.
Oct 2, 2013 at 9:34 PM
pszmyd wrote:
Sure:)
  1. There are lots of ways to solve 1-N (or N-M) relations, so it all depends. If it works for you that's fine.
  2. Seems fine. Extending types with fields when it makes sense is always ok.
  3. The dynamic value allows you to access parts like properties, without having to use .As<T>() extension method, ie item.MyPart on the dynamic object equals to item.As<MyPart>() when using strong typing. A nice shorthand, but I personally prefer strong-typing when possible.
  4. I'd create a resource manifest class (there are lots of examples in core), describe my custom script as a separate resource dependent on jQuery and use @Script.Require("ResourceName") within the slider field shape you pasted above.
Many thanks for your suggestions and opinions!

I will apply what you told me and let you know if anything crashes on my side.