Adjust a Banner step by step
When you get source files from an existing project and you want to make changes to it. But you never worked with the framework.
Last updated
Was this helpful?
When you get source files from an existing project and you want to make changes to it. But you never worked with the framework.
Last updated
Was this helpful?
If you just want to get started and didn't recieve any delivered files here are some example files to start with:
If you are running Windows as your operating system please go to the Windows page
If you are running MacOS as your operating system please go to the MacOS page
First we need to install the packages that are needed to display/change and build the files. When you do this, the Command Line Tool will display what will be installed. In your Command Line tool, having the path set to the unzipped folder type:
And press Enter.
The installation can take a while and you might see some warnings come by like "Found 9 vulnerabilites" etc but that is something to not be worried about.
After installation your Command Line tool will look something like this. Besides this you can see that there has added a node_modules folder inside the unzipped folder.
To keep in mind. Each time you want to view your banners or make amends to them. You need to let your command tool run from the unzipped project folder the banners are in. So in my case that would be "C:\Users\paulie\Desktop\example_banner". This is the only way the framework can run the banners. You can't run the framework on a specific file or folder inside the project folder.
Open your Powershell from the unzipped folder again if you closed your Command line tool.
In order to view banners, after installing the packages, in your command line, while running in the unzipped folder, type:
It will search for config files which are the .richmediarc files in your files.
If there is more than one it will ask you which one you want to run. You can run them all, one or just a couple by selecting/deselecting the options by using the spacebar. Press enter to continue.
After you made a choice it will setup a local server and compile the banners via webpack. You will see something like this.
After that, your browser will open a new tab, running in http://localhost + an available port (such as 8000), displaying the banner(s) of your choice.
In computer networking, localhost is a hostname that means this computer. It is used to access the network services that are running on the host via the loopback network interface. Using the loopback interface bypasses any local network interface hardware.
When this development environment, in short "dev environment" is running on the localhost you can change assets/code and when you refresh your browser it will automatically show the changes.
To stop running the development environment type in your command line tool:
The Command Line tool wil then ask "Terminate batch job (Y/N)?" Press Enter on your keyboard
Type in "y" behind the question and press Enter:
As you can see you will now head back to the path where you started, the unzipped folder path. And you are able to type in Commands again.
When you are running in the dev environment. Webpack will automatically update the assets you change on refreshing the browser.
If you want to change text or images you can easily do so by changing those in the index.html. Use a text editor like Notepad to make changes or your own favorite editor.
Open the index.html file inside the 300x250 folder with your text editor. If you want to open it with Notepad for example. Right-click on the index.html > in the menu > choose "Open with" > and choose Notepad from the options there.
My index.html looks like this now:
If I amend the copy and the image from this:
To this:
When I refresh the page I see the changes:
In the css folder there is a style.css file you can make amends to for example, the color of text. Or the position of an image.
In the lib folder we put all of the shared code that has been shared throughout all the sizes in the project
In the script folder, we put all of our custom code that is dependant upon to the size.
After the changes have been done we can now build the banner so that we get a new compiled package.
If you have more than one size, it will ask you which files need to be build. Then it will ask you where to build the project.
The building of this project is done with webpack. Webpack will reduce the size of js code, images, svg files etc. And will also as specified combine a lot of js files into one.
You can choose the default option by just pressing Enter, the build directory
Project has been build. Now take a look in the build directory.
Filename
Description
bundle.zip
all the files below in one zip.
index.html
html file
main.js
main javascript file.
style_v7h2ieE.css
css file, those weird chars in the file name is the hash of the file it self.
If you want to create a new size you can simple copy the folder of the size that's most near in terms of animation and width/height relations. For example, I have a 300x250 and I am going to create an 300x600 out of it.
Copy paste the folder of the size you want to duplicate to a new size.
First start with changing the size of the banner.
The .richmediarc is a configuration file that includes the path to the first loaded javascript file, the main html file and the width and height of the banner. It is mandatory in each size so that it can be found when you build a banner.
In the folder of the created size, look for the .richmediarc file and open it in your editor.
Change the height from 250 to 600 and save the file.
In the .css file, which you can find in the folder css, change the height to 600px and save the file.
If you now type "npm run dev" while in the folder of your project, you will see a new option of displaying the 300x600. By pressing Spacebar I select the "all" option to preview all banners in the dev environment. And press Enter to build the dev environment.
Your browser will open up a new tab an preview a second banner with the size of 300x600.
In order to make a correct export to put it online. We are going to make a "build" version out of it. Close the running dev environment by typing "ctrl-c" in your command line tool. Type "Y", and press enter.
Now type in your command line tool:
If the "build" folder is not empty it will ask if it needs to delete the files that are in. Press Y for yes and N for no. It's okay to delete them. But if you have a lot of banners, and you don't want to build them all over and over again since it takes time it is better to say N no.
I choose to build all the banners in my folder, which are the 300x250 and 300x600. Select with spacebar and press Enter.
You will see that it runs a script like over here
Now if you check your build file in the folder
You will see a second folder with the 300x600 in it.
