Adapt Video template

A great starting point for creating video banners just like a video editing software, only with code.

Table of content

• Install
• Usage
  • Local development
  • Prepare files for production
  • Files
• Dependencies
• Extracted style
• Publish to Adapt Retail
• License

Install

# Clone repository
git clone https://github.com/AdaptRetail/video-template

# Go to directory
cd video-template

# Install dependencies
npm install 

Usage

All dependencies must be installed before you can start using the template.

This template is using npm, Sass and Webpack to build your files and containing some extra helpers to make things easier for you.

This project is heavily dependent on GreenSock animation framework. Make sure you understand the basic of GSAP before starting to use this template.

Local development

# Open file in default browser (browser-sync) and
# auto refresh browser on file save
npm run watch

You can also display your production on other devices on your local network. Check your terminal for information after running npm run watch.

Prepare files for production

# Compile files to dist/ folder
npm run prod

The npm run prod command is compiling and minifying the css and javascript. All your files will be compiled to the dist/ folder.

Files

All your production files will be found in the src/ folder.

We have provided the files with some content, but this is your files and we don't tell you what you do. This is our approach when we are creating production, and you may add, move and remove files however you want.

All files are thoroughly commented, so if you're in doubt, just read the source.

src/Script/main.js

This project is built on AdaptRetail/animation-framework. You see information about each class on the repository page.

This is the main file for your JavaScript and this is where we initialize your main timeline. What to do from this point is totally up to you.

This file will be compiled down with Webpack using laravel-mix. This gives you some cool opertunities like.

• Up to ECMAScript 6 (ES6) JavaScript syntax
• Import packages through NPM modules
• And more

src/Scripts/Scenes/

This folder is holding all your Scenes. The scenes are handling the logic and animation for each scene in the animation.

src/Scripts/Transitions/

This folder is holding all your Scenes.

The transitions contains the animation between each scene.

src/Style/main.scss

This is the main Sass file. This file is including all the other sass files. Do whatever you want from here.

We have set up some logic to get you started. Browse through the files and see what each file does. If you want to overwrite some variables you can do it in src/Style/Utilities/Variables.scss.

Most of the files are containing variables you can over write in this file. Just add the variable here, and it will be overwritten. Try $google-font-name: "Lobster";

Dependencies

This project is using different dependencies to make it easier to make display banners.

Banner style

Micro frontend framework containing helpers like grid system using flex.

sass-asset-inline

Inline assets like image and fonts in your sass files with simple syntax.

@font-face {
    src: inline-font( 'path/to/your/font.ttf' ); // Include full font

    // Subset font by adding regex as second parameter
    // of each character you want to include
    src: inline-font( 'path/to/your/font.ttf', '[0-9]' );
}

body {
    // Inline image
    background-image: inline-image( 'path/to/your/image.png' );

    // Inline and resize image to width (Kepp aspect ratio)
    background-image: inline-image( 'path/to/your/image.png', "200" );

    // Resize image and ignoring aspect ratio
    background-image: inline-image( 'path/to/your/image.png', "200x400" );

    // Resize image to height and keep aspect ratio
    background-image: inline-image( 'path/to/your/image.png', "_x400" );

    // Underscore works also for height.
    // ("200x_" equals "200" as shown above)
}

All files are included from your root folder.

Adapt Data

Communicate with Adapt Retail productions through our API.

laravel-mix

We are extending laravel-mix with Laravel mix extender to include helpers like the sass-asset-inline

Extracted style

Some of the style of this template has been extracted to another git repository. This is to reuse the elements and components in other productions.

This is a recommendation if you are creating multiple templates for Adapt Retail.

Remove the priceco style from the project by removing @import "../../node_modules/@priceco/style/src/main.scss"; line in src/Style/main.scss.

Publishing to Adapt Retail

1. Log in to your Adapt retail account
2. Click on template section in your left navigation bar
3. Create a new Banner template
4. Set your properties in Details tab
5. Select Files tab
6. Prepare files to Adapt Retail by running npm run prod in your terminal.
7. Drag dist/ad.js and dist/ad.css to the dropzone (Drop files or click to upload) in Adapt
8. And you are done!

License

Read the documentation for @adapt-retail/animation-framework.

The code provided in this template is available for usage by all clients of Adapt Retail.