{"id":23050862,"url":"https://github.com/geta/epi.fontthumbnail","last_synced_at":"2025-08-08T05:10:48.013Z","repository":{"id":16067609,"uuid":"78886753","full_name":"Geta/Epi.FontThumbnail","owner":"Geta","description":"Override to the built in \"ImageUrlAttribute\" that is used to specify preview images for the different contenttypes in your Episerver project. ","archived":false,"fork":false,"pushed_at":"2022-12-08T00:58:36.000Z","size":4749,"stargazers_count":10,"open_issues_count":6,"forks_count":7,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-03T06:11:08.767Z","etag":null,"topics":["episerver","episerver-cms","fontawesome"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","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":"2017-01-13T21:08:45.000Z","updated_at":"2021-07-19T08:47:44.000Z","dependencies_parsed_at":"2023-01-11T20:24:27.418Z","dependency_job_id":null,"html_url":"https://github.com/Geta/Epi.FontThumbnail","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/Geta/Epi.FontThumbnail","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geta%2FEpi.FontThumbnail","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geta%2FEpi.FontThumbnail/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geta%2FEpi.FontThumbnail/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geta%2FEpi.FontThumbnail/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Geta","download_url":"https://codeload.github.com/Geta/Epi.FontThumbnail/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geta%2FEpi.FontThumbnail/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269366853,"owners_count":24405250,"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","status":"online","status_checked_at":"2025-08-08T02:00:09.200Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["episerver","episerver-cms","fontawesome"],"created_at":"2024-12-15T23:38:57.944Z","updated_at":"2025-08-08T05:10:47.984Z","avatar_url":"https://github.com/Geta.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Geta.Epi.FontThumbnail\n\n![](http://tc.geta.no/app/rest/builds/buildType:(id:GetaPackages_EPiFontThumbnail_00ci),branch:master/statusIcon)\n\n## Description\n**For Episerver/Optimizely 12+ see: https://github.com/Geta/geta-optimizely-contenttypeicons**\n\nThis package basically consists of an override to the built in \"ImageUrlAttribute\" that is used to specify preview images for the different contenttypes in your Episerver 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. Since version [1.1.5] another feature was introduced where the same configured icon will also replace the treeicon in the page tree (feature needs to be explicitly turned on using configuration). Supports Episerver 11.x\n\n![Screenshot of package](/docs/fontthumbnail_overview.jpg)\n\n## Features\n* Generates preview images for the different contenttypes in your Episerver 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 [EPiServer Nuget](http://nuget.episerver.com))\n* ``Install-Package Geta.Epi.FontThumbnail``\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[ThumbnailIcon(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[ThumbnailIcon(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 is cached in [appDataPath]\\thumb_cache\\\n\nUsing the following configuration you can change the default colors:\n```xml\n\u003cappSettings\u003e\n    \u003cadd key=\"FontThumbnail.BackgroundColor\" value=\"#000000\" /\u003e\n    \u003cadd key=\"FontThumbnail.ForegroundColor\" value=\"#ffffff\" /\u003e\n    \u003cadd key=\"FontThumbnail.FontSize\" value=\"40\" /\u003e\n\u003c/appSettings\u003e\n```\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 appSettings.\n```xml\n\u003cappSettings\u003e\n    \u003cadd key=\"FontThumbnail.CustomFontPath\" value=\"App_Data\\fonts\\\" /\u003e\n\u003c/appSettings\u003e\n```\n_The above example shows how you should configure the path if you want to add the specific font to your solution in a folder in your project, for example the App_Data folder. You also have to make sure to set the properties of the font to \"Copy to output directory\"_\n\nThen specify the font and the character reference from the specific font to use in the ThumbnailIcon constructor like this.\n\n```cs\n[ThumbnailIcon(\"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[ThumbnailIcon(\"customfont.ttf\",0xe897)]\n```\n\n## Tree icon feature\n\n![Screenshot of package](/docs/treeicon_overview.jpg)\n\nTo enable the feature to use custom icons in the content tree you have to add this configuration:\n```xml\n\u003cappSettings\u003e\n    \u003cadd key=\"FontThumbnail.EnableTreeIcons\" value=\"true\"/\u003e\n\u003c/appSettings\u003e\n```\n\nBy default the same icons will be used in the content tree if you have defined an icon using the ThumbnailIcon-attribute.\n```cs\n[ThumbnailIcon(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[ThumbnailIcon(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 ThumbnailIcon-attribute like this:\n```cs\n[ContentType(DisplayName = \"Blog List Page\")]\n[ThumbnailIcon(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## 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%2Fepi.fontthumbnail","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeta%2Fepi.fontthumbnail","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeta%2Fepi.fontthumbnail/lists"}