Episerver Add-on: Streamline dummy images with generated placeholders
Episerver provides editors and administrators with great digital asset management capabilities. It definitely serves the purpose.. especially if they are in possession of all the required assets at the time content and platform is built. Exactly that issue – a typical chicken egg situation – often proves to be problematic during development of CMS experiences. The issue is a twofold one:
- My project experience has numerous times required me to find dummy (unicorn) images, throughout the development of a project, simply because client assets weren’t ready.
- Development and test environments tend to get bloated with (unicorn) imagery that does not comply with design guidelines such as ratio and size.
These two simple scenarios has lead me to the development of a new Episerver add-on. Meet your new image placeholder assistant.
Fellow.Epi.ImagePlaceholder: Assisting and guiding your need for dummy images
This Episerver add-on provides editors with predefined and customizable image placeholders as part of their existing authoring workflow. It acts as a generator for any dummy images needed while authoring content or developing the platform. By default, it allows you, as a Episerver developer, to register predefined sizes – e.g. tailored to your 225x110px need for card images – or to simply let authors specify the desired proportions.
Usage from a developers standpoint is straight forward. All it takes is registration of placeholder content types according to your need. Below illustration is based on a scenario where two content types has been registered:
- Fixed size placeholder image taking up 400×400 pixels.
- Flexible placeholder image requesting editor to specify proportions
Installation and Usage
You can get the latest version of Fellow.Epi.ImagePlaceholder through Episervers NuGet feed.
Be aware that Fellow.Epi.ImagePlaceholder requires EPiServer.CMS.UI.Core version 126.96.36.199 or higher.
Please use the GitHub project for any issues, questions or other kinds of feedback.
Example 1: flexible placeholder image requesting editor to provide proportions
Example 2: fixed placeholder image