Geta Optimizely ContentTypeIcons

Description

This package consists of an override to the built in "ImageUrlAttribute" that is used to specify preview images for the different content types in your Optimizely project. The only difference is that with this attribute, the images are generated using a configured background color, foreground color and a reference to a FontAwesome icon. The same configured icon can also replace the tree icon in the page tree (feature needs to be explicitly turned on using configuration).

Screenshot of package

Features

Generates preview images for the different content types in your Optimizely project
Replace tree icons with custom icons for content types
Support for using Font Awesome Free 5 and 4 icons
Supports customized foreground and background color on generated images
Loading custom fonts

How to get started?

Install NuGet package (use Optimizely Nuget)
Install-Package Geta.Optimizely.ContentTypeIcons

Please notice that this attribute cannot be used in conjunction with any other attributes inheriting from ImageUrlAttribute (for example SiteImageUrl or basic ImageUrl-attributes) on the same contenttype. All existing ImageUrl-attributes on the contenttype where you want to use this, needs to be removed.

Details

Using the built in ImageUrlAttribute, you specify the images to be presented like this:

[ImageUrlAttribute("~/images/contenttypes/articlepage.png")]

Using this package you can specify it like this instead:

[ContentTypeIcon(FontAwesome5Brands.Github)]

There are a couple different enum types available: FontAwesome5Brands, FontAwesome5Regular and FontAwesome5Solid for the different Font Awesome 5 styles. There is also the FontAwesome enum for the Font Awesome version 4 icons.

Or with overriddes for specifying different colors and size:

[ContentTypeIcon(FontAwesome5Brands.Github,"#000000","#ffffff",40)]

The defaults if nothing else is specified is of course the Geta colors as seen in the screenshot.

The images that gets generated are cached in [appDataPath]\thumb_cache\

Configuration

For the ConentTypeIcons to work, you have to call AddContentTypeIcons extension method in Startup.ConfigureServices method. This method provides a configuration of default values and allows to enable tree icon feature. Below is a code with all possible configuration options:

services.AddContentTypeIcons(x =>
{
    x.EnableTreeIcons = true;
    x.ForegroundColor = "#ffffff";
    x.BackgroundColor = "#02423F";
    x.FontSize = 40;
    x.CachePath = "[appDataPath]\\thumb_cache\\";
    x.CustomFontPath = "[appDataPath]\\fonts\\";
});

It is also possible to configure the application in appsettings.json file. A configuration from the appsettings.json will override configuration configured in Startup. Below is an appsettings.json configuration example. In the example, the tree icon feature is enabled even if it would be false in the Startup. Although, it will not override other configuration properties as those are not configured in the appsettings.json.

"Geta": {
    "ContentTypeIcons": {
        "EnableTreeIcons":  true
    }
}

Next, initialize Content Type Icons by calling UseContentTypeIcons in the Configure method.

app.UseContentTypeIcons();

Tree icons

Screenshot of package

You can enable or disable the tree icons by setting EnableTreeIcons value.

By default the same icons will be used in the content tree if you have defined an icon using the ContentTypeIcon-attribute.

[ContentTypeIcon(FontAwesome5Brands.Github)]

You can however disable this for specific content types using the ignore property on the TreeIcon-attribute on the content type, like this:

[ContentType(DisplayName = "Blog List Page")]
[ContentTypeIcon(FontAwesome5Solid.Blog)]
[TreeIcon(Ignore = true)]
public class BlogListPage : FoundationPageData
{
    ...
}

There is also support for overriding the icon defined in the ContentTypeIcon-attribute like this:

[ContentType(DisplayName = "Blog List Page")]
[ContentTypeIcon(FontAwesome5Solid.Blog)]
[TreeIcon(FontAwesome5Solid.CheckDouble)]
public class BlogListPage : FoundationPageData
{
    ...
}

or with the optional rotation (FlipVertical, FlipHorizontal, Rotate90, Rotate180, Rotate270):

[TreeIcon(FontAwesome5Solid.CheckDouble, Rotations.Rotate90)]

Fonts

You can configure default foreground and background colors and font size by setting ForegroundColor, BackgroundColor and FontSize values.

Loading custom fonts

To load custom icon fonts, you can place the font you want to use in the default folder [appDataPath]\fonts\. This can also be customized using configuration property - CustomFontPath.

You also have to make sure to set the properties of the custom font to "Copy to output directory"

Then specify the font and the character reference from the specific font to use in the ContentTypeIcon attribute constructor like this.

[ContentTypeIcon("fontello.ttf",0xe801)]

If you are unsure about what value to enter as a character reference

Usually when you download an icon font, you also get an accompanying css file for with character references, which can look like this:

.icofont-brand-adidas:before
{
  content: "\e897";
}

Take the content reference from the css (\e897) and replace the \ with 0x so the end result is 0xe897 instead of "\e897" and use that value for referencing the correct character in the attribute like this:

[ContentTypeIcon("customfont.ttf",0xe897)]

Caching

All generated icon images are stored in the cache folder and then served instead of regenerating those. A default cache folder can be changed by configuring the CachePath property.