RSS Inline Elements

Avatar
Jon Marks
  • Updated

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.

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.

<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>
</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='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='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='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 formats:YouTube, Vimeo, Brightcove and JW player. For custom inline videos for Brightcove and JW Player please contact our support.

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.

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-nocookie.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>
        <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-1.png

Slide 2 contains several inline images and paragraphs.

slide-2.png

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.

slide-3.png

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>

Comments

0 comments

Article is closed for comments.

Powered by Zendesk