Follow

Images & Assets

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.

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

The Pugpig Readers support the ability to tap an image to go full screen. There are two modes for this.

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.

<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>
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk