Configuration files
By default the .richmediarc file(s) and .sharedrc file are the configuration files of your project. The .richmediarc file gets generated in the root directory of your creative, i.e. /src/300x250, when you start a new project. Connected to the .richmediarc file is a global parent configuration file .sharedrc, which you can find in the shared folder. Webpack grabs the values from these files and hardcodes them into the compiled creative when you preview or build your creatives.
Live reload
The dev preview server supports live reloading of the data. If you make updates to the .richmediarc, you will see the changes being applied in the browser.
Inheritance
Our system supports inheritance of values, by providing a ‘parent’ file from which to inherit all the values defined in that file. The ‘child’ file can then overwrite only the needed values, thereby completely eliminating any overlap between the parent and child files. For example, you can have a .richmediarc_fr > inheriting .richmediarc and .richmediarc > inheriting .sharedrc. This method is very useful and scalable, should the need arise to add even more languages or versions.
info
Each creative requires at least one .richmediarc file. Also file paths defined in the .richmediarc are always relative to the .richmediarc itself. You can create/combine as much as config files as you like, to share data and minimize the amount of files and duplicate data.
.richmediarc
The .richmediarc config file contains all size (i.e. 300x250) and version (i.e ‘french’) specific data.
{
"parent": "../shared/.sharedrc", // optional: relative path from this config to the parent config"
"settings": {
"bundleName": "${content.type}_${settings.size.width}x${settings.size.height}",
"entry": {
"js": "./script/main.js", // required: points to the starting js file.
"html": "./index.hbs" // required: points to the main html or handlebars file
},
"size": {
"width": 300, // required: width of richmedia unit
"height": 600 // required: height of richmedia unit
}
},
"content": { // optional: can put anything in here.
}
}
.sharedrc
The .sharedrc contains the overall data, such as for example, defining the logo file that is used in all the creatives.
{
"settings": {
"browserSupport": ["> 1%", "not ie 11"], // optional: remove 'not ie 11' from the list if you want to support it.
"optimizations": {
"css": false, // by default is enabled
"image": false, // by default is enabled
"js": false, // by default is enabled
"html": false // by default is enabled
},
"useOriginalFileNames": false, // optional: use original file names without unique ideas generated by webpack
"fonts": [ // optional: defining a subset for a font*
{
...
}
},
"content": { // optional: can put anything in here. This content will be shared throughout all creatives
"bgcolor": "#FF0000",
"logo": "./img/logo.png" // optional: will be picked up by webpack and png minified.
}
}
tip
*Check this page for more info on font-subsetting.
Basic .richmediarc concepts
Below are some guides on how you can use these values in your creative.
Using .richmediarc values in regular HTML
In your index.html or index.hbs, you can retrieve .richmediarc values using the data-bind attribute on HTML elements. This is
made possible by the dataBind function which is imported by ./js/Banner.js.
For example:
"content": {
...
"cta": "Click here!"
}
<body>
<div class="cta" data-bind="text: cta"></div>
</body>
"content": {
...
"bgImage": "../shared/images/background_300x250.jpg"
...
}
<body>
<img class="background-image" data-bind="src: content.bgImage"></div>
</body>
Using .richmediarc values in Handlebars
If you have chosen handlebars as your html file you can use handlebars notation to access the richmediarc data. For more details see this page.
Using .richmediarc values in CSS
Everything you put in the .richmediarc is accessible in css.
So the display-dev-server (webpack) will add all the data from the config to the css through css vars.
How would you access them? Well like this.
var(--{node}-{childNode}-{childNode})
For example:
"content": {
...
"bgcolor": "#FFFFFF"
...
}
body {
background-color: var(--content-bgcolor);
}
"settings": {
"size": {
"width": 300,
"height": 250
}
}
.banner {
width: var(--settings-size-width)px;
height: var(--settings-size-height)px;
}
Using .richmediarc values in javascript
The main javascript file (conveniently named ./js/main.js) imports the .richmediarc files as follows and passes this object into the Banner constructor.
import Banner from "./Banner";
import Animation from "./Animation";
// config will contain the final .richmediarc content. So if a .richmediarc
// inherits from a other .richmediarc it will also contain those files.
import config from "richmediaconfig";
const banner = new Banner(config);
//first load fonts, load images etc in the init animation
banner.init().then(
() => {
//initializes animation and creates main timeline
banner.setAnimation(new Animation(document.querySelector('.banner'), config));
//plays banner
banner.start()
}
)
Which also passes the config object to the Animation constructor. From there, you are able to retrieve pretty much every value from the .richmediarc.
Example:
"content": {
...
"intro": false
...
}
export default class Animation extends FrameAnimation {
/**
*
* @param {HTMLDivElement} container
* @param {null} config
*/
constructor(container, config) {
super();
this.container = container;
if (config.content.intro) {
// something
} else {
// something else
}
}
}
Feeds (with Google Spreadsheet)
If you have a lot of data to cover you can use a Google Spreadsheet in combination with the config files. For more details see this page.