In this article
- Image and Video elements
- Background image and video
- Responsive design
- Ideal image sizes
- Linking an image
- Replace an image or video
- Fallback image
- Self-hosted videos
What are Image and Video elements?
The image element can be dragged into any column on the page.
When the element is dragged into the column the Media Library will open automatically and the image can be selected.
After the image is on the page it can be replaced by clicking on the image icon in the blue settings bar.
Videos are a great way to make your publication more alive and stand out. The video element can be added to any column or overlay.
The element can be added by clicking on Content and dragging the Video element into a column.
A pop-up to upload the video will appear. We support Youtube, Vimeo and self-hosted videos. Self-hosted videos should always be in an MP4 format and should be entered as a URL.
The video name will be shown in the media library. The video URL can be either the entire URL or just the video ID.
The Fallback image is mandatory because otherwise when the video doesn’t play, a grey box will show on the page. Also, when using a background video, it will not play on tablet and mobile. This is prevented by mobile browsers to protect users against excessive data usage. For mobile and tablet, you can add a button that links to an overlay. In this overlay, you can add a video element that has a play button in it.
Background image and video
To cover the background you can choose to fill it with a background image or video. This is different from the image or video elements because it is set to the block background and you can place other elements on top of it. Background images can also be set to the column background.
When you have set your background, you can choose a background color overlay to place a layer on top.
Ideal image sizes
To ensure the best quality for your Foleon, we have written down the ideal image sizes below:
Ideal background image: 1920 x 1080 px
Max size of an image 1,2mb
Max size of a .gif 2mb
- image width can be 8064 px or lower (double that of an iPhone XS photo)
- image height can be 8064 px or lower
- image size (w x h) cannot exceed 18,300,000 pixels
Linking an image
Images can be linked to an external URL, another page within the publication or to an overlay. To link an image, add the image element into the page and click on the settings. In General Settings there’s a button edit link. There you can link the image to the option you want. You can’t unlink an image unless you replace it with a new unlinked one.
Replacing an image or video
You can replace a video or image via the replace icon on the element. This will open the media library and there you can select and choose a new image or video.
To add a new video from your computer, you can click on the new video icon. This will open a pop up to add the video URL, and set a fallback image.
For devices that can’t play a video, the fallback image is essential so that something shows in case the video can’t play. You can choose the fallback image from the media library.
Self hosted videos
It is also possible to add self-hosted videos (available from certain licenses) hosted internally. It needs to be an mp4 link, not an embed code or regular .com link.
The self-hosted option consists of an iframe in which the video can be placed. If you were to try and pull a video in with the embed code, it will create an iframe around the iframe that has already been created and therefore will not work. This is why it must be an mp4 link.