Creating Ad Pages for Pugpig

Creating Ad Pages for Pugpig

Like a printed magazine, you can create ad pages for your Pugpig editions. An advert can be as simple as a static image, or something far more bespoke with interactive elements and video. 

For the simple integrations we aim to provide guidelines on best practices for HTML in Pugpig whether thats for adverts or content pages and templates. We also maintain a simple ad template that supports a single image or set of images and a single URL link out as well as a repository of basic video integrations. For more information see the resources area below.
For anything more interactive and custom first you need to design the creative (mobile first) and then build the creative using HTML and CSS allowing for the device resolutions and orientations your app supports.


For guidelines on creating the HTML please read Creating HTML for Pugpig

It's important to highlight:

  • HTML must not exceed the size of the content window. For example, on an iPad this is (1024px by 748px in landscape, and 768px by 1004px in portrait if the status bar when the status bar is visible). The framework is designed to pane pages to these dimensions; if your ad is any bigger it will split across panes and cause invalid snapshotting and a poor user experience. If your publication scrolls vertically or panes horizontally, then the size can increase in the relevant dimension. Please refer to the information on scaling for iPhone.
  • All HTML files must be Unicode. If a file is not encoded correctly, it will appear as a blank page in Pugpig.
  • Use media selectors to decide on an orientation. Injecting a style for the orientation with javascript (by detecting width and height) are unreliable. Remember your ad can rotate at any time - design animations accordingly. If you want your ad to lock orientation, you’ll need to do it yourself.
  • Ad size - ads have a tendancy to be quite large in filesize with images and video content. Please be aware this will contribute to the overall edition download size and speed for your users. Optimise content where possible.


You can use the HTML5 video tag - see below. 

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.

Adding to a Pugpig edition

Once you've built the ad you need to get the content into your edition on a device. This can be handled as part of a static endpoint or through aCMS if you have one in place.

If the ad is being added to a static html endpoint, you will need to include (and unzip) all the files (html, images, css). It will require a manifest file and need to be added to the atom feed like any other article/page. Assets should be stored and referenced locally.

If you are using Drupal Pugpig connector we have a module to support ads, see How to Installing the Advertising Content Types

 Using the Advertising module. This allows for a CMS user to upload a zip file and include it as part of the flatplan. In this instance a manifest file isn't required because the module generates one for you but you will need to create a packaged zip file of the ad through the terminal. In terminal navigate to the folder location of your ad e.g. Desktop and use the following command: 'zip -r foldernameonyourdesktop' e.g zip -r amex.




For ad examples and code along with image dimensions, please see our GitHub:

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Powered by Zendesk