Allows creating a custom input field for adding lottie animations seamlessly via LottieFiles public animation repository.
A plugin for Strapi CMS, that allows creating a custom input field for adding lottie animations seamlessly via LottieFiles public animation repository.
features
installation
At the root of your Strapi project, run the following commands to add the plugin
1npm install strapi-plugin-lottie
2# or
3yarn add strapi-plugin-lottie
Start your Strapi application with in development mode
1npm run develop
2# or
3yarn develop
configuration
To start using the plugin, enable the plugin in strapi configuration.
1./config/plugins.ts
2
3export default {
4 // ...
5 "strapi-plugin-lottie": {
6 enabled: true
7 },
8 // ...
9}
Also, configure the strapi::security
middleware by adding the directives below to allow the plugin to load required assets.
1./config/middleware.ts
2
3export default [
4 // ...
5 {
6 name: "strapi::security",
7 config: {
8 contentSecurityPolicy: {
9 useDefaults: true,
10 directives: {
11 "connect-src": ["'self'", "https:"],
12 "img-src": [
13 "'self'",
14 "data:",
15 "blob:",
16 "market-assets.strapi.io",
17 "*.lottiefiles.com",
18 ],
19 upgradeInsecureRequests: null,
20 },
21 },
22 }
23 },
24 // ...
25];
usage
Content-Type Builder
and create a new collection type. In the field selection dialogue, navigate to custom
tab. Select Lottie
fieldCustom field
Content Manager
, select the collection type that was created. Click the Create new entry
Lottie Field
, to open the animation browser modal.api
Lottie field data can be consumed via both REST and GraphQL APIs provided by Strapi CMS.
In both apis, the returned field data has the following structure
1{
2 "bgColor": "#fff",
3 "gifUrl": "https://assets1.lottiefiles.com/render/lhu59gtz.gif",
4 "imageUrl": "https://assets3.lottiefiles.com/render/lhu59gtz.png",
5 "lottieUrl": "https://assets9.lottiefiles.com/dotlotties/dlf10_rrHcSPZWAB.lottie",
6 "name": "Wave Form",
7 "createdBy": {
8 "avatarUrl": "https://lh3.googleusercontent.com/a/AGNmyxburVBP66UgfPD1D-I7l1wIwJmc1vVKOiGHXfrM=s96-c",
9 "firstName": "Juan"
10 }
11 }
npm install strapi-plugin-lottie
Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.