At Studio123, we're constantly looking for cutting edge technologies to help us build better websites and applications. Over the last few years we've started using Strapi as our go-to CMS for building modern headless applications. One of the best features of Strapi is its extensibility. Developers can easily expand Strapi's functionality by creating plugins that add new features to the CMS.
This is why we decided to use it for our new website. Our previous site used Gatsby to build the front-end, but we wanted to try something new. We decided to keep Strapi as our CMS and use Next.js to build the front-end instead. The switch to Next.js meant we lost this cool feature we really liked that generated colour palettes as a load effect for images. This was included in Gatsby and just worked out of the box. We were missing that feature when reviewing the site pre-launch, so we decided to build a plugin to add this functionality to Strapi.
What is open source?
Open source is a term commonly associated with software that is freely available to the public. Anyone can use, modify, and distribute open source software. Open source software is developed by a community of developers who work together to create and improve the software. Open source software is often free to use, but some open source software is sold as a service.
A lot of software that our development team uses every day is open source, and for this reason we wanted to contribute to the open source community. We hope that our plugin will be useful to other developers and that it will help them build better applications.
What does this plugin do?
The strapi-plugin-image-colour-palette plugin is a Strapi plugin that automatically generates a colour palette for images uploaded to Strapi. The plugin uses GraphicsMagick to extract the dominant colours from images and generate a colour palette based on those colours. The data is then stored in the Strapi database, making it easy for developers to access and use the colour data on the front-end of their applications.
What are the benefits of using this plugin?
This plugin is particularly useful for developers who are building applications that require colour data for images. For example:
- Allow users to filter products in an e-commerce application by colour
- Show a colour fill as a placeholder for images that are still loading (this is how we’re using it on studio123.ca)
- Use colour data to accent the design of a website
What are the installation steps?
Installing and using the plugin is easy. The plugin can be installed using yarn (or npm) using the following command:
yarn add @studio123/strapi-plugin-image-color-palettePlease see the plugin's Github repository for more detailed information on how to activate and set up the plugin.
The future of open source at Studio123
We're excited to be contributing to the Strapi community and we hope that this plugin will be useful to other developers. We're also looking forward to contributing more to the open source community in the future.
