What This Page Does

The Media Manager is your central hub for managing all the images and icons that appear on your site. Use it to upload logos, banners, background images, and other graphics, then assign them to specific roles like your site logo, favicon, or default thumbnails. You can also pick icons from a built-in icon library to use throughout your site's navigation.

[Screenshot: media-manager-overview]

How to Get Here

Navigate to Admin Panel > Templates > Media Manager

You can also reach this page from the navigation bar at the top of any Templates page by clicking Media.

Understanding the Page

The Media Manager is organized into three tabs along the top of the page:

Files Tab

This is where you upload, browse, and manage your image files. At the top, you see five folder cards -- Images, Icons, Logos, Banners, and Backgrounds -- each showing how many files it contains. Click a folder card to view the files inside it.

Below the folder cards, you have a search box to filter files by name, view toggle buttons to switch between a grid layout and a list layout, and an upload area where you can drag and drop files or click to browse your computer.

Your files appear as cards in a grid. Each card shows a thumbnail preview, the filename, file size, and file type, along with action buttons.

Assignments Tab

This tab lets you connect your uploaded images (or icons) to specific roles on your site. Roles are organized into categories like Branding, Homepage, Defaults, Pages, and Icons. Each role has a card showing what is currently assigned to it, along with buttons to change the assignment.

Font Awesome Icons Tab

This tab gives you access to a large library of ready-made icons. You can search for icons by name, filter by style, and pick a custom color. These icons can be assigned to navigation sections and other parts of your site.

Common Tasks

How to Upload Images

1. Click the Files tab.
2. Select the folder where you want to store the file (for example, click Logos for logo images).
3. Drag and drop your image files onto the upload area, or click Browse Files to choose files from your computer.
4. Wait for the confirmation message to appear.
5. Your new files appear in the grid right away.

How to View File Details

1. Click on any file card in the grid.
2. A detail window opens showing a larger preview, the file size, type, last modified date, and the file path.
3. Close the detail window by clicking the X button, pressing the Escape key, or clicking outside the window.

How to Rename a File

1. Find the file in the grid.
2. Click the pencil button on the file card.
3. Type the new filename in the box that appears.
4. Click OK to confirm.

How to Delete a File

1. Find the file in the grid.
2. Click the trash button on the file card.
3. Confirm the deletion when prompted.

How to Copy a File's Path

Sometimes you need a file's path to use in other parts of the admin panel.

1. Find the file in the grid.
2. Click the link button on the file card, or click the card to open the detail window and then click Copy URL.
3. The path is copied to your clipboard and ready to paste wherever you need it.

How to Set Your Site Logo

1. Click the Assignments tab.
2. Use the category filter and select Branding.
3. Find the Site Logo card.
4. Click the Image button on that card.
5. The page switches to the Files tab with a message telling you to pick an image.
6. Click on the logo image you want to use.
7. Your logo is now assigned and will appear across your site.

How to Set Your Favicon

A favicon is the small icon that appears in browser tabs next to your site name.

1. Click the Assignments tab.
2. Filter by Branding.
3. Find the Favicon card.
4. Click the Image button.
5. Select a small, square image (ideally 32x32 pixels) from the Files tab.

How to Set Default Thumbnails

Default thumbnails appear when a video, gallery, or model does not have its own image.

1. Click the Assignments tab.
2. Filter by Defaults.
3. Find the role you want to set (for example, Default Video Thumbnail or Default User Avatar).
4. Click the Image button and select an image from your files.

How to Assign an Icon to a Navigation Section

1. Click the Assignments tab.
2. Filter by Icons.
3. Find the section you want to set an icon for (for example, Videos Icon or Favorites Icon).
4. Click the Icon button on the card.
5. The page switches to the Font Awesome Icons tab.
6. Optionally, adjust the icon color using the color picker at the top.
7. Search for an icon by typing a keyword (like "play," "heart," or "camera") or browse the grid.
8. Click the icon you want.
9. The icon is assigned and the page returns to the Assignments tab.

How to Change an Icon's Color

1. On the Assignments tab, find an assignment that has an icon.
2. Click the colored circle (color swatch) on the card.
3. Pick a new color from the color picker.
4. The color updates immediately.

How to Remove an Assignment

1. On the Assignments tab, find the assignment you want to clear.
2. Click the X (Clear) button on the card.
3. Confirm when prompted.

Filters and Search

Searching Files

Type a keyword into the Search box on the Files tab and the grid updates to show only files whose names match.

Filtering Assignments

On the Assignments tab, use the category buttons to narrow down what you see:

Searching Icons

On the Font Awesome Icons tab, type a keyword into the search box to find icons by name (for example, "home," "user," "arrow," or "camera"). You can also filter by icon style:

Settings and Options

Icon Color Picker

When working with icons on the Font Awesome Icons tab, you can set a custom color:

View Modes

The Files tab offers two ways to view your images:

• Grid View -- Shows files as visual cards with thumbnail previews. Best for browsing and finding images quickly.
• List View -- Shows files in a single column with more detail per row. Best when you need to see filenames and sizes clearly.

Click the view toggle buttons in the toolbar to switch between them.

Organizing Your Files

The Media Manager provides five folders to keep your files organized:

Tips for New Users

Troubleshooting

An uploaded file does not appear in the grid

What you see: You uploaded a file but it does not show up in the file list.

How to fix it:

1. Make sure the file is in an accepted format (JPG, JPEG, PNG, GIF, WEBP, SVG, or ICO).
2. Make sure the file is smaller than 10MB.
3. Try refreshing the page in your browser.
4. Clear your browser cache and try again.
5. If the problem continues, contact your hosting provider or site administrator to check server settings.

Icons are not loading in the Font Awesome tab

What you see: The icon grid shows "Loading..." and does not finish, or no icons appear.

How to fix it:

1. Check your internet connection. The icon library is loaded from the internet.
2. Wait a moment. If the main icon library cannot be reached, a smaller set of common icons loads automatically as a backup.
3. Try refreshing the page.

Assignment did not save

What you see: You clicked to assign an image or icon, but the assignment card still shows "Not assigned."

How to fix it:

1. Refresh the page and try again.
2. If you see an "Invalid security token" message, refresh the page first, then try the assignment again.
3. If the problem continues, contact your site administrator.

Image preview shows a broken image icon

What you see: Instead of a thumbnail, you see a broken image placeholder.

How to fix it:

1. The file may have been deleted or moved outside of the Media Manager. Check whether the file still exists in the grid.
2. Try refreshing the page.
3. Clear your browser cache.

"File too large" error when uploading

What you see: An error message saying the file is too large.

How to fix it:

1. Compress or resize your image before uploading. The maximum file size is 10MB.
2. Use an image compression tool (such as TinyPNG or Squoosh) to reduce the file size.

Related Pages