Using Ektron's Adaptive Image Resizing with the Framework API

To utilize Ektron's responsive web design (RWD) capabilities the bare minimum steps involve enabling adaptive imaging in the workarea settings and using a content block server control. If you want to use the Framework API with RWD, a few additional steps will be required. Here are those steps.

1) Add a script tag to the header pointing to the Jquery picture plugin. You can either use the path below(applicable to 9sp2, may differ depending on version) or point it to your own path where you have stashed the jQuery plugin. The plugin can be obtained here: http://www.jquerypicture.com/.



2) Add an additional script tag, still within the header, which calls Ektron's RWD code. This essentially connects Ektron to the plugin.

    

3) On the code-behind, use Ektron's JS registration method in the page load.

Ektron.Cms.Framework.UI.Packages.EktronCoreJS.RegisterJS(this);

4)Just after that use the framework API to put the content with the image on the page.

        Ektron.Cms.Framework.Content.ContentManager cmanager = new ContentManager();
        Ektron.Cms.ContentData cdata = cmanager.GetItem(yourContentID);
        // Populates the literal control
        mycontent.Text = cdata.Html;

When it's all said it done you should have something like the below code. Please note you may need to modify your code to make this work with your site.

sample.aspx file



    Adaptive Image Example with Framework API
   
    


   

       
   



sample.aspx.cs file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ektron.Cms.Framework.Content;
using Ektron.Cms;
using Microsoft.VisualBasic;



public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Ektron.Cms.Framework.UI.Packages.EktronCoreJS.RegisterJS(this);
        Ektron.Cms.Framework.Content.ContentManager cmanager = new ContentManager();
        Ektron.Cms.ContentData cdata = cmanager.GetItem(41);
        mycontent.Text = cdata.Html;
    }
}