Working with Media Components

Customising a media component

Click the component on the canvas you wish to customise. The component properties panel will be displayed.
A number of media properties will be displayed. The properties available will depend on the media component selected. See below for full details.
Once the component has been customised, click anywhere outside of the properties panel to close it.
Save the article to apply changes.

Images

Selecting an image component displays the image properties tab.
- 'Add Image' - Upload an image and embed into the image component.
- 'Crop' icon - Access to the cropping feature.
- 'Caption' - Add a caption to an image, such as crediting the creator.
- 'Full Bleed' - Fits the image to the full width of the page, removing padding.
- 'Use RAW' - Images uploaded to Canvasflow are automatically optimised, selecting to use the RAW image makes use of the original un-optimised file.
- 'Force Full Width' - Enlarge an image to ensure it fits the entire width of the device it's being seen on. If the raw image is much smaller than the width of the article, some pixelation may occur when using this property.
- 'Make Unselectable' - Change whether the image is selectable in the final article. (Only applicable when connected to a Pugpig Publish channel)
The final option indicated by 'Display on:' allows you to decide which devices an image appears on, by default an image will be shown to readers on every device

Gallery

A gallery component allows multiple images to be displayed across slides. This component's properties share familiar options but also some new ones:

Aspect Ratio

The Aspect Ratio option provides a way to match the aspect ratio of multiple images in a gallery slide. A warning notification will appear next to the upload image in the list if an aspect ratio is selected that doesn't match the upload images.

This option isn't used to set the aspect ratio, but to match, so that all images can be made uniform
Once an aspect ratio is slected, clicking the 'Crop' icon next to the image will display the cropping tool. The default crop size provided will be that of the selected Aspect Ratio

Captions

Using 'Gallery Caption' will add a caption to the entire gallery. Select the slider and enter your text into the box provided
To add a caption to each individual image, select the speech bubble icon next to the image in the upload list. A prompt will appear, add the caption content required and click ok, repeat for each slide

Image Ordering

To change the order of the images in the slide, click and drag the image using the placement icon

Display On

The Display On option allows you to choose which devices the gallery will be displayed on, by default it will be displayed on mobile, tablet and desktop

Full Bleed

The 'Full Bleed' option will make the gallery fit to the sides of the article without padding

Video

A video can be embedded using a video code or via uploading a video file. The options available to a video component are similar to others but also have:

Movie/Web Video

Web Video requires a code, simply paste the full url, ID, or embed code of a Youtube, Vimeo or Vidyard video into the box.The movie option allows you to upload a video file

Poster Image

A poster image can be uploaded, this will be shown as the default frame in the article before a video is played

Show Suggested Videos

Choose whether suggested videos are shown after the video is finished, supported by platforms such as Vimeo and Youtube

Credit

Allows the video to be credited to it's creator, shown in the bottom right

Caption

Allows a text snippet to be shown underneath the video

Audio

Audio components currently supports Soundcloud. To add a soundcloud clip, paste a soundcloud URL or embed code into the field

Maps

Maps can be used in a number of different ways within an article, one of the most obvious is to provide directions to an event. To use maps simply select the component and enter a post code, you can then:

Change the default zoom level of the map
Change the style of the map, such as Google's style, Apple's, Greyscale or Subtle Blue
Add a caption, set to Full Bleed or disable/enable on different mobile devices, just like other media components

Tables

The embedding of tables within a Canvasflow article is easy. Simply upload a .csv file into the table component

Anchors

Anchors can be used to allow readers to quickly be able to jump to specific portions of content. An example of anchor usage would be a 'back to top' anchor at the bottom of a page.

To create an anchor to link to content on the same page:

From the 'Media' list, drag an Anchor component to the part of the content readers will be jumping TO
Select the anchor component and create a unique ID (Note, ID's must start with a character A-Z), such as '#MyAnchor'
To create the link that readers will select to jump to the anchor, highlight a portion of text to expose the text to access the text formatting toolbar
Add a hyperlink using the hyperlink icon, and enter your anchor ID: #MyAnchor

To link to an Anchor located in a different article:

Add a hyperlink to the text you want readers to jump from
Instead of simply entering the anchor ID, enter the URL of the article readers will be jumping to, followed by the anchor ID
- e.g. : "https://DomainURL/13754/article.html#MyAnchor"

Note: If using multiple anchors on the same page, they must have unique ID's

Full page advert

The Advert component allows the insertion of a full-page ad. Advert components have the same properties as Image components such as Full Bleed and an embedded link option.

Advert components have one extra property, 'Fit':

Fit Height (letterboxing / no scrolling): Fit the device height at all times,
Fit Width (Scroll): Scales image to fit device width and create a scrollable page.

Note: Due to the iOS toolbar, when using 'Fit Height' the top 64px of a chosen advert image will be partially hidden.