@intouchgroup/banner-packager

Allows developer to use shared folder, also creates zips for upload

Usage no npm install needed!

<script type="module">
  import intouchgroupBannerPackager from 'https://cdn.skypack.dev/@intouchgroup/banner-packager';
</script>

README

@intouchgroup/banner-packager

Banner Packager allows a banner developer to use shared folder, the Intouch 'banner 2.0' method of developing banner ads. This will also work with banners built the legacy method.

Banner Packager will minify some files, create the zips required to upload to Banner Share, Google Campaign Manager and Google Studio.

A configuration file will allow the naming of the zip and backup images to be consistant with the desired banner name from the media agency.

Finally, Banner Packager will write a report on banner and backup image file weight, alerting to any overage or missing assets.

At this time I cannot figure out how to add animation time to that report.

Banner Packager will not compress images.

INSTALLATION

You must have NodeJS version 12+ installed to use this module.

To check what version of NodeJS you have, launch Terminal on Mac or Powershell on Windows and type node -v.

Once you have NodeJS 12+, globally install the latest version of this module from Terminal or Powershell:

npm i -g @intouchgroup/banner-packager

You can now run Banner Packager from any folder on your computer using Terminal or Powershell.

USAGE

When you open Terminal or Powershell, you will see a file path listed in the prompt. This is the current location of your Terminal or Powershell.

You can change locations using the cd FILE_PATH command. cd stands for "change directory" (go to a different folder), and is how you navigate using Terminal or Powershell.

  1. Using Terminal or Powershell, navigate to the 'src' folder where your banner project lives. For example: cd Projects/client-banner-project/sunshine/src
  2. Now run the Banner Packager tool from Terminal or Powershell by typing banner-packager and hitting ENTER.
  3. Banner Packager will create a 'dist' folder in your project directory. This folder contains your zips, backups and a weight report text file.

To include an image-only file Place the image(s) in the root of your project, make sure your config.json file includes the "maxImageOnlyKB" setting. Read about the configuration file below.

REQUIREMENTS

This script is looking for a few specific file names to minify. If it doesn't find them they will not be minified.

scripts/main.js
scripts/isiText.js

For legacy projects, this script will also look for legalText.js and minify it.

This script requires a configuration file, this file allows you to set the name format and other details once and not get prompted each time you want to run this.

config.json:

{  
    "name": "Company-MyDruga-{f}-Sunny-Day-{wxh}-{YYYY}.{MM}.{DD}",  
    "maxBannerKB": 100,  
    "maxBackupKB": 40,
    "maxImageOnlyKB":30,  OPTIONAL
    "backup_in_zip":false  
}
  • "name": - This is the name for the backup image and the zip file.
    • Some flags are available to insert the dimensions, date and special words, only the dimension flag ("{wxh}") is required, the others are optional.
      • {wxh} REQUIRED - This will be replaced with the banner dimensions extracted from the banner folder name.
        • for example: If your folder is called "300x250", the name of the zips and backup images will be Company-MyDruga-Sunny-Day-300x250
      • {YYYY} or {YY} - This will be replaced with the current four digit or two digit year.
        • for example: If you run the script on January 15, 2020, the name of the zips and backup images will be Company-MyDruga-Sunny-Day-2020
      • {MM} - This will be replaced with the current two digit month.
        • for example: If you run the script on January 15, 2020, the name of the zips and backup images will be Company-MyDruga-Sunny-Day-01
      • {DD} - This will be replaced with the current two digit day.
        • for example: If you run the script on January 15, 2020, the name of the zips and backup images will be Company-MyDruga-Sunny-Day-15
      • {f} - this is for a flag piece of text. Let's says that you have two banners that are both 300x250 but one is national, the other is specific to Colorado.
        • Name the folders 300x250 (for the national banner) and 300x250_Colorado (for the Colorado banner). The text after the underscore is our flag text
          • for example: If your folder has an underscore, the {f} will be replaced with the text following the underscore.
            • The 300x250 will be named Company-MyDruga-Sunny-Day-300x250
            • The 300x250_Colorado will be named Company-MyDruga-Colorado-Sunny-Day-300x250
  • "maxBannerKB": - Put the maximum allowed file weight in KB here, if the banner exceeds this value you will be notified. ex.: 200
  • "maxBackupKB": - Put the maximum allowed file weight for the backup image in KB here, if the backup image exceeds this value you will be notified. ex.: 40
  • "maxImageOnlyKB": OPTIONAL - Put the maximum allowed file weight for the image-only banner(s) in KB here, if the image exceeds this value you will be notified. ex.: 30
  • "backup_in_zip":
    • If true this will include the backup image inside of the zip.
    • if false the backup image will be added to the 'dist' folder outside of the zip.
      • In both cases the file weight of the backup is not included in the file weight report and the backup image will be renamed.

TO DO

  1. Add backup image name to config.js