Image & html extensions


Published: 3/18/2013, Author: Håkan Edling Categories: Tutorials, Piranha, 0 Comments

When you're building page types you can define regions different types, the two most common being Html content and Images. But what if you wan't to attach these kind of content to another entity.

As we always claim that Piranha is an extensible and open framework we'll give a short example on how you can extend two of the standard regions of the framework and apply it to another entity. In this example we'll add html-content and an image to the category as we wish to present them in a nice way on our web page.

The extensions

As we only want to reuse the original regions we simple create two new classes in our App_Code folder for these two extensions. We then just have to inherit the original regions and decorate our new class with an ExtensionAttribute.

[Export(typeof(IExtension))]
[ExportMetadata("InternalId", "CategoryImage")]
[ExportMetadata("Name", "Image")]
[ExportMetadata("Type", ExtensionType.Category)]
[Serializable]
public class CategoryImage : Piranha.Extend.Regions.ImageRegion {}
[Export(typeof(IExtension))]
[ExportMetadata("InternalId", "CategoryDescription")]
[ExportMetadata("Name", "Description")]
[ExportMetadata("Type", ExtensionType.Category)]
[Serializable]
public class CategoryDescription : Piranha.Extend.Regions.HtmlRegion {
// Default constructor.
public CategoryDescription() : base() {}

// Creates a new category description from the given string.
public CategoryDescription(string val) : base(val) {}
}

And that's it, now our new classes will be registered as available extensions for the category entity. For them to show up we of course also need to add two new views in our ~/Areas/Manager/Views/Extensions folder. Again we will try to re-use as much as possible of the original view for the regions.

The image extension view

We start off by creating the file CategoryImage.cshtml in our extensions folder. We'll then specify our model as usual and call the Html.PartialFor command to render the original view. However the original view uses the script jquery.media.dialog.js so we'll include this as well.

@model CategoryImage
<script type="text/javascript"
src="@Url.Content("~/areas/manager/content/js/jquery.media.dialog.js")"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#pnl-image').addClass('content-editor');
    });
</script>
@Html.Partial("ImageRegion")

As you can see we've also added a small javscript-snippet highlighted in bold that adds a class to the container of the extension. This is due to that all regions are rendered inside a container with this class and we want to make sure that the interface is rendered correctly.

The description extension view

Now let's do same for the CategoryDescription. The html-editor also needs two extra css classes to render without any box paddings. We also need to include the partial view that renders the TinyMCE editor. Note that if you add an html-extension to an entity that already uses the html-editor, like pages or posts this should be left out as it is already included.

@model CategoryDescription
<script type="text/javascript">
    $(document).ready(function () {
        $('#pnl-presentation').addClass('content-editor');
        $('#pnl-presentation .inner').addClass('region-body');
    });
</script>
@Html.Partial("~/Areas/Manager/Views/Shared/Partial/TinyMCE.cshtml")
@Html.Partial("HtmlRegion")

With these simple steps we've successfully added an html and image extension to our categories.

Description

blog comments powered by Disqus