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.
- 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:
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
To change the order of the images in the slide, click and drag the image using the placement icon
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
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:
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
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:
- 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.