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.
- 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 'Component Properties Panel' to close it.
- Save the article to apply any changes.
Images
- 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.
Notes
- Once an aspect ratio is selected, 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 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:
- 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.