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 and credit are 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).

There are two slots in the native gallery, one for a caption and one for credit.

• The caption slot is determined by the text in the <figcaption> element.
• The credit slot is determined by the text in an element with the copyright class.

<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="pp-media__caption">caption example 1</figcaption>
    <p class="copyright pp-media__credit">credit example 1</p>
</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="pp-media__caption">caption example 2</figcaption>
    <p class="copyright pp-media__credit">credit example 2</p>
</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="pp-media__caption">caption example 3</figcaption>
    <p class="copyright pp-media__credit">credit example 3</p>
</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, Daily Motion 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>

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" data-swipeable>
        <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>