Rich content editor

[Christian]

What would be a good approach to allow for rich content editing for each slide, basically want to have a dynamic amount of slides depending on images in a folder that will be a background image for the slide. Then each slide needs to have a layer of rich content that can be edited per slide.

 

Can i create slides (server side) per images in folder and inside the slide dynamically create a radeditor that has the image as background and store the content in my database and make sure i pause the slide on mouseover (when editor is in edit mode) to allow for editing. or is there any better approach to this? anyone done something similar?

 

Christian

[Marin Bratanov]

Hello Christian,

I would define the ItemTemplate of the rotator as needed to show the content beautifully and set the PauseOnMouseOver property to true.

I would then use the ItemClick event to add/show a RadEditor on the page where the user can change the content and click a Save button to store the data to the location where the rotator data source reads.

Or, the client-side OnClientItemClicked event and show a popup with the editor and corresponding data. You can even toggle a CSS class on the item that shows/hides the editor if you had defined it in the ItemTemplate.

Regards,

Marin Bratanov
Telerik by Progress

[Christian]

Hi Marin,

I'm sold on your idea and decided to use the OnClientItemClicked event to display a editor, really appreciate the suggestion.

However, I'm facing difficulties with the rotator to simply make it responsive with a div and background image set as background-size:cover.

 

No matter what i do I'm either getting very small items when debugging the internal rrItem class, or it wont cover the entiry width (not expanding width of image above image size, which cover should do).

 

i can get it working without using the rotator as a static image using the same container, so its something to do with the internal class that overrides what i want to accomplish.

 

i have a datasource with a few images (all the same size of 2560x410) and the following code,

<div id="rotatorContainer">
    <telerik:RadRotator ID="rotator" runat="server" Width="100%" Height="410px" RotatorType="Buttons" ItemWidth="100%">
    <Items>
        <telerik:RadRotatorItem>

        </telerik:RadRotatorItem>
    </Items>

    <ItemTemplate>
                <div class="rotatorBackgroundContainer">
                <div id="rotatorContentContainer">
                    <%# DataBinder.Eval(Container.DataItem,"content") %>
                </div>
    </ItemTemplate>
</telerik:RadRotator>
</div>

 

.rotatorItemContainer{
    height:410px;
    width:900px;
}

.rotatorBackgroundContainer{
    background:url('../images/rotators/home/3.png') no-repeat transparent;
    height:410px;
    background-size:cover;

}

#rotatorContentContainer{
    height:100%;
    width:100%;
}

 

I want to get each item (and content div) to cover the whole width of the screen which may sound simple enough but im just lost..

 

 

[Christian]

If i look at the rendered source i can see that the rrItemsList has a width of 70px(?), if i set this to 100% each rrItem is still limited to 70px unless i add width 100% to each rrItem class but then it looses its positioning and each item gets aligned vertically and the flow between each slide is wrong. hope this explains my issues better.

 

[Marin Bratanov]

Hello Christian,

Rotator items have width in pixels. The rotator itself may get 100% width, but this has some requirements and limitations as described in the documentation: http://docs.telerik.com/devtools/aspnet-ajax/controls/rotator/mobile-support/fluid-capabilities.

I suggest you take a look at the ImageGallery control to see if it will fit your needs: http://demos.telerik.com/aspnet-ajax/image-gallery/examples/overview/defaultcs.aspx. It also offers templates if you need more complex content: http://demos.telerik.com/aspnet-ajax/image-gallery/examples/functionality/templates/defaultcs.aspx.

Here is a basic example:

<telerik:RadImageGallery runat="server" ID="RadImageGallery1"  ImagesFolderPath="~/images" Width="100%"></telerik:RadImageGallery>

You can use a template, add a data-* attribute  from the data source with the needed info to the clickable element in order to show additional text/controls/popups and know which one it is.

Regards,

Marin Bratanov
Telerik by Progress

[RJ]

100% width not working well when page is inside masterpage.

got 3 images in my rotator, each has a width of 900px. if I set my width to 100%, may page will have a horizontal scroll bar and when you slide it will show all 3 images. I'm guessing my body content page with becomes 2700px.

Any workaround for rotator with masterpage using 100% width?

Thanks in advance!