Images & Assets
Written by Benji Weiser
Updated at April 10th, 2024
Table of Contents
Image size
Images should not be any wider than 1536px and should not be higher that 2000px.
Preloading image assets
Preload all image assets referenced by your stylesheet that are visible in the page's snapshot. We do this by adding them to your markup using <img> tags in the <body> tag. They can't be styled as “display: none” (this won't actually load the image immediately). We use a style of “position: absolute; display: block; width: 0; height: 0;”. This preloading is sometimes necessary to avoid missing images in the snapshots. You must ensure that you place the preloaded images in such a way that they don't spill outside of the available ad space, or you will have the pane-based problems already mentioned above.
Image resizing
We resize all images that we store in the Pugpig Express media library, the types of which are shown in the table below. Images with source sets will have a maximum size and smaller version of the image available in the source set. Note that we do not resize edition covers.
| Width | Height | Source Set | Aspect Ratio Preserved | |
| Main media | 1040 | 0 | Yes | Sometimes |
| Inline (using pugpig_image) | 1536 | 1536 | No | Yes |
| Cards - Image card | 1040 | 0 | No | Yes |
| Cards - large layout | 780 | 546 | No | Yes |
| Cards - small layout | 300 | 210 | No | Yes |
| Edition Covers | - | - | - | - |
External images that are proxied from Pugpig Express into the Pugpig Distribution service are not resized.
Customers not using Pugpig Express are responsible for providing correctly sized images where appropriate.
External Assets and Libraries
Only assets from the origin domain will be downloaded and cached on the device. If you are using third party libraries, ensure you copy them to your server and serve them from there.
Tap for Full Screen Images
Pugpig supports the ability to tap an image to go full screen. There are two modes for this.
Article with tappable image
State after image has been tapped
Automatic tap-to-fullscreen
Automatic tap-to-fullscreen is enabled by setting the page control's imageViewingEnabled property with[pageControl setImageViewingEnabled:YES].
If the client is configured to automatically enable the ability for all figures, you need to supply a <figure> element that contains an optional caption (using <figcaption>) and optional credit (using <p class=“copyright”>) as shown below.
If the client has RSS feeds then this doc provides good examples.
<figure id="fig1">
<img src="images/test.jpg"/>
<figcaption>This is a test image</figcaption>
<p class="copyright">Reuters</p>
</figure>You can tell Pugpig to exclude a figure from the full screen list by adding a data-image-nozoom attribute:
<figure data-image-nozoom>
<img src="images/test.jpg"/>
<figcaption>This is a test image which will not tap to fullscreen...
</figcaption>
<p class="copyright">Reuters</p>
</figure>Fullscreen slideshows
If you have multiple figures on the page, you can group them into slideshows. When in full-screen mode, you can swipe between all the images on the page that are in the same slideshow. Images are grouped using the data-image-group attribute:
<figure data-image-group="group1">
<img src="images/test1.jpg"/>
<figcaption>Image in slideshow 1</figcaption>
<p class="copyright">Reuters</p>
</figure>
<figure data-image-group="group1">
<img src="images/test2.jpg"/>
<figcaption>Image in slideshow 1</figcaption>
<p class="copyright">Reuters</p>
</figure>
<figure data-image-group="group2">
<img src="images/test3.jpg"/>
<figcaption>Image in slideshow 2</figcaption>
<p class="copyright">Reuters</p>
</figure>
<figure data-image-group="group2">
<img src="images/test4.jpg"/>
<figcaption>Image in slideshow 2</figcaption>
<p class="copyright">Reuters</p>
</figure>All of the images don't need to be visible - as long as they're in the DOM, Pugpig will find them. This is a useful feature if you want a single image to open up into a full-screen slideshow, even if the other images in the slideshow aren't visible on the page.
Manual tap-to-fullscreen
If you wish to manually control which figures have the touch-for-fullscreen ability, you should ensure the page control's imageViewingEnabled property has been cleared with [pageControl setImageViewingEnabled:NO]. You need to include an onImageClick url as shown below.
<figure id="fig1">
<a href="pugpig://onImageClick/fig1">
<img src="images/test.jpg"/>
<figcaption>This is a test image</figcaption>
<p class="copyright">Reuters</p>
</a>
</figure>If you are doing it manually, you must ensure an element wrapping the image has a matching id as this is how Pugpig locates the image. If you do not want to wrap your images in figure tags then simply put the id on to the anchor tag.
Manual tap-to-fullscreen and Fullscreen slideshows
So, if we want to both manually control the touch-for-fullscreen ability and enable fullscreen sliding, each of the <figure> elements belonging to the gallery in question will need to have a common data-image-group attribute, as well as the unique image id found at the end of the link <a> url:
<figure data-image-group="grp-a"id="fig1">
<a href="pugpig://onImageClick/fig1">
<img src="IMG_1.jpg"alt=""/>
</a>
<figcaption>Figcaption</figcaption>
<p class="copyright">Credit/Copyright</p>
</figure>
<figure data-image-group="grp-a"id="fig2">
<a href="pugpig://onImageClick/fig2">
<img src="IMG_2.JPG"alt=""/>
</a>
<figcaption>Figcaption</figcaption>
<p class="copyright">Credit/Copyright</p>
</figure>This manual tap to full-screen method also allows you to wrap the anchor around a different element - rather than the image. This means you could hide the image in the HMTL (using width=“0” and height=“0”) but still launch the full screen view or even a gallery from an icon or text etc.
EG:
<figure data-image-group="grp-a"id="fig1">
<a href="pugpig://onImageClick/fig1">
<p>CLICK</p>
</a>
<imgsrc="image.jpg"alt=""/>
<figcaption>Figcaption</figcaption>
<p class="copyright">Credit/Copyright</p>
</figure>
<figure data-image-group="grp-a"id="fig2">
<a href="pugpig://onImageClick/fig2">
<p>GO!</p>
</a>
<img src="another_image.jpg"alt=""/>
<figcaption>Figcaption</figcaption>
<p class="copyright">Credit/Copyright</p>
</figure>