You add images, videos, and documents to your Foleon Doc. Where do these files live? The Media Library helps you organize these content assets. In this article, we discuss how the media library works and how to manage your files.
💡 Starting a new project or Foleon Doc? Discuss with your team how you will organize the Media Library, so you can quickly locate the right files.
In this article
- How to access the media library
- Navigating the library
- How to upload a file
- Supported file types
- Best practices for images
- Adding videos
- Foleon stock assets
- Search and sort
- Image compression
- How to add alt text to your images
- Organize your media library with folders
- Using the crop tool
- Using Unsplash
- Using your Bynder content
How to access the media library
You can access the media library in 4 different ways:
-
Clicking the media library button in the top left corner of the editor.
-
When you drag an image element into your Foleon Doc.
-
When you drag a video element into your Foleon Doc and select Choose from library.
-
When you click on replace image for an existing background image or image element.
Once in the media library, you can select media that is already in the library or choose to upload an image, video, or document from your computer. You can read How to upload a file to learn how to do so.
Navigating the library
When you open up the media library from the Media Library button in the editor, In you will see 4 different source types for your workspace library: All media, Images, Videos and Documents. You can find these in the menu on the left-hand side of your screen.
When you drag an image element (or replace an image) into your page, you will see some additional options. When you drag in a new image element or replace an image, you will find:
-
Workspace library - This is the place where you can upload and manage the content assets of your team.
-
Stock Foleon - Here you can find our selection of stock images that can be used in your Foleon Doc.
-
Unsplash - In case you want to make use of stock images, you can use our Unsplash integration. Learn more in our article Working with Unsplash.
-
Bynder - Bynder lets you centralize, organize, and share all your digital media files. Read all about it in our article Using your Bynder content.
How to upload a file
You can upload new media from your computer to the media library by clicking the upload button at the top right of your screen.
There's no maximum storage capacity for the media library, but we recommend not overloading it with assets and keeping it organized.
💡 You can also upload files by dragging and dropping them from your computer into the media library.
You can also download images that you've previously uploaded. Select an image — this opens up the information panel on the right-hand side of the screen.
In this panel, click on the direct link icon. This opens the image in a new browser tab.
In your browser, right-click on the image and click save image as. This allows you to save the image to your device.
Supported file types
The media library supports a variety of files to be uploaded. Below you can find a list of supported file types for images and documents:
Images
.jpg - Maximum file size 20MB.
.png - Maximum file size 20MB.
.webp - Maximum file size 2MB.
.svg - Without additional formatting.
.gif - Maximum file size 2MB.
📖 Keep reading below for more best practices for your images
Lottie files
.lottie
📖 Read more in article: All about Lottie animations
Documents
.pdf
.doc
.docx
.xls
.xlsx
.ppt
.pptx
⚠️ It's not possible to upload password-protected files.
Best practices for images
Below, you'll find key tips for working with image formats and ideal dimensions — especially important when using background images.
Image formats
Different image types are suited for different content and design needs:
- PNG is an image format that supports transparent or semi-transparent backgrounds. It's perfect for layering, gradients, and shaped edges.
- JPEG is best for photographs and illustrations with many colors.
- SVG is ideal for logos and straightforward vector illustrations. You can also use animated SVG file.
⚠️ For best results, images should be 2000px wide or less and under 20MB in file size.
💡 About SVG files — Although difficult, it's possible to animate SVG images within the code of the file itself. You can't animate SVG files with custom CSS. To ensure the animation plays when the reader reaches the block with the image, you can add a native block animation so the animated SVG image loads as soon as the block loads.
Ideal background image sizes
Below, we’ve shared recommended aspect ratios and dimensions for background images. Background images will automatically scale — stretching or zooming — to fill their container as screen sizes change. This makes the aspect ratio more important than exact dimensions.
- Desktop: 16:9 - Landscape rectangle (suggested dimensions: 1920x1080px)
- Tablet: 1:1 - Square (suggested dimensions: 1024x1024px)
- Mobile: 9:16 - Portrait rectangle (suggested dimensions: 1080 x 1920)
Dimensions vs. Aspect Ratios - Why does this matter?
Because readers use a wide variety of screen sizes to view digital content, it’s impossible to account for every variation. However, by focusing on common aspect ratios, you can prevent most layout issues and ensure your images look great across devices.
💡 The viewport breakpoints below show the portion of your background image that will be visible on smaller devices (without adjusting the block height for tablet or mobile).
Adding videos
In addition to images and documents, it's also possible to add videos to the media library. However, the process here is a bit different. You can not upload videos directly from your computer, but link to a video that lives on its own URL. This ensures that the loading time of your Foleon Doc stays fast.
To add a video, navigate to Videos in the menu on the left and then click on the New video icon in the top right corner of the screen.
A New video pop-up will appear. Select your video type and complete the following:
-
YouTube - Name your video and paste the URL or video ID from YouTube
-
Vimeo - Name your video and paste the URL or video ID from Vimeo
- Wistia - Name your video and paste the URL or video ID from Wistia
- Brightcove - Name your video and paste the URL from Brightcove
-
Self-hosted video - These are videos you host on your own server. They should always be in MP4 format and entered as a URL, meaning the URL should always end in ".mp4." It can't be an embed code or a regular ".com" link. Name your video and paste the URL.
💡If using Cloudfare Stream for self-hosted videos, use the manifest URL below for optimal playback:
https://customer-{customer-id}.cloudflarestream.com/{identifier}/manifest/video.m3u8
This URL enables adaptive streaming by providing multiple video renditions, ensuring smooth playback across various network conditions. The watch.mp4 URL is intended only for embedded content and may not function correctly for self-hosted video delivery. More information from Cloudfare can be found here.
⚠️ Using self-hosted videos is not available for all plans. If you're interested in this functionality, contact us here.
The fallback image is mandatory. If the video doesn't play, the page will show the fallback image.
Foleon stock assets
You can use Foleon's stock media assets to add high-quality content into your Foleon Doc. Next to stock icons, you can choose from a selection of (background) videos, GIFs, and buttons.
You'll only see the Foleon Stock assets options in the media library when you add or replace an image or video. You won't see these options when you open the media library to manage your media assets.
💡These stock assets are not available to all plans.
Search and sort
Search your media library in the top-left search bar of the media library. You can sort the results by added date or alphabetically in the top-right corner.
Image compression
When you upload images to the media library, it's possible that we compress them to ensure fast loading times in your live content. The following rules apply:
-
Images with a file size below 2MB
Images up until 2MB are accepted in the media library without image compression. There is no limit to image dimensions. - Images with a file size bigger than 2MB up to 20MB
These images will be compressed.
The image dimensions will be resized to max width/height of 3840 px (4K), keeping the original image proportions. This can also affect the file size. GIFs are accepted up to 2MB and have no dimension restrictions. SVGs will not be resized.
⚠️ Images that exceed the max file size are not accepted in the editor.
How to add alt text to your images
Alt text — also known as alt tags and alt descriptions — helps screen-reading tools describe images to visually impaired readers. Next to that, it allows search engines to better crawl and rank your website.
If you select an image in the media library, image data will appear on the right-hand side of the screen. Click on the name of the image on the bottom. In the example below, we click on "Office".
Here you'll be able to change the name of the image in the media library. Next to that, you can add alt text in the image alt field. In the example below, we've described the image as "Modern office building". That's it. You've now added alt text to your image.
Organize your media library with folders
When working on multiple projects, it’s best to organize your media with folders. You can create a new folder from the New folder icon in the top-right corner.
When you are uploading images and videos in the media library, they will be saved in the folder that you have opened. Make sure you organize your media library by uploading images into the right folders.
When you already uploaded images and want to move them to another folder, simply drag the image to the folder you would like it to be in and drop it there.
- Duplicating a Doc to a project in the same workspace: the media assets of that Doc stay in the same media library folder they were already in.
- Duplicating a Doc to a project in another workspace: a new media library folder will be created for the media assets, named "Copied on...<date>". If media assets of the duplicated Doc somehow already exist in the media library of the new workspace, these files won't be copied over again. This is to prevent unnecessary file duplicates.
⚠️ Did you just duplicate your Doc? We recommend checking your media library and renaming any copied folders, so you can find them easily in the future.
Using the crop tool
The crop tool in the media library allows you to crop images.
Select the image you want to crop, and the tool will appear when you click the crop icon. Ensure you rename the cropped version, to distinguish the cropped image from the original image.
💡 It's not possible to crop GIFs.
After clicking on the Crop icon, you will be taken to the crop page. You can freely resize the image, or stick to a specific ratio. Make sure to click on Save to finish the cropping of the image. The media library will then generate a new image, which does not override the original image.
Using Unsplash
In case you want to make use of stock images, you can use our Unsplash integration, which provides thousands of free-to-use images from within the media library.
The Unsplash integration will show in the sidebar, when you drag in an image element, or when you want to change the background for a column or a block.
⚠️ The Unsplash button will only show up when you add or replace an image, not when you click on the media library button from the editor.
Use the search bar to find the right image for your content. The search results will appear, and you can scroll to find the image you like.
When you click on any of the images, a larger preview will show. Click Insert media to add that image to your page directly, or cancel to proceed with your search.
⚠️ Unsplash images are links to Unsplash and the images themselves will not get downloaded to show in your Media Library. In the unlikely event of the photographer removing the image from their portfolio, the image will not display any more in your Foleon Doc. Instead, a placeholder image of Unsplash will show.
Using your Bynder content
We have a native integration with Bynder in the media library. Bynder lets you centralize, organize, and share all your digital media files. Read all about it in our article Using your Bynder content.
⚠️ The Bynder native integration is not included in all plans. If you're interested in connecting to Bynder, contact us here.
Related articles