Vulnerability in EPiServer.Forms

Try our conversational search powered by Generative AI!

Per Magne Skuseth
Sep 23, 2015
  6889
(6 votes)

Thumbnails for blocks!

Can blocks have thumbnails in the assets pane in the same way as images do? I got this question from someone who needed just this. They had lots and lots of blocks and wanted to ease the navigation for their editors, and most of their blocks already had some sort of image property.
The answer? Yes! And here’s how you could do it:

Start by creating a simple interface that contains a property of type ContentRefrence. This will be used as a pointer to the image that will be used as a thumbnail.

public interface IHaveThumbnail
{
    ContentReference ThumbnailReference { get; }
}

 

Implement the interface on your block type. It should look something like this:

public class TeaserBlock : SiteBlockData , IHaveThumbnail
{
    public virtual string Heading { get; set; }
 
    [UIHint(UIHint.Image)]
    public virtual ContentReference Image { get; set; }
 
    public virtual ContentReference ThumbnailReference
    {
        get { return Image; }
    }
}

 

In order use the new thumbnail property, the model that is being created for the blocks component in the assets pane needs to be modified to include the new thumbnail property. This can be done by creating a custom implmentation of IModelTransform. TransformInstance will create the actual model - notice that base.TransformInstance is invoked first. If the current target implements IHaveThumbnail, target.ThumbnailUrl will be populated.

[ServiceConfiguration(typeof(IModelTransform), Lifecycle = ServiceInstanceScope.Singleton)]
public class ThumbnailModelTransform : StructureStoreModelTransform
{
    private readonly IContentLoader _contentLoader;
    public ThumbnailModelTransform(IContentRepository contentRepository, IContentQueryHelper contentQueryHelper,
        IContentProviderManager contentProviderManager, ILanguageBranchRepository languageBranchRepository,
        IContentLanguageSettingsHandler contentLanguageSettingsHandler, SiteDefinitionRepository siteDefinitionRepository,
        IContentLoader contentLoader) :
        base(contentRepository, contentQueryHelper, contentProviderManager, languageBranchRepository, contentLanguageSettingsHandler, siteDefinitionRepository)
    {
        _contentLoader = contentLoader;
    }
 
    public override void TransformInstance(IContent source, StructureStoreContentDataModel target, IModelTransformContext context)
    {
        base.TransformInstance(source, target, context);
        var contentWithThumbnail = source as IHaveThumbnail;
        if (contentWithThumbnail != null && contentWithThumbnail.ThumbnailReference != null 
            && contentWithThumbnail.ThumbnailReference != ContentReference.EmptyReference)
        {
            IContent imageContent;
            if (_contentLoader.TryGet(contentWithThumbnail.ThumbnailReference, out imageContent))
            {
                var urlBuilder = new UrlBuilder(imageContent.PreviewUrl());
                target.ThumbnailUrl = string.Format("{0}/{1}", urlBuilder.Path, "thumbnail");
            }
        }
    }
}

 

Make sure that ThumbnailModelTransform is being put to use by swapping out the default IModelTransform.

container.For<IModelTransform>().Use<ThumbnailModelTransform>();

 

With the ThumbnailModelTransform in place, thumbnail images will now be rendered in the block component in assets pane. However, a little bit of styling is needed to make it look nice and tidy.

.epi-blockList .dgrid-row {
        height: 36px;
}
 
.epi-blockList .dgrid-row img {
        margin-right: 2px;
        height: 36px;
}
.epi-blockList .dgrid-row span, .epi-blockList .dgrid-row div {
        margin-top: 10px;
}
.epi-blockList .dgrid-row .epi-iconObjectSharedBlock {
        margin-right: 8px;
        margin-left: 8px;
}

The css file is being referenced in the clientResources section of module.config:
<add name="epi-cms.widgets.base" path="Styles/Styles.css" resourceType="Style"/>

 

Final result - notice how the teaser blocks now have thumbnails:

 dat block thumbnailz

Sep 23, 2015

Comments

Sep 23, 2015 10:30 PM

Nice!

Arild Henrichsen
Arild Henrichsen Sep 24, 2015 07:11 AM

Great usability improvement!

Mads Storm Hansen
Mads Storm Hansen Sep 26, 2015 10:24 AM

Great improvement.

Should I add a new "Module", to get the CSS injected in Edit mode ?

Per Magne Skuseth
Per Magne Skuseth Sep 28, 2015 08:13 AM

@Mads, you should already have a module.config in your project. Add the css reference under the section. Check out how it's done in Alloy if you are not sure :-)

Please login to comment.
Latest blogs
Optimizely DXP - Leader in Forrester Wave Q4 2023

There are many reasons why its nominated as leader including below but not limited to: Developers friendly - devs and architect love to implement i...

Yagnik Jadav | Dec 11, 2023 | Syndicated blog

Live on Optimizely CMS 12 and .NET 8

"Better late than never" is a fitting saying here. We've finally gotten around to updating the CodeArt.dk website to Optimizely CMS 12 and .NET 8!

Allan Thraen | Dec 10, 2023 | Syndicated blog

Date property editor

The Optimizely CMS has built-in DateTime property. When editing, the Editor selects both the date and the time. Sometimes we would like to configur...

Grzegorz Wiecheć | Dec 9, 2023 | Syndicated blog

Update related content

In this article, I will show simple code that allow to replace linked content with other content selected by the Editor. When deleting content whos...

Grzegorz Wiecheć | Dec 8, 2023 | Syndicated blog