Add CSS class to Image inserted in Content Block

Dec 22, 2016
Knowledge

Title

URL Name

add-css-class-to-image-inserted-in-content-block

Article Number

000182262

Environment

Product: Sitefinity Version: 5.x, 6.x, 7.x, 8.x, 9.x OS: All supported OS versions Database: All supported Microsoft SQL Server versions

Question/Problem Description

How to add a CSS class to an image inserted in a Content Block when the Original Size option is selected.

Steps to Reproduce

Clarifying Information

Error Message

Defect Number

Enhancement Number

Cause

Resolution

1. Create a CustomMediaContentManagerDialog class and inherit the default MediaContentManagerDialog. Add a reference to a custom script file:

using System.Collections.Generic;
using System.Web.UI;
using Telerik.Sitefinity.Configuration;
using Telerik.Sitefinity.Web.UI;

namespace SitefinityWebApp
{
public class CustomMediaContentManagerDialog : MediaContentManagerDialog
{
public override IEnumerable<ScriptReference> GetScriptReferences()
{
var scripts = base.GetScriptReferences() as List<ScriptReference>;
scripts.Add(new ScriptReference("~/CustomMediaContentManagerDialog.js"));

return scripts;
}
}
}

2. Create the custom script and add the CSS class when Original Size option is selected:

Type.registerNamespace("SitefinityWebApp");

SitefinityWebApp.CustomMediaContentManagerDialog = function (element) {
SitefinityWebApp.CustomMediaContentManagerDialog.initializeBase(this, [element]);
}

SitefinityWebApp.CustomMediaContentManagerDialog.prototype = {
_getOuterHtml: function (element) {
if (element) {
this.setWidthHeight(element);
var outerHtml = $telerik.getOuterHtml(element);
return outerHtml;
}
return "";
},

setWidthHeight: function (element) {
if (element.outerHTML.indexOf('data-displaymode="Original"') >= 0) {
jQuery(element).addClass('TestClass');
}
}
}

SitefinityWebApp.CustomMediaContentManagerDialog.registerClass('SitefinityWebApp.CustomMediaContentManagerDialog', Telerik.Sitefinity.Web.UI.MediaContentManagerDialog);

3. Register the custom dialog in the Global.asax file:

protected void Application_Start(object sender, EventArgs e) {
Bootstrapper.Initialized += this.Bootstrapper_Initialized;
}

private void Bootstrapper_Initialized(object sender, Telerik.Sitefinity.Data.ExecutedEventArgs e) {
if (e.CommandName == "Bootstrapped") {
ObjectFactory.Container.RegisterType(typeof(DialogBase), typeof(CustomMediaContentManagerDialog), typeof(MediaContentManagerDialog).Name, new HttpRequestLifetimeManager());
}
}

Workaround

Notes

Keyword Phrase

Last Modified Date

12/22/2016 8:44 AM

Add CSS class to Image inserted in Content Block

Files(0)

Was this article helpful?

Was this article helpful?

Add CSS class to Image inserted in Content Block

Information

Related Articles