It is possible to add inline HTML in to the body for several features. These do not use Pugpig Express's admin interface fields and may conflict with changes made to the article manually through the UI.

HTML Structure

Whilst our CMS supports custom HTML via RSS, we request that it's sent in a format that is valid and works with our CMS. Please note our CMS will interpret the following:

• Text with double line breaks will be converted to paragraph tags e.g <p></p>
• Text with a single line breaks will be converted to a line break tag e.g <br />

I will be treated as a new paragraph

I will be treated as a new paragraph
but i will be treated as a new line break

<p>I will be treated as new paragraph</p>

<p>I will be treated as a new paragraph <span>all on the same line</span></p>

<p>I will be treated as a new paragraph <span> 
on a new line
</span></p>

Will be converted to 

<p>I will be treated as a new paragraph</p>

<p>I will be treated as a new paragraph<br />
but i will be treated as a new line break</p>

<p>I will be treated as new paragraph</p>

<p>I will be treated as a new paragraph <span>all on the same line</span></p>

<p>I will be treated as a new paragraph <span><br />
on a new line<br /></span></p>

Image

A single image can be added using a figure and relevant classes. The figure must contain the class pp-media. An image can be aligned left (pp-media--pull-left, right (pp-media--pull-right), centre(pp-media--align-centre) or fullwidth (no extra class). In the example below the media is aligned to the right.

An alt title should be included for accessibility. The figcaption tag is optional. The credit is also optional and will only appear when the image is tapped to fullscreen.

<figure class="pp-media pp-media--pull-right">
    <img class="pp-media__image" alt="I am the alt title" src="https://www.example.com/path/to/image/filename.jpg">
    <figcaption class="pp-media__caption">Caption of image. I am optional</figcaption>
    <p class="copyright pp-media__credit">Credit</p>
</figure>

Gallery

A set of images may also be added as a gallery. Here extra attributes are required.

A data-image-group must be set and must be unique per page. In the example below the ID is group-2. This is probably the second gallery on the page.

The class pp-media--gallery should also be added to every image. The class is-hidden should be on every image except the first one. 

An alt title should be included on every image for accessibility. The figcaption tag is optional.

Galleries open in a native modal in the app (they do not launch if you are loading the page in the browser outside a Pugpig app).

<figure data-image-group="group-2" class="pp-media pp-media--gallery">
    <img class="pp-media__image" alt="I am the alt title of example 1" src="https://www.example.com/path/to/image/filename-1.jpg">
    <figcaption class="copyright pp-media__caption">caption example 1</figcaption>
</figure>
<figure data-image-group="group-2" class="pp-media pp-media--gallery is-hidden">
    <img class="pp-media__image" alt="I am the alt title of example 2" src="https://www.example.com/path/to/image/filename-2.jpg">
    <figcaption class="copyright pp-media__caption">caption example 2</figcaption>
</figure>
<figure data-image-group="group-2" class="pp-media pp-media--gallery is-hidden">
    <img class="pp-media__image" alt="I am the alt title of example 3" src="https://www.example.com/path/to/image/filename-3.jpg">
    <figcaption class="copyright pp-media__caption">caption example 3</figcaption>
</figure>

Audio

Audio files must be mp3 format. Any valid HTML that includes an MP3 should work with our native Bolt audio plater. At a minimum it should be an audio tag with a src that is an MP3. For example:

<audio src="XXX" controls></audio>

Video

Pugpig Express supports several video providers; YouTube, Vimeo, Brightcove and JW player. For custom inline videos for Brightcove and JW Player please contact our support.

You can also directly provide a link to a mp4 hosted elsewhere.

An image should also be supplied with each video as a placeholder in case the end user is offline. In this case the image and helper text will be displayed until the user comes back online. An alt title should be included on the image for accessibility.

MP4

Simple markup with no placeholder or adverts

<figure data-image-nozoom="" class="pp-media pp-media--video">
    <div class="pugpig-video pugpig-mp4">
        <video class="pugpig-video__player player-direct" controls>
            <source src="https://www.yourdomain.com/great-video.mp4"></source>
        </video>
        <p class="pugpig-video__offline">You will need internet connection to view this video</p>
    </div>
</figure>

Advanced markup contains support for video pre-roll adverts, placeholder images and a play icon. Here the play icon (svg below) can we replaced with a custom play icon to match your branding and styles.

 <figure data-image-nozoom="" class="pp-media pp-media--video">
    <div class="pugpig-video pugpig-mp4">
        <video class="pugpig-video__player player-direct" controls>
            <source src="https://www.yourdomain.com/great-video.mp4"></source>
        </video>
        <div id="pugpig-video-placholder" onclick="pugpigVideoPlayDirect(this)">
            <img id="pugpig-video-poster" class="pugpig-video__poster" src="https://www.yourdomain.com/great-video-placeholder.png" alt="Suitable alt title">
            <button id="pugpig-video-preroll-play" class="videoAdUiPlayButton" aria-label="Play">
                <svg width="72" height="72" viewbox="0 0 114 114" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="54" cy="56" r="48" fill="black" fill-opacity="0.3"></circle>
                    <path d="M76.986 51.0389L43.986 32.4209C42.9083 31.805 41.6867 31.4856 40.4455 31.4951C39.2042 31.5046 37.9877 31.8426 36.9195 32.4749C35.8788 33.0701 35.0143 33.9301 34.4136 34.9676C33.8129 36.0051 33.4975 37.1831 33.4995 38.3819V75.6179C33.4975 76.8167 33.8129 77.9947 34.4136 79.0322C35.0143 80.0697 35.8788 80.9297 36.9195 81.5249C37.9878 82.1569 39.2043 82.4948 40.4455 82.5043C41.6866 82.5138 42.9082 82.1945 43.986 81.5789L76.986 62.9609C78.0503 62.3714 78.9373 61.5076 79.555 60.4593C80.1726 59.4111 80.4984 58.2166 80.4984 56.9999C80.4984 55.7832 80.1726 54.5887 79.555 53.5405C78.9373 52.4923 78.0503 51.6285 76.986 51.0389Z" fill="white"></path>
                </svg>
            </button>
        </div>
        <p class="pugpig-video__offline">You will need internet connection to view this video</p>
    </div>
</figure>

A video shortcode would be an easier way to get advanced markup in to the app. Just insert the shortcode below into your content and let Pugpig convert it for you. The poster_src is optional.

[pugpig_video type="mp4" src="https://www.yourdomain.com/great-video.mp4" poster_src="https://www.yourdomain.com/great-video-placeholder.png"]

YouTube

A YouTube video can be added. YouTube videos are added using the YouTube ID. This must be placed in the attribute data-video-id and in the id video-player-ID where ID is replaced. The div containing the player must also have the class pugpig-youtube.

<figure data-image-nozoom="" class="pp-media pp-media--video">
    <div class="pugpig-video pugpig-youtube" data-video-url="https://www.youtube.com/embed/ID" data-video-id="ID">
        <div id="video-player-ID" class="pugpig-video__player is-hidden"></div>
        <img class="pugpig-video__poster" src="https://www.example.com/path/to/image/filename.jpg" alt="Title of image">
        <p class="pugpig-video__offline">You will need internet connection to view this video</p>
    </div>
</figure>

Vimeo

A Vimeo video can be added. Vimeo video URLs must of the format https://player.vimeo.com/video/ID where ID is the Vimeo video ID. The div containing the player must also have the class pugpig-vimeo.

<figure data-image-nozoom="" class="pp-media pp-media--video">
    <div class="pugpig-video pugpig-vimeo" data-video-url="https://player.vimeo.com/video/ID">
        <div class="pugpig-video__player is-hidden"></div>
        <img class="pugpig-video__poster" src="https://www.example.com/path/to/image/filename.jpg" alt="Title of image"></p>
        <p class="pugpig-video__offline">You will need internet connection to view this video</p>
    </div>
</figure>

Slider

A slider is a carousel of content that can be scrolled through. It can contain main images, text, inline images and more. Each slider contains multiple slides. These are easily scrollable with arrows. 

A slide's markup is made up of four parts. Each slider has a container that the slider is wrapped in. 

Sliders must have a series of radio buttons with slide IDs set. These ID's need to be unique not just on the slider but on the page. One slide (normally the first slide) should be checked. Sliders also need to contain labels stating the slides, the first slide and the last slide. 

It is important to note that the height of a slider will be determined by the height of the biggest slide within the slider. So it is recommended to use similar content for each slide.

In the code example below we have several different ways of adding content to sliders. 

<section class="pp-article__slider">
    <div class="pp-slider">
        <div class="pp-slider__wrapper">
            <form>
                <input type="radio" name="slides" id="slide_1" checked>
                <input type="radio" name="slides" id="slide_2">
                <input type="radio" name="slides" id="slide_3">
                <ul class="pp-slider__slides">
                    <li>
                        <figure class="pp-media pp-media--slider-image" data-image-nozoom>
                           <img class="pp-media__image" alt="Title of image" src="https://www.example.com/path/to/image/filename.jpg">
                           <figcaption class="pp-media__caption">Optional caption</figcaption>
                        </figure>
                        <div class="pp-slider__slides__body">
                            <h4>Slide 1 Title</h4>
                            <p>Several paragraphs can go here</p>
                            <p>This can include in line images</p>
                            <figure class="pp-media">
                                <img class="pp-media__image" alt="Title of image" src="https://www.example.com/path/to/image/filename.jpg">
                                <figcaption class="pp-media__caption">Optional caption</figcaption>
                            </figure>
                            <p>More text is allow</p>
                        </div>
                    </li>
                    <li>
                        <figure class="pp-media pp-media--slider-image" data-image-nozoom>
                            <img class="pp-media__image" alt="Title of image" src="https://www.example.com/path/to/image/filename.jpg">
                            <figcaption class="pp-media__caption">Optional caption</figcaption>
                        </figure>
                        <div class="pp-slider__slides__body">
                            <h4>Slide 2 Title</h4>
                            <p>Several paragraphs can go here</p>
                            <p>This can include inline images</p>
                            <figure class="pp-media">
                                <img class="pp-media__image" alt="Title of image" src="https://www.example.com/path/to/image/filename.jpg">
                                <figcaption class="pp-media__caption">Optional caption</figcaption>
                            </figure>
                            <p>More text is allow</p>
                            <p>More images are allowed too</p>
                            <figure class="pp-media">
                                <img class="pp-media__image" alt="Title of image" src="https://www.example.com/path/to/image/filename.jpg">
                                <figcaption class="pp-media__caption">Optional caption</figcaption>
                            </figure>
                        </div>
                    </li>
                    <li>
                        <div class="pp-slider__slides__body">
                            <h4>Slide 3 Title</h4>
                            <p>Several paragraphs can go here</p>
                        </div>
                    </li>
                </ul>
                <div class="pp-slider__arrows">
                    <label for="slide_1"></label>
                    <label for="slide_2"></label>
                    <label for="slide_3"></label>
                    <label class="goto-first" for="slide_1"></label>
                    <label class="goto-last" for="slide_3"></label>
                </div>
            </form>
         </div>
     </div>
</section>

A slide can contain an aside image. This could be an author or a biography image or something the piece is about. This image is optional. If not present the slider body will be full width of the main column. 

Slide 1 contains an aside image.

Slide 2 contains several inline images and paragraphs.

Slide 3 does not contain an aside image. Its body is full width. It has white space below as it is not as large as slide 2.

Boxout

A boxout is a piece of content that stands out from the main article. The ID on a boxout must be unique. You can edit the background colour and text colour within a boxout using inline styles.

The main image is optional.

<section class="pp-article__boxout">
    <div id="boxout_1" class="pp-boxout" style="background-color:#606060;color:#eeee22;">
        <figure class="pp-media">
            <img class="pp-media__image" alt="Title of image" src="https://www.example.com/path/to/image/filename.jpg">
            <figcaption class="pp-media__caption">Optional caption</figcaption>
            <p class="copyright pp-media__credit">Optional credit</p>
        </figure>
        <div class="pp-boxout__body">
            <h4>Boxout Title</h4>
            <p>Several paragraphs can go here</p>
        </div>
    </div>
</section>