Make featured item slider responsive

Topics: Customizing Orchard
Jul 25, 2014 at 3:22 PM
Hey everyone,

I've implemented the featured item slider and it works great.

The only problem is that it's not responsive. Has anyone succeeded in this?

I've been playing around with the css but I'm stuck because the calculations on the next slide is based on fixed dimensions...

Tx forany help,

Borrie
Jul 31, 2014 at 2:56 PM
Does anyone has another solution for orchard 1.8 to have a content item with a foto display in a responsive slider?

Borrie
Developer
Aug 1, 2014 at 12:52 AM
Maybe use a slider script that supports responsiveness?
Aug 1, 2014 at 10:44 AM
Skywalker,

That's indeed a good answer :) :)

Well, the featured item module uses the non-responsive script and is almost impossible to change.

This tutorial: http://www.google.be/url?sa=t&rct=j&q=&esrc=s&source=web&cd=6&ved=0CGIQFjAF&url=http%3A%2F%2Fwww.stevetaylor.me.uk%2Fimage-carousel-using-twitter-bootstrap-and-orchard-cms-projections&ei=BWHbU51Xid89mo2BsAs&usg=AFQjCNFC-8eyLqyMqHeCak63W47Z3hucLw&sig2=wgmjbN7Hkkh5Dyk7RrZvhw&bvm=bv.72185853,d.ZWU

Is very good but doesn't work in 1.8 because media picker has changed, image:url doesn't exist anymore.

Do you know how to transform this code to use with 1.8?

Borrie
Developer
Aug 2, 2014 at 11:40 PM
I try. ;)

Yeah definitely. Instead of using the MediaPickeField, use the MediaLibraryPickerField. You can access its selected media items through its MediaParts properties (which is an IEnumerable of MediaPart instances). Each MediaPart has a MediaUrl property which you can use to render the media.
When you do it, perhaps consider blogging about this process?
Aug 3, 2014 at 10:16 AM
yep, to get the url it goes like this: (for example)

var fotokens = (IEnumerable<MediaPart>)Model.ContentItem.Wijn.WijnFoto.MediaParts;

foreach (var foto in fotokens) fotourl = @Href(foto.MediaUrl); But how to get that in the shapefile?
Developer
Aug 3, 2014 at 6:58 PM
What do you mean by "how to get that in the shapefile"? Isn't that a matter of opening the shape file and adding this code to it?
Aug 3, 2014 at 7:12 PM
I don't see where
Aug 4, 2014 at 10:40 AM
Hello fellow-Dutch men.

I support skywalker's suggestion to blog about this when you achieve the responsiveness of this slider.

I gave it a try to do it myself, but that was when I started (let's say 1 week) with Orchard, so I didn't know where to start. I think OrchardMasterMind skywalker means you should do it in the View (≈ 'Shape').
Developer
Aug 4, 2014 at 9:13 PM
Exactly, do it in the view of the content item shape, probably for the Summary display type (e.g. Content-Wijn.Summary.cshtml to customize the Wijn content view, or Fields.MediaLibraryPicker-Wijn.Summary.cshtml to customize just the media library picker field view for the Wijn content type for the Summary display type).
Be sure you know what display type to target.

I like the View (≈ 'Shape') comparison. Personally I like to think of the view as being the 'skin' of the shape.
Aug 8, 2014 at 4:19 AM
Hey borrierulez, how did you go with this in the end? I followed the same tut, but my carousel shape doesn't even display the 'Media Library Picker Field' upon tracing, so creating an alternate view obviously won't work? Anyhow, any progress / thoughts you've made would be greatly appreciated, thanks in anticipation, cheers Dyr
Aug 11, 2014 at 4:30 PM
I'm getting close (I think)

This get's injected: <script>$(function () {$('#myCarousel').carousel();}); </script>

But I get the Uncaught ReferenceError: $ is not defined error on that line, I guess it's how orchard loads jquery, any help here?

I have this in my layout file:
    SetMeta(httpEquiv: "X-UA-Compatible", content: "IE=edge,chrome=1");
    Style.Include("//fonts.googleapis.com/css?family=Merriweather:400,300,700");
    Style.Include("//fonts.googleapis.com/css?family=Droid+Serif:700italic,400italic");
    Style.Include("bootstrap-responsive.min.css");
    Style.Include("bootstrap.min.css");
    Style.Include("site.css");
    Script.Include("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js");
    //Script.Include("../Scripts/jquery.unobtrusive-ajax.min.js");
    Script.Include("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js");
Aug 11, 2014 at 4:50 PM
Still get the $ error but ¨f*ck it :)

IT WORKS!!!!!

this is really stupid, you have to change inner-carousel to carousel-inner!!!!!! guess it changed in bootstrap 3....

skywalker,

Indeed I've created a shape alternative Content-Wijn-url-carouselprojection.Detail.cshtml

and put this code in:
@using Orchard.Utility.Extensions;
@using Orchard.ContentManagement;
@using Orchard.MediaLibrary.Models;

@{
    
    var fotokens = (IEnumerable<MediaPart>)Model.ContentItem.Wijn.WijnFoto.MediaParts;
    Orchard.ContentManagement.ContentItem contentItem = Model.ContentItem;

    Model.Classes.Add("content-item");

    var contentTypeClassName = ((string)Model.ContentItem.ContentType).HtmlClassify();
    Model.Classes.Add(contentTypeClassName);

    var tag = Tag(Model, "article");

    string fotourl = @Url.Content(Html.ThemePath(WorkContext.CurrentTheme, "/Styles/img/wijnflesdummy.jpg"));

    foreach (var foto in fotokens) fotourl = @Href(foto.MediaUrl);

}




    <img class="wijninasortimentfoto" src="@fotourl" />
Aug 11, 2014 at 7:20 PM
Have you blogged / put it available? :)
Aug 11, 2014 at 7:32 PM
I don't have a blog, I'll try to post the steps and code here
Developer
Aug 11, 2014 at 10:47 PM
Nice job. Make sure that the jQuery script library is included before the carousel script is included.
Aug 12, 2014 at 3:48 PM
Ok guys,

I've created a step by step word document, you can find it here: https://onedrive.live.com/redir?resid=F7DC1306D16D5B71!253&authkey=!AF0fwa1-1AOP4ZY&ithint=file%2cdocx

Enjoy!

As added bonus I've added an url to go to a link or contentItem and also a promotion text :)

Borrie
Coordinator
Aug 12, 2014 at 6:13 PM
Sorry for being late on this.

Personally I use the List module with two dynamic Content Types (Carousel as Container, Slide as Containable) to create a carousel. It allows repositioning of slides, draft/publish. That with a query/projection and two simple templates to render the carousel and you're done. No code.
Aug 14, 2014 at 2:24 AM
Gents,

Would be great to have a jssor module. Using Orchard at a commercial level means I have to offer a UI to clients, this is why I still use Featured Slider, modified by David Hayden. Not interactive though.

PK
Jan 28, 2015 at 10:19 PM
Edited Feb 2, 2015 at 6:58 PM
Sorry for being late on this.
Personally I use the List module with two dynamic Content Types (Carousel as Container, Slide as Containable) to create a carousel. It allows repositioning of slides, draft/publish. That with a query/projection and two simple templates to render the carousel and you're done. No code.
I have been trying to implement something like this with no luck. Sebastien can you elaborate on your no code solution above for the responsive Carousel? Happy to send money and gratitude.

Matt

EDIT: I am making some progress on this. I have been able to create the Carousel / Slide content types and then added a query/projection/ template to display a Carousel. This is not exactly what I had in mind.

Still working on this! I