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. 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 'Component Properties Panel' to close it.
4. Save the article to apply any changes.

Images

1. Selecting an image component displays the 'Image Properties Tab'.
   • Add Image - Upload an image and embed into the image component.
   • Crop - Access to the cropping feature.
   • Caption - Add a caption to an image, such as a creator's credit.
   • Full Bleed - Fits the image to the full width of the page, removing padding.
   • Use RAW - Images uploaded to Canvasflow are automatically optimised. This option forces Canvasflow to use the original un-optimised RAW file.
   • Force Full Width - Enlarge an image to ensure it fits the entire width of the device. If the RAW image is much smaller than the width of the article, some pixelation may occur when using this option.
   • Make Unselectable - Toggle whether the image is selectable in the final published article. This only applies when connected to a Pugpig Publish channel.

   • Display on Device: Choose which devices the media component will appear on. The defaults are mobile, tablet and desktop.

• Gallery

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

• Aspect Ratio

  The 'Aspect Ratio' option enabled you to give multiple images in a gallery slide a uniform size. A warning notification will appear next to the uploaded image if a non-matching aspect ratio is selected.

• Captions

• Using 'Gallery Caption' will add a caption to the entire gallery. Select the slider and enter your desired 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 the full width of the article without padding.

    

    Video

A video can be embedded using a URL or by uploading a video file. The options available to a video component are:

• Movie/Web Video

  Insert web video by pasting the 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 directly from your device.

  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:

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.