How to change renderer for ImageData

Member since: 2007

Hi,

I'm trying to figure out how to change the markup that's rendered for an image. Alloy templates has a renderer registered for the type ImageFile, which is a content type that inherits from ImageData. That renderer tries to render a title and alt attribute, but unfortunately it doesn't work.

The property type is actually ContentReference, so should we register a renderer for that type instead?

This article mentions templates in the heading http://world.episerver.com/Documentation/Items/Developers-Guide/EPiServer-CMS/75/Content/Assets-and-media/Media-types-and-templates/, but nothing in the article. The article says how to write a handler for the BLOB though, but not how to change the markup.

So, how do we do this?

#81852 Feb 27, 2014 18:29
  • Member since: 2009

    It occured to me that you might be using webforms. In that case:

    The ImageControl is used when an image is rendered in an content area. If you need to change the markup for an image property (ContentReference with UiHint set to "Image"), you should be able to create a new user control, and use a template descriptor with the image tag:

     

        [TemplateDescriptor(TagString = "Image")]
        public partial class Image : PropertyControlBase<ContentReference>
        {
    
        }
    }

     

    Much like how it is done with the "StringList"

    #81856 Edited, Feb 27, 2014 19:40
  • Member since: 2007

    Thank you Per!

    But my code is never hit by the debugger, not even in the constructor. The url to the images changes in the markup though, so something is happening. The url becomes the url to the content data and not the actual url that the handler needs to serve the BLOB.

    My code looks like this:

    [TemplateDescriptor(TagString = UIHint.Image)]
    public partial class ImageControl : PropertyControlBase<ContentReference>
    {
        public ImageControl()
        {
            var hitMe = true;
        }
    }

        

     

    #81867 Feb 27, 2014 22:47
  • Member since: 2009

    I'm seeing some inconsistent behavior when trying this out myself. Sometimes it uses the default renderer, and sometimes it uses the one I have defined. However, could you try changing tag/UiHint to "Image2"? That seem to work for me. Not a great solution though

    #81869 Feb 27, 2014 23:11
  • Member since: 2007

    My control is not chosen, even if I change the tag in the control and then in the rendering settings on the property control. But when I do, this is rendered instead:

    <span><a href="/Views/Blocks/Promos/13">13</a></span>

        

    #81870 Feb 27, 2014 23:19
  • Member since: 2007

    Which is not the image url or the url to the image data. The url is to the block where the image property is defined.

    #81871 Feb 27, 2014 23:20
  • Member since: 2007

    Ok, the url thing seems to be a caching issue. Removed the images from the properties and re-added them. Then the urls are correct, but are rendered as a link. And not still able to use my custom control.

    #81872 Edited, Feb 27, 2014 23:28
  • Member since: 2009

    That is strange. This seem to work for me:

    In a standard alloy 7.5 web forms site:

    1. Modifed JumbotronBlock:

            [UIHint("Image2")]
            public virtual ContentReference Image { get; set; }

        

    2. Add new user control "Image.ascx"

     Control Language="C#" AutoEventWireup="true" CodeBehind="Image.ascx.cs" Inherits="EPiServer.Templates.Alloy.Views.Properties.Image" %>
    
    <p>I can render anything here</p>
    

      

    code behind:  

        [TemplateDescriptor(TagString = "Image2")]
        public partial class Image : PropertyControlBase<ContentReference>
        {
    
        }

        

    3. "I can render anything here" is now rendered instead of the image. To render the Image I would have used the CurrentData object in the page load method, or something like that.

     

    #81873 Feb 27, 2014 23:35
  • Member since: 2009

    I think the reason why it wont work with the "image" tag is because of the PropertyImageReferenceControl, (EPiServer.Web.PropertyControls), which has a template descriptor set with the image tag.

    #81875 Feb 27, 2014 23:36
  • Member since: 2007

    Hmm I added the tag to the property control instead, if you add it to the content type, the editor can chose pages and other files as well. But it should pick up the tag from the property control.


    I will do a test with another UIHint in the content model.

    #81877 Feb 27, 2014 23:43
First   1 2   Last