Ticket (Solved)

Responsive Carousel

Hi,

I am trying to learn Orchard by building out my personal website. I am using 1.8.1 and Azure.

The site is for my photos and I want to be able to build a responsive bootstrap carousel. Right now I am adding the media to the carousel via html. Clearly I am doing it wrong.

Can someone elaborate on this "no code" solution by Sebastien (@sebastienros) in this discussions post?

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.

Thanks!

Matt

External URL: http://orchard.codeplex.com/discussions/554162

Re: Responsive Carousel

Step 1: Go to "Content Definition" and "Create new type", select "Container" and "Title" parts (you will be able to select other parts later), input "Carousel" in the "Display Name", keep "Creatable" and "Draftable" options, and save

Step 2: Create another type with "Containable", "Title" and "Body" parts, "Slide" for the "Display Name". Then, use the "Add Field" button, input a "Display Name" and select a "Media Library Picker Field" for the "Field Type", save your field and save your type

Step 3: Go to the "Modules" page and enable the "Lists" module. Then, go to the "Lists" page and use the "New List" button and select your "Carousel" type (here because it has the Container part). Input a "Title"(e.g "Carousel 1"), in the "Contains" list select your "Slide" type (here because it has the Containable part), and publish. Right now, you can add a "Slide" to your "Carousel

Step 4: Go to the "Lists" page, select your "Carousel 1", use the new "New Slide" button. Input a "Title", a "Body" text, select a media with the "Add" button, and publish. Repeat this to create several "Slide" items

Try to do these first steps before seeing how to use a projection page or widget to render your Carousel in your Layout

Note: It's only as an example. With the body editor you can add a media in your body part, so, maybe you don't need the media picker field in your Slide type. Maybe you will prefer to use a simple text field in place of a body part...

Regards

Saturday, January 31, 2015 11:43:57 PM byjtkech
  • jtkech
  • Lv. 13 Rookie
  • Total EXP: 1028

Re: Responsive Carousel

Thanks for your help @jtkech and @sroussos. Your instructions were fantastic. I was able to create the Content Types (Carousel as Container, Slide as Containable) to create carousel.

Now I need to read up on Queries/Projections for part 2 to render the carousel. Might need some advice on this but I'll keep working it!

EDIT: Should I be using Taxomomies instead of LIsts?? Ugh.

Creating lists The List feature is deprecated and should not be used any more. Please consider using taxonomies instead.

Sunday, February 1, 2015 3:07:08 PM byMattDunn

Re: Responsive Carousel

I now have a Query and Projection for my Slide content type. The List and the Projection look the same. Are they the same? I tried adding a layout to my Query but can't get one working. I just get the default Summary display.

Sunday, February 1, 2015 9:43:00 PM byMattDunn

Re: Responsive Carousel

Your Container is now a "List" of Slides, and, via the "Lists" feature, it helps you to manage your slides in the dashboard. In your query, I assume that you have added a filter to select your "Slide" type. If so, then you're right, your query result is also a list of Slides

But, here we will use this query to display this list in the front-end. So, in your query, for example, try to add a new layout, select "Html List", and then, change the "Display Type" from "Summary" to "Detail" and save

Now, to display your query you can create a projection page with an Url... But, I think you want your Carousel displayed by default in all pages. If so, go to the "Widgets" page. For example, in the "Featured" zone click the "Add " button, then select the "Projection Widget". Here, input a "Title" and in the "For Query" list select your Carousel query associated with the Html list layout

At this point, you will see in the front-end a simple list of Slides but rendered in the "Detail" display type (not in the "Summary" one). We will see later, as needed, how to customize your view, e.g with an alternate razor view (*.cshtml) that maybe will include a jQuery plugin to implement your Slider... You talked about a responsive bootstrap carousel. This can be done with some classes declarations and bootstrap scripts...

Meanwhile, see what you can do with the "Id" and "Classes" that you can define in your query layout (just created before) editor, and with some *.css files

Regards

Sunday, February 1, 2015 11:01:42 PM byjtkech
  • jtkech
  • Lv. 13 Rookie
  • Total EXP: 1028

Re: Responsive Carousel

One way to render your Bootstrap Carousel was to put "Carousel" in the technical name of your projection widget, and create in yourTheme/Views folder a "Widget-Name-Carousel.cshtml" alternate view. Then, here you can use your main carousel wrapping tag (div class="carousel slide"), add your carousel controls... And in your projection layout (here your Html List), in the "Html properties", input "carousel-inner" in the "List class" and "item" in the "Item class". But, here the poblem is that we need the class "active" on the first list item. It's simple to do that with one line of jQuery. I tried it and it works, but I prefer to find another solution

Another solution is to use an alternate view of the "List" itself. Here, you can use the "List-ProjectionWidget.cshtml" alternate but it's too generic. There are some modules to add more specialized alternates, but I prefer another way

The simpler way I've found is to create another layout in your query, the "Shape" layout. Then, in the "Display type" you can input "Detail" (not necessary), but in the "Shape type" input "Carousel". Then, in your projection widget, select your query with this new custom layout

Just before, put in yourTheme/Views folder the "Carousel.cshtml" (see attachment) where I call Display() on each slide and where I wrap each slide with the standard bootstrap tags and attributes for a carousel

Note: When Sebastien says with "No code", I think that means with no *.cs files, but with *.cshtml alternate views (here called templates)

Regards

Attachments
Monday, February 2, 2015 8:05:00 AM byjtkech
  • jtkech
  • Lv. 13 Rookie
  • Total EXP: 1028

Re: Responsive Carousel

Wow! That is AWESOME and it works. I owe you many beers @jtkech !!! Where are you based? I have been trying to figure this out for countless hours without much success.

I think I have enough to go on now. I should be able to modify the alternate/view template to show just the image. I really appreciate your help and patience on this.

Matt

Monday, February 2, 2015 3:35:24 PM byMattDunn

Re: Responsive Carousel

So the Carousel.cshtml template is using @Display(BuildDisplay(slide))

This projection displays all the fields and parts of my new slide content type, which includes the image thumbnail. What I really want to display is the full size Image. I'm trying to research this now.

EDIT: Can't figure out how the Query/Layout Custom Value property works. Rewrite text to: img src="{Content.Fields.Slide.Image.Url}" oncontextmenu="return false;"

EDIT: I think I have to add this to the Carousel.cshtml and somehow build the tags for src/urls for the bootstrap carousel. Help!

@using Orchard.MediaLibrary.Models;

var photos = (IEnumerable)Model.ContentItem.Slide.Image.MediaParts;

Sample link from my doing it all via html.

img src="/Media/Default/2015/20150123-chain/L1002462-Edit-1.jpg" alt="First slide" oncontextmenu="return false;"

img src="/Media/Default/2015/20150123-chain/L1002721-Edit-2-1.jpg" alt="Second slide" oncontextmenu="return false;"

Monday, February 2, 2015 4:00:34 PM byMattDunn

Re: Responsive Carousel

@jtKech - awesome work dude. Unfortunately the OP didn't mark your replies as the answer, so you missed out on XPs, but until we figure out a proper way to handle this I'm assigning you triple the amount for the work you put in. Massive thanks for your participation.

Monday, February 2, 2015 8:36:11 PM bysfmskywalker

Re: Responsive Carousel

@sfmskywalker, thanks a lot, so I was lucky. Anyway, I learn so much by helping others as I can. Thanks again

@MattDunn, before checking your last problems, here some other infos

You're right, the "Lists" feature was deprecated, but it was re-introduced thereafter. If you have put "Detail" in your custom layout query, then you can also use one of these alternates for your "Slide" type: "Content-Slide.cshtml", or "Content-Slide.Detail.cshtml"... As an example, in the following blog post, see how the "Views/Content-Animal.Summary.cshtml" view is done (here for the Summary display type) http://www.ideliverable.com/blog/ways-to-render-lists-of-things

You can also reorder, show / hide some parts of your "Slide" type by using the "Placement.info" file in yourTheme folder. E.g if you want to hide the metadata (here the date) you can use this

</Placement>
  <Match ContentType="Slide">
    <Match DisplayType="Detail">
      <Place Parts_Common_Metadata="-"/>
    </Match>
  </Match>
</Placement>

Or if you want the Date before the Title, use this

<Place Parts_Common_Metadata="Header:before"/>

See the Orchard documentation for other details: http://docs.orchardproject.net/Documentation/Understanding-placement-info

Maybe, with the placement info file and a slide alternate, you will be able to handle your last drawbacks. I will check it soon

Regards

Monday, February 2, 2015 10:52:42 PM byjtkech
  • jtkech
  • Lv. 13 Rookie
  • Total EXP: 1028

Re: Responsive Carousel

Thanks again @jtkech !! I feel like I am learning quite a bit from this exercise, although, it can seem overwelming at times.

I don't think using the placement.info solution because even if I were to hide all the parts/fields in ContentType="Slide", I still would not see the full size image! I need to revise the Carousel.cshtml to load up the urls into the image src.

var images = (IEnumerable)Model.Images; var count = images.Count();

I can't seem to find an example of this. Just getting the thumbnail currently.


Monday, February 2, 2015 11:19:13 PM byMattDunn

Re: Responsive Carousel

For the Image size, it's because, even we use the "Detail" display type, the MediaLibraryPicker field use the "Summary" display type. So, copy the "Orchard.MediaLibrary/Views/Fields/MediaLibraryPicker.cshtml" file in yourTheme/Views folder, rename it with "Fields.MediaLibraryPicker-Slide.cshtml". And inside this file replace "Summary" with "Detail"

Regards

Monday, February 2, 2015 11:47:44 PM byjtkech
  • jtkech
  • Lv. 13 Rookie
  • Total EXP: 1028

Re: Responsive Carousel

Is this the right file name and folder? I copied that into Theme's Views/Fields folder MediaLibraryPicker-Slide.cshtml . Did not see a change.

EDIT: Yes! Sorry. That displays the large photo! But in order to be "Responsive", it needs to have the right tags:

<img class="img-responsive" oncontextmenu="return false;" alt="Responsive image" src="/Media/Default/2015/untitled-2.jpg" />

EDIT2: How do I display this without the width and height. So close... Also need to add another tag called oncontextmenu="return false;"

<img width="2000" height="1336" alt="" src="http://mattdunndc.blob.core.windows.net:80/media/Default/2015/20150123-CATG/L1002705-Edit-1.jpg" /> Should be: !!! <img alt="" src="http://mattdunndc.blob.core.windows.net:80/media/Default/2015/20150123-CATG/L1002705-Edit-1.jpg" />

Tuesday, February 3, 2015 12:23:46 AM byMattDunn

Re: Responsive Carousel

Yes, it's right. In this file, did you replace this ?

@Display(BuildDisplay(content, "Summary"))

With

@Display(BuildDisplay(content, "Detail"))

But by reading your previous post, I'm not sure that you have used a media picker field. What fields and/or parts did you have used for your "Slide" content type ?

Another simple way is to only use the body part in wich you can insert a media image and some description text...

Regards

Tuesday, February 3, 2015 12:48:47 AM byjtkech
  • jtkech
  • Lv. 13 Rookie
  • Total EXP: 1028

Re: Responsive Carousel

Glad to see you are so close. I will see this last point asap

Tuesday, February 3, 2015 1:11:36 AM byjtkech
  • jtkech
  • Lv. 13 Rookie
  • Total EXP: 1028

Re: Responsive Carousel

How do I override the MediaLIbrary.Views.Parts\Image.cshtml ??? I want the image to be responsive so I don't need img width="" height=""

@using Orchard.ContentManagement
@using Orchard.MediaLibrary.Models
@{
    ImagePart imagePart = Model.ContentPart;
    var mediaPart = ((ContentItem)Model.ContentItem).As<MediaPart>();
}           

<img width="@imagePart.Width" height="@imagePart.Height" alt="@mediaPart.AlternateText" src="@Url.Content(mediaPart.MediaUrl)" />
Tuesday, February 3, 2015 1:21:37 AM byMattDunn

Re: Responsive Carousel

By copying this file in your theme, but it will be too generic. Let me see if there is another solution

Maybe, in your special case, it would be good to use a body part, insert your media with the body editor and click on the "Html Editor" button to put what you want

Regards

Tuesday, February 3, 2015 1:30:11 AM byjtkech
  • jtkech
  • Lv. 13 Rookie
  • Total EXP: 1028

Re: Responsive Carousel

In yourTheme/Views/Fields folder, try this "MediaLibraryPicker-Slide.cshtml" file in place of the previous one (see attachment) . In this version, for all the image parts, I specify a new slide specific alternate view. So, you can copy the "Orchard.MediaLIbrary/Views/Parts/Image.cshtml" in yourTheme/Views/Parts folder, and rename it "Image-Slide.cshtml". Then, you can use this specific alternate (not too generic) to work directly on the image tag

Regards

Tuesday, February 3, 2015 3:01:35 AM byjtkech
  • jtkech
  • Lv. 13 Rookie
  • Total EXP: 1028

Re: Responsive Carousel

What a pain. That's not working. I was able to add a alternate, which seemed to work. I can't get rid of the PartsTitleSummary, PartsCommonMetadata for the Media.

Man. What a mess. The good news is that the image is now responsive. But I had to add the alternate for Image.Summary-Image.cshtml.

So many hours and still more work to do on this. LINK

Tuesday, February 3, 2015 5:34:34 AM byMattDunn

Re: Responsive Carousel

It works fine on my side on a 1.8.x version (not 1.8.1). I think your are very close to get rid of your last drawbacks. Contact me directly by email (via my Codeplex profile), this to finish the work without overloading this ticket

EDIT: Woa, I've seen your link, your Carousel works well, nice photos. So, your last problem is to prevent some parts to be rendered, we will fix that soon. And we have to understand why you have to use the 'Summary" alternate, because my specific alternate "Parts/Image-Slide.cshtml" works (what's your Orchard version ?)...

EDIT: Tested on a 1.8.1 version. Indeed, I have to use the summary image alternate if I don't use my last "Views/Fields/MediaLibraryPicker-Slide.cshtml" that add a specific image alternate. But, if I use it, then I can use the specific "Parts/Image-Slide.cshtml" alternate. Finally, I can get rid of the media title and metadata with the use of the placement.info file (here, with: Match ContentType="Media")

You can contact me by email (see my codeplex profile)

Regards

Tuesday, February 3, 2015 6:25:08 AM byjtkech
  • jtkech
  • Lv. 13 Rookie
  • Total EXP: 1028

Re: Responsive Carousel

Thanks! Sent an email!

Tuesday, February 3, 2015 2:08:21 PM byMattDunn

Re: Responsive Carousel

Just for infos and share the final code

Infos: The last drawbacks was due to another more specialized alternate that had been created before and not removed. So, our "MediaLibraryPicker-Slide.cshtml" wasn't taken into account

Share: So, we use a "Slide" content type with a media picker field, a query on this content type with a custom "Shape" named "Carousel", and a projection page / widget

We also use the "List" module but only to manage the Slides in the Dashboard. That's why we added a "Containable" part to the "Slide" type and we created a "Carousel" type with a "Container" part

So, we have a "Views/Carousel.cshtml" (see attachments) to render the custom query layout, and where we use tags and attributes for a bootstrap carousel

At this point, images was rendered in the "Summary" display type, media title and metadata wasn't desired, and we needed to customize image tag attributes. But, solutions with placement info file and / or alternates views was too generic, there was "Slide" specific solutions only for the media picker field

So, we used a "Views/Fields/MediaLibraryPicker-Slide.cshtml" (see attachments) that specify the "Detail" display type and add on the fly 2 "Slide" specific alternates. Then you can use a "Views/Media-Image-Slide.cshtml" to render which media part you want, and a "Views/Parts/Image-Slide.cshtml" to customize image attributes

Regards

Wednesday, February 4, 2015 11:10:55 PM byjtkech
  • jtkech
  • Lv. 13 Rookie
  • Total EXP: 1028

Re: Responsive Carousel

Hi , i'm new here . jtkech you are amazing , your info is so good and help me a lot , but i have a little problem. I want to display the carousel when i used the search widget. My search widget uses the info of the body to search the images, but when i search for example (im) that is in two body images , the items are displayed without the carousel , just the name and more, etc . I don't know if the thing that i want is possible =( Thank you for your help =)

Attachments
Tuesday, July 19, 2016 9:46:54 PM byVictor
  • Victor
  • Lv. 01 Rookie
  • Total EXP: 2

Post a reply

You need to be signed in to post a reply.

Sign In