{"id":23050835,"url":"https://github.com/geta/geta-optimizely-contenttypeicons","last_synced_at":"2026-04-02T00:53:27.612Z","repository":{"id":43013476,"uuid":"361759119","full_name":"Geta/geta-optimizely-contenttypeicons","owner":"Geta","description":"Override to the built in \"ImageUrlAttribute\" that is used to specify preview images for the different contenttypes in your Optimizely project.","archived":false,"fork":false,"pushed_at":"2023-08-29T12:25:08.000Z","size":155488,"stargazers_count":2,"open_issues_count":6,"forks_count":5,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-03T06:11:08.666Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Geta.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-26T13:24:28.000Z","updated_at":"2023-11-27T12:29:00.000Z","dependencies_parsed_at":"2022-08-27T12:41:12.331Z","dependency_job_id":null,"html_url":"https://github.com/Geta/geta-optimizely-contenttypeicons","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/Geta/geta-optimizely-contenttypeicons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geta%2Fgeta-optimizely-contenttypeicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geta%2Fgeta-optimizely-contenttypeicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geta%2Fgeta-optimizely-contenttypeicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geta%2Fgeta-optimizely-contenttypeicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Geta","download_url":"https://codeload.github.com/Geta/geta-optimizely-contenttypeicons/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geta%2Fgeta-optimizely-contenttypeicons/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265500631,"owners_count":23777521,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-15T23:38:50.121Z","updated_at":"2026-04-02T00:53:27.604Z","avatar_url":"https://github.com/Geta.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Geta Optimizely ContentTypeIcons\n\n[![Build](https://github.com/Geta/geta-optimizely-contenttypeicons/actions/workflows/build.yml/badge.svg)](https://github.com/Geta/geta-optimizely-contenttypeicons/actions/workflows/build.yml)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Geta_geta-optimizely-contenttypeicons\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Geta_geta-optimizely-contenttypeicons)\n[![Platform](https://img.shields.io/badge/Platform-.NET%208-blue.svg?style=flat)](https://docs.microsoft.com/en-us/dotnet/)\n[![Platform](https://img.shields.io/badge/Optimizely-%2012-orange.svg?style=flat)](http://world.episerver.com/cms/)\n\n## Description\nThis 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).\n\n![Screenshot of package](/images/fontthumbnail_overview.jpg)\n\n## Features\n* Generates preview images for the different content types in your Optimizely project\n* Replace tree icons with custom icons for content types\n* Support for using Font Awesome Free 5 and 4 icons\n* Supports customized foreground and background color on generated images\n* Loading custom fonts\n\n## How to get started?\n* Install NuGet package (use [Optimizely Nuget](http://nuget.episerver.com))\n* ``Install-Package Geta.Optimizely.ContentTypeIcons``\n\n_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._\n\n## Details\nUsing the built in ImageUrlAttribute, you specify the images to be presented like this:\n```cs\n[ImageUrlAttribute(\"~/images/contenttypes/articlepage.png\")]\n```\n\nUsing this package you can specify it like this instead:\n```cs\n[ContentTypeIcon(FontAwesome5Brands.Github)]\n```\nThere 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.\n\nOr with overriddes for specifying different colors and size:\n```cs\n[ContentTypeIcon(FontAwesome5Brands.Github,\"#000000\",\"#ffffff\",40)]\n```\nThe defaults if nothing else is specified is of course the Geta colors as seen in the screenshot.\n\nThe images that gets generated are cached in [appDataPath]\\thumb_cache\\\n\n## Configuration\n\nFor 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:\n\n```cs\nservices.AddContentTypeIcons(x =\u003e\n{\n    x.EnableTreeIcons = true;\n    x.ForegroundColor = \"#ffffff\";\n    x.BackgroundColor = \"#02423F\";\n    x.FontSize = 40;\n    x.CachePath = \"[appDataPath]\\\\thumb_cache\\\\\";\n    x.CustomFontPath = \"[appDataPath]\\\\fonts\\\\\";\n});\n```\n\nIt 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`.\n\n```json\n\"Geta\": {\n    \"ContentTypeIcons\": {\n        \"EnableTreeIcons\":  true\n    }\n}\n```\n\nNext, initialize Content Type Icons by calling `UseContentTypeIcons` in the Configure method.\n\n```json\napp.UseContentTypeIcons();\n```\n\n### Tree icons\n\n![Screenshot of package](/images/treeicon_overview.jpg)\n\nYou can enable or disable the tree icons by setting `EnableTreeIcons` value.\n\nBy default the same icons will be used in the content tree if you have defined an icon using the ContentTypeIcon-attribute.\n```cs\n[ContentTypeIcon(FontAwesome5Brands.Github)]\n```\n\nYou can however disable this for specific content types using the ignore property on the TreeIcon-attribute on the content type, like this:\n\n```cs\n[ContentType(DisplayName = \"Blog List Page\")]\n[ContentTypeIcon(FontAwesome5Solid.Blog)]\n[TreeIcon(Ignore = true)]\npublic class BlogListPage : FoundationPageData\n{\n    ...\n}\n```\n\nThere is also support for overriding the icon defined in the ContentTypeIcon-attribute like this:\n```cs\n[ContentType(DisplayName = \"Blog List Page\")]\n[ContentTypeIcon(FontAwesome5Solid.Blog)]\n[TreeIcon(FontAwesome5Solid.CheckDouble)]\npublic class BlogListPage : FoundationPageData\n{\n    ...\n}\n```\n\nor with the optional rotation (FlipVertical, FlipHorizontal, Rotate90, Rotate180, Rotate270):\n```cs\n[TreeIcon(FontAwesome5Solid.CheckDouble, Rotations.Rotate90)]\n```\n\n### Fonts\n\nYou can configure default foreground and background colors and font size by setting `ForegroundColor`, `BackgroundColor` and `FontSize` values.\n\n### Loading custom fonts\n\nTo 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`.\n\n_You also have to make sure to set the properties of the custom font to \"Copy to output directory\"_\n\nThen specify the font and the character reference from the specific font to use in the `ContentTypeIcon` attribute constructor like this.\n\n```cs\n[ContentTypeIcon(\"fontello.ttf\",0xe801)]\n```\n\n**If you are unsure about what value to enter as a character reference**\n\nUsually when you download an icon font, you also get an accompanying css file for with character references, which can look like this:\n```css\n.icofont-brand-adidas:before\n{\n  content: \"\\e897\";\n}\n```\n\nTake 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:\n\n```cs\n[ContentTypeIcon(\"customfont.ttf\",0xe897)]\n```\n\n### Authorization\n\nThe icon endpoint is protected by a named authorization policy (`ContentTypeIconsPolicy`). By default the policy allows access to the roles `Administrators`, `CmsAdmins`, `CmsEditors`, `WebAdmins`, `WebEditors` and `ThumbnailGroup`.\n\nYou can override the policy by passing a second lambda to `AddContentTypeIcons`:\n\n```cs\nservices.AddContentTypeIcons(\n    x =\u003e\n    {\n        x.EnableTreeIcons = true;\n        // ... other options\n    },\n    policy =\u003e policy.RequireRole(\"MyCustomRole\", \"Administrators\")\n);\n```\n\n### Caching\n\nAll 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.\n\n## Changelog\n\n[Changelog](CHANGELOG.md)\n\n\n## More info\nhttps://getadigital.com/blog/contenttype-preview-images-w.-icons/\n\nhttps://getadigital.com/blog/new-version-of-fontthumbnail/\n\n## Package maintainer\nhttps://github.com/degborta\n\n## Contributors\nhttps://github.com/johanbenschop\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeta%2Fgeta-optimizely-contenttypeicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeta%2Fgeta-optimizely-contenttypeicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeta%2Fgeta-optimizely-contenttypeicons/lists"}