Media Library

Introduction

The Media Library provides a centralized location to upload, manage, and organize all the media files used throughout your website. From images to documents, the Media Library makes it easy to manage your digital assets.

Accessing the Media Library

To access the Media Library, click on "Media" in the sidebar navigation. The Media Library interface will load, displaying your media items in a grid layout.

Interface Overview

The Media Library interface consists of several key components:

1. Header Bar: Contains the title and upload button
2. Filtering and Search Tools: For finding specific media items
3. Gallery View: Displays media items in a grid
4. Media Details Sidebar: Shows information about selected items

Upload Media

To add new files to your Media Library:

1. Click the Upload Media button in the top right corner
2. The upload panel will appear with the following options:
   • Drag and drop files directly onto the upload area
   • Click to browse and select files from your device
   • Add optional default alt text for accessibility
3. Once files are selected, they'll appear in the preview area
4. Click Upload Files to begin the upload process

Supported File Types

The Media Library supports various file types:

• Images: jpg, jpeg, png, gif, svg, webp, avif, ico
• Documents: pdf, doc, docx, xls, xlsx, ppt, pptx, and other common formats

Media Upload Guidelines

File Size Limits

To ensure fast loading times and optimal performance, Aether has file size limits based on media type:

📸 Images

• Maximum size: 10MB per file
• Recommended formats: JPEG, PNG, WebP, AVIF
• Best for: Photos, graphics, illustrations, screenshots

📄 Documents

• Maximum size: 10MB per file
• Supported formats: PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, TXT
• Best for: Reports, presentations, spreadsheets, written content

Why These Limits?

✅ Faster website loading - Smaller files load quicker for your visitors
✅ Better user experience - Pages won't hang while loading large images
✅ Mobile-friendly - Users on slower connections can access your content
✅ Storage efficiency - Keeps your website running smoothly

What If My File Is Too Large?

For Images 🖼️

Reduce file size:

• Compress images using free tools like TinyPNG or Squoosh
• Resize dimensions - Most web images don't need to be larger than 1920px wide
• Choose the right format:
  • JPEG for photos (widely compatible)
  • PNG for graphics with transparency
  • WebP for better compression (good browser support)
  • AVIF for best compression (newest format, check browser support)

Quick tip: A high-quality web image is usually 200KB-1MB. If yours is larger, it can likely be optimized!

For Documents 📋

Reduce file size:

• Remove unnecessary pages or content
• Compress PDFs using Adobe Acrobat or online tools
• Split large documents into smaller, logical sections

File Upload Tips

💡 Drag and drop - You can drag multiple files directly onto the upload area
💡 Batch upload - Select multiple files at once to save time
💡 Preview before upload - Check your files in the preview area
💡 Descriptive names - Use clear, descriptive filenames for better organization

Troubleshooting

❌ "File too large" error

1. Check the file size (right-click → Properties on Windows, or Get Info on Mac)
2. If over the limit, use the compression tips above
3. Try uploading one file at a time if uploading multiple files

❌ Upload stuck or failing

1. Check your internet connection
2. Try refreshing the page and uploading again
3. Make sure the file isn't corrupted

Managing Media Items

Viewing and Filtering

The Media Library provides several ways to find and organize your media:

• Search: Use the search box to find media by filename or alt text
• Filter by Type: Filter items by "All Types," "Images," or "Documents"
• Sort Options: Sort by "Newest First," "Oldest First," "Name A-Z," or "Size"

Selecting Items

You can select one or multiple items in the Media Library:

• Click the checkmark button on a media item to select it
• Click the "Deselect All" button to clear your selection
• The number of selected items appears in the statistics bar

Bulk Actions

With multiple items selected, you can perform bulk actions:

• Delete Selected: Remove multiple items at once

Media Item Details

To view and edit details for a specific media item:

1. Click on the item in the grid view (not on the selection button)
2. The Media Details sidebar will open, displaying:
   • Preview of the media item
   • Filename (read-only)
   • Alt Text (editable)
   • Caption (editable)
   • Type information
   • File size
   • Dimensions (for images)
   • Upload date
   • Usage information (where the item is used across your site)

Editing Media Metadata

Within the Media Details sidebar, you can edit:

1. Alt Text: Provides accessibility descriptions for images
2. Caption: Adds a descriptive caption that can be displayed with the media

After making changes, click "Save Changes" to update the media item.

Usage Tracking

The Media Library tracks where each media item is used throughout your site. In the Media Details sidebar, the Usage section displays:

• Posts that reference the media item
• Pages that reference the media item
• Links to the content where the item appears

This helps you understand the impact of deleting or modifying media files.

Deleting Media

To delete media items:

1. Single Item Deletion:
   • Select the item to open the Media Details sidebar
   • Click the "Delete" button at the bottom of the sidebar
2. Bulk Deletion:
   • Select multiple items using the checkmark buttons
   • Click "Delete Selected" in the bulk actions bar

In both cases, a confirmation dialog will appear:

• Shows previews of the items to be deleted
• Displays a warning if the items are used in content
• Requires confirmation to proceed with deletion

When deleting media that is used in content, references will be automatically removed, preventing broken images or links.

Responsive Behavior

The Media Library is fully responsive:

• Desktop: Displays a grid of media items with multiple columns
• Tablet: Adapts to show fewer columns
• Mobile: Switches to a single column layout with optimized controls

Keyboard Navigation

The Media Library supports keyboard navigation for improved accessibility:

• Tab: Navigate between interactive elements
• Space/Enter: Select an item or activate a button
• Escape: Close the media details sidebar or dialogs

Tips for Effective Media Management

• Use descriptive filenames before uploading for better organization
• Always add alt text to images for accessibility and SEO benefits
• Regularly review unused media to keep your library organized
• Check usage before deleting media items to understand the impact
• Use the search and filter tools to quickly find media items in large libraries