Ascend Lab: Best Kept Add-on Secrets

Here is another piece of follow-up from Ascend. I got to do 2 labs - that seemed fairly well visited! And quite a few inquired about the code and slides. Now, one of them was together with JP, and I'll let him share what needs to be shared - but the other was a session about best kept add-on secrets that I had the luck of hosting together with the famous EMVP Fredrik Haglund (https://world.episerver.com/blogs/Fredrik-Haglund/) - and in this post I'll share what we prepared for the lab.

One of the things I think has always made Episerver platform stand out in the crowd is both it's extensibility - and the wonderful community that takes advantage of this extensibility and builds loads of add-ons for any scenario you can possibly imagine. For this session we had picked 4 of the best add-ons we both like - that still doesn't always seem to be all that used. We pretty much based the lab on a basic Alloy MVC instance with Episerver Find installed and configured - and you should be able to do the same if you follow these steps...

Microsoft has released a bunch of cognitive services that makes state-of-the-art AI easy to use for many different purposes. More than a year ago an add-on appeared on the Episerver Nuget feed that uses the Vision Cognitive Service to enrich image media with metadata.

As with all the add-ons they can be found on the Episerver Nuget feed (nuget.episerver.com). http://nuget.episerver.com/package-details/?packageId=Episerver.Labs.Cognitive

Once you install it, you should follow the instructions in the readme file - including setting the AppSettings to an appropriate Azure instance of the Vision Cognitive Service. A sample service for trying it out is included.

Now, with it installed you can start to enrich your media model by adding properties with attributes.

The suggestion provided in the example is like this:

public class ImageFile : ImageData
    {

        [Vision(VisionType = VisionTypes.Tags)]
        [Display(Order = 305)]
        [UIHint(Global.SiteUIHints.StringsCollection)]
        public virtual IList<string> TagList { get; set; }

        [Vision(VisionType = VisionTypes.Description)]
        public virtual string Description { get; set; }

        [Vision(VisionType = VisionTypes.Text)]
        public virtual string TextRecognized { get; set; }

        [ScaffoldColumn(false)]
        [SmartThumbnail(100, 100)]
        public virtual Blob SmartThumbnail { get; set; }
       
        /// <summary>
        /// Gets or sets the copyright.
        /// </summary>
        /// <value>
        /// The copyright.
        /// </value>
        public virtual string Copyright { get; set; }
    }

This will add Description, text in the image, a tag list and a smart thumbnail as well. The cool thing about the small thumbnail is that it crops the image around what could be considered interesting in the image. After this is configured you can upload an image to the media library and explore the properties. For example, uploading this image will result in these properties:

Learn more here: https://world.episerver.com/blogs/Allan-Thran/Dates/2017/5/new-add-on-in-the-nuget-feed-enrich-your-image-assets-with-azure-cognitive-services/

    [ServiceConfiguration(typeof(IContentQuery)), ServiceConfiguration(typeof(IContentSlice))]
    public class PageSlice : ContentSliceBase<SitePageData>
    {
        public override string Name
        {
            get
            {
                return "Pages";
            }
        }
    }

    [ServiceConfiguration(typeof(IContentQuery)), ServiceConfiguration(typeof(IContentSlice))]
    public class ImageSlice : ContentSliceBase<ImageFile>
    {
        public override string Name
        {
            get
            {
                return "Images";
            }
        }

        protected override ITypeSearch<ImageFile> ApplyTextSearch(ITypeSearch<ImageFile> searchRequest, string searchPhrase)
        {
            return searchRequest.For(searchPhrase).InField(x => x.TagList, 3).InField(x => x.Name, 2).InField(x => x.Description);
        }
        protected override ITypeSearch<ImageFile> Filter(ITypeSearch<ImageFile> searchRequest, ContentQueryParameters parameters)
        {
            return searchRequest.Filter(x => x.Description.Exists());
        }

    }

The end result should be something like this:

Read more here: https://world.episerver.com/articles/Items/re-introducing-powerslice-for-episerver-cms/

When you are building sites that are founded on for instance large content area's where the editors can use their creativity to add blocks and build up the pages - it's pretty useful to put a few restraints in place to ensure they don't go bananas 😃

This add-on does just that. After install it from Nuget (http://nuget.episerver.com/package-details/?packageId=eGandalf.Epi.Validation), you can use a number of new validation attributes with a content area.

For instance you can specify that it should contain exactly 1 JumboTronBlock and a Maximum of 3 TeaserBlocks as I have specified below.

 

   public class StartPage : SitePageData
    {
        [Display(
            GroupName = SystemTabNames.Content,
            Order = 320)]
        [CultureSpecific]
        [ExactCountOfType(1, typeof(JumbotronBlock))]
        [MaximumOfType(3, typeof(TeaserBlock))]
        public virtual ContentArea MainContentArea { get; set; }
}

Read more here: http://egandalf.blogspot.dk/2017/08/now-available-episerver-property.html

There are many, many more awesome add-ons - both from Episerver, our 3'rd party suppliers and the entire developer community surrounding Episerver in the nuget feed. Take your time and explore them! And when you feel ready don't be shy to share your own add-ons there as well.

You can download the slides for the lab here and the solution code here.