All about the Media Library

Your Media Library is where all images, videos, and documents used in your Foleon Docs are stored. It keeps your content organized, accessible, and easy to manage across projects. In this article, you’ll learn how to navigate the Media Library, upload and organize files, and make quick edits to your images.

In this article

• Accessing the Media Library
• Navigating the Media Library
• Uploading media
• Organize with folders
• Supported file types
• Best practices for images
• Image compression
• Adding alt text to images
• Crop, rotate, and flip images
• Adding videos
• Using external media sources
  • Foleon stock assets
  • Using Unsplash
  • Using Bynder

Accessing the Media Library

You can access the Media Library in several ways, depending on where you're working in Foleon.

From the Dashboard
Open the Media Library directly from your workspace dashboard. In the navigation menu, click Media Library to browse, upload, or organize files at any time.

From the Editor
You can also open the Media Library while working in a Foleon Doc. There are several ways to do this:

• Click Media Library from the menu on the top left
• Drag an image or video element onto the page
• Replace an image or video on an existing media block.

Once opened, you can browse existing files, preview, organize them, or upload new files.

Navigating the Media Library

When you open the Media Library, you'll see the interface organized into clear sections. With multiple ways to browse, sort, and preview your media, it's easy to find what you need and keep everything organized.

Sections in the Media Library

• My media - This is your main workspace library. All media files uploaded by users in your workspace appear here. You can organize files using folders, rename items, and manage your team’s content assets.
• Shared - Contains files shared across workspaces. If your organization uses multiple workspaces, shared media ensures brand assets are easily accessible by all teams.

• Foleon Stock - A collection of ready-to-use stock media, including images, GIFs, videos, and buttons provided by Foleon. These are only visible when adding or replacing media.

• Integrations - Access content from third-party sources like Unsplash and Bynder.

Browsing and finding files

To help you find exactly what you're looking for, the Media Library allows you to:

• Search by file name within your folder
• Filter by type (image, document, or video)
• Sort your files by date, name, or size

You’ll find these controls at the top of the Media Library interface.

View options: Grid or List

You can toggle between two browsing modes depending on how you prefer to view your files:

• Grid view - shows large thumbnails for quickly identifying images or videos visually

• List view displays more detailed information, such as file size, type, and upload date.

Uploading media

Keeping your media organized ensures you and your team can work more efficiently across projects. You can upload files to your workspace, structure them with folders, and move items as needed.

Uploading files

You can upload files to the Media Library in two ways:

• Click + Add new media in the top-right corner of the Media Library. You can drag and drop your media assets directly into the upload window, or click Upload media to choose files from your computer.
• Drag and drop files directly into the Media Library or a specific folder

Files are always uploaded to the folder that is currently open.

Downloading files

To download a file you've previously uploaded to the Media Library:

1. Preview the file by double-clicking or selecting Preview from the quick actions menu (⋮)
2. Click the download arrow in the preview window to download the file

Organize with folders

When working on multiple projects, organizing your media with folders will save you time — especially as your library grows.

To create a folder:

1. Click Create new folder in the top-right corner
2. Name your folder and click Create
3. Drag and drop media into the folder as needed.

You can move media between folders at any time in one of two ways:

• Drag and drop the file to a different folder

• Select Move from the quick actions menu (⋮) and choose a new folder destination

Duplicating Foleon Docs and media folder behavior

When duplicating a Foleon Doc, media assets behave differently depending on where the duplication occurs:

• Duplicating within the same workspace - The media assets remain in their current folder. No new files or folders are created.

• Duplicating to a different workspace - A new folder will be created in the destination workspace’s Media Library, named: "Copied on [date]"

If any of the original media files already exist in the destination workspace’s Media Library, they won’t be copied again. This helps prevent duplicates and keeps your library clean.

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.

Lottie files

.lottie

Documents

.pdf
.doc
.docx
.xls
.xlsx
.ppt
.pptx 

The maximum file size for uploading documents is 20MB.

Best practices for images

Below, you'll find key tips for working with image formats and ideal dimensions, which are 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.

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.

Image compression

To help your Foleon Docs load quickly, we automatically compress large image files when they’re uploaded to the Media Library. This ensures high visual quality without sacrificing performance. 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 are no dimension restrictions.

• Images with a file size bigger than 2MB up to 20MB
  

  These are compressed automatically:

  • The image is resized to a maximum width or height of 3840px (4K)

  • The original proportions are preserved

  • Compression may also reduce file size

• GIFs are accepted up to 2MB and have no dimension restrictions.

• SVGs will not be resized.

Adding alt text to images

Alt text (also known as alternative text) describes the content of an image for screen readers and helps search engines understand your visuals.

Adding alt text improves accessibility for visually impaired readers and improves your content's SEO performance.

How to add alt text to an image:

1. Preview the file by double-clicking or selecting Preview from the quick actions menu (⋮)
2. On the right-hand side, the File details will appear. Here, you can enter or edit the alt text.
3. Click Save

Crop, rotate, and flip images

You can make quick edits to your images directly in the Media Library without the need for external tools. From the preview window, you can crop, rotate, and flip your images to get them just right for your design.

How to edit an image

1. Preview an image by double-clicking it, or selecting Preview from the quick actions menu (⋮)

2. At the top of the preview window, you’ll see the following editing tools:

   • Rotate Left or Right - Turn your image 90° at a time

   • Flip Horizontal or Vertical - Flip your image horizontally or vertically

   • Crop - Select a specific portion of the image. You can freely resize the image, or stick to a specific ratio. Click Apply Crop.

3. After making your changes, click Save.

4. A new version of your image will be saved to the Media Library. We recommend you rename it to distinguish it from the original image.

Adding videos

In addition to images and documents, it's also possible to add videos to the Media Library.

How to add a video

1. Click +Add new media in the top-right corner of the Media Library.
2. Select the option Add Video
3. Select your Video Source from the dropdown and complete the remaining information:
   • YouTube - Name your video and paste the video URL from your browser's address bar
     ⚠️ Important: Do not use the YouTube "Share" URL. You will receive an error message.
     
     ✅ Correct example: https://www.youtube.com/watch?v=abcd1234
     ❌ Incorrect example: https://youtu.be/abcd1234
   • Vimeo - Name your video and paste the URL from Vimeo
   • Wistia - Name your video and paste the URL 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.
   • Foleon-hosted video - Foleon-hosted videos let you upload video files straight into your Media Library so you don't need to rely on external platforms like YouTube, Vimeo, Wistia, or Brightcove. For more information, continue reading here. 
4. Adjust the fallback image if desired. The page will show the fallback image if the video doesn't play.  

Using external media sources

The Media Library allows you to use high-quality media from external sources without leaving the platform. You can browse stock media, search third-party libraries, and access brand-approved assets via integrations.

Foleon stock assets

You can use Foleon's stock media assets to add high-quality content to your Foleon Doc. In addition to stock icons, you can choose from a selection of (background) videos, GIFs, and buttons. 

You can access Foleon Stock media when you add or replace media in the Editor.

Using Unsplash

If you want to use 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 add or replace an image element on your page or change the background for a column or block. 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 preview will show. Click Insert media to add that image to your page directly, or cancel to proceed with your search.

Using Bynder

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.