Working with Media Components

Customising a media component 

  1. Click the component on the canvas you wish to customise.  The component properties panel will be displayed.

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


  • 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


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


    • 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


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


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


    Allows a text snippet to be shown underneath the video


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


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


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


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:
  1. From the 'Media' list, drag an Anchor component to the part of the content readers will be jumping TO
  2. Select the anchor component and create a unique ID (Note, ID's must start with a character A-Z), such as '#MyAnchor'
  3. 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
  4. 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.

Still need help? Contact Us Contact Us