All about the media library

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.

How to access the media library

You can access the media library in 4 different ways:

1. Clicking the media library button in the top left corner of the editor.

2. When you drag an image element into your Foleon Doc.

3. When you drag a video element into your Foleon Doc and select Choose from library.

4. 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

Upload new media from your computer to the media library by clicking on the upload button in the top right of your screen.

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 and 72 DPI.
  - .png - Maximum file size 20MB and 72 DPI
  - .svg - Without additional formatting.
  - .gif - Maximum file size 2MB.
  

  💡 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.

• Documents
  

  - .pdf 
  - .doc 
  - .docx 
  - .xls 
  - .xlsx 
  - .ppt 
  - .pptx 
  
  The maximum file size for uploading documents is 20MB.

Adding videos

Next 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.

You will then see a pop-up window that offers you different options (depending on your plan):

• Youtube - Give your video a name and link to the YouTube video directly.

• Vimeo - Give your video a name and link to the Vimeo video directly.

• Self-hosted video - These are videos that you host on your own server. These videos should always be in an MP4 format and should be entered as a URL. This means that the URL should always end on ".mp4".

  💡 Using self-hosted videos is not available to all plans. If you're interested in this functionality, contact our Customer Success Management team.

  Adding a fallback image is mandatory. If you wouldn't add a fallback image, there would be a grey box visible that might confuse your audience.

 

Foleon stock assets

You can use Foleon's stock media assets to quickly insert 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.

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.

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.

 

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.

Use the search bar to find the right image for your content. The search results will show up 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 directly add that image to your page, or cancel to proceed your search.

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.