LottieFiles
Allows creating a custom input field for adding lottie animations seamlessly via LottieFiles public animation repository.
LottieFiles plugin for Strapi
A plugin for Strapi CMS, that allows creating a custom input field for adding lottie animations seamlessly via LottieFiles public animation repository.
Table of contents
- ✨ Features
- ⏳ Installation
- 🔧 Configuration
- 👨💻 Usage
- 🕸️ API
✨ features
- Custom field creation in Strapi models
- Browse LottieFiles public animation repository based on:
- Keyword based search
- Animation metadata, with creator info
⏳ 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
- Goto
Content-Type Builder
and create a new collection type. In the field selection dialogue, navigate tocustom
tab. SelectLottie
field - Give the new field a name and confirm. The new field should be visible in the collection's field list, with type:
Custom field
- Goto
Content Manager
, select the collection type that was created. Click theCreate new entry
- Click the
Lottie Field
, to open the animation browser modal. - Once selected, the animation preview can be seen in the Lottie field as well as collection list view after saving the entry
🕸️ 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 }
Install now
npm install strapi-plugin-lottie
Create your own plugin
Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.