Media Library

Overview

The Media Library is a comprehensive file management system for uploading, organizing, and managing all media files used throughout your website. It supports images, videos, and documents with features like automatic optimization, WebP conversion, thumbnail generation, and folder organization.

Accessing Media Library

Navigation path: Dashboard > Content Management > Media Library

Required permission: media.view

Key Features

• Multi-File Upload: Upload multiple files simultaneously
• Image Optimization: Automatic image compression and resizing
• WebP Conversion: Generate modern WebP format for better performance
• Thumbnail Generation: Automatic thumbnail creation for images
• Folder Organization: Organize files in folders and subfolders
• File Filtering: Filter by folder, file type, and search
• File Details: View file information, size, dimensions, and metadata
• Bulk Operations: Delete multiple files at once
• Direct URLs: Get direct URLs for using files in content
• File Preview: Preview images and documents before use

Main Interface

Media Grid View

The media library displays files in a grid layout:

• File Thumbnail: Visual preview of the file
• File Name: Name of the uploaded file
• File Size: Human-readable file size
• File Type: Icon indicating file type (image, video, document)
• Actions: View details, copy URL, delete

Features:

• Responsive grid adapts to screen size
• Hover effects for better interaction
• Quick actions on each file
• Empty state message when no files exist

Filters Panel

Filter and search options:

• Folder Dropdown: Filter by folder location
• Type Dropdown: Filter by file type (images, videos, documents)
• Search: Search files by name
• Filter Button: Apply selected filters

Upload Modal

File upload interface:

• File Selector: Choose multiple files
• Folder Input: Specify destination folder
• Optimization Options: Toggle image optimization features
• Progress Bar: Visual upload progress
• Upload Button: Start the upload process

Common Tasks

Task 1: Uploading Files

1. Navigate to Dashboard > Content Management > Media Library
2. Click Upload Files button
3. In the upload modal:
   • Click Choose File or drag files into the area
   • Select one or multiple files
   • Specify Folder name (default: "general")
   • Configure options:
     • ☑ Optimize Images: Compress and resize images
     • ☑ Create WebP: Generate WebP versions
     • ☑ Generate Thumbnails: Create thumbnail versions
4. Click Upload
5. Wait for progress bar to complete
6. Files appear in the media grid

Task 2: Organizing Files in Folders

When uploading:

1. In the Folder field, enter folder name
2. Use forward slashes for subfolders: "images/products"
3. Folders are created automatically if they don't exist

To move existing files:

• Currently requires re-uploading to new folder
• Or use file system directly

Task 3: Filtering and Searching Files

1. Use the Folder dropdown to filter by location
2. Use the Type dropdown to filter by file type:
   • Images (JPG, PNG, GIF, WebP)
   • Videos (MP4, MOV, AVI)
   • Documents (PDF, DOC, etc.)
3. Click Filter to apply
4. Use search box to find files by name

Task 4: Viewing File Details

1. Click on a file in the grid
2. File details modal opens showing:
   • Full-size preview (for images)
   • File name and extension
   • File size
   • Dimensions (for images)
   • Upload date
   • Uploader name
   • Direct URL
   • Actions (copy URL, delete)

Task 5: Getting File URL

1. Click on the file
2. In the details modal, find the URL field
3. Click Copy URL button
4. URL is copied to clipboard
5. Paste URL in your content editor

Task 6: Deleting Files

Single file:

1. Click on the file
2. In details modal, click Delete
3. Confirm deletion
4. File is permanently removed

Multiple files:

1. Select multiple files (if bulk selection is available)
2. Click Bulk Delete button
3. Confirm deletion
4. All selected files are removed

Warning: Deletion is permanent and cannot be undone.

Task 7: Creating Folders

1. Click Create Folder button (if available)
2. Enter folder name
3. Click Create
4. Folder appears in folder list

Or simply specify folder name when uploading files.

Task 8: Using Media in Content

1. Find and click the desired file
2. Copy the file URL
3. In your content editor (pages, posts, etc.):
   • For images: Use in image fields or HTML <img> tags
   • For documents: Create download links
   • For videos: Embed using video players
4. Paste the URL in the appropriate field

Settings and Options

Upload Options

Files

• Type: File input (multiple)
• Required: Yes
• Max Size: 10MB per file (configurable)
• Accepted Formats: Images, videos, documents
• Description: Select one or more files to upload

Folder

• Type: Text
• Required: No
• Default: "general"
• Description: Destination folder for uploaded files
• Example: "images", "documents/pdfs", "media/videos"

Optimize Images

• Type: Checkbox
• Default: Checked
• Description: Compress and resize images for web
• Effect: Reduces file size, improves load times

Create WebP

• Type: Checkbox
• Default: Checked
• Description: Generate WebP versions of images
• Effect: Creates modern format for better performance

Generate Thumbnails

• Type: Checkbox
• Default: Checked
• Description: Create thumbnail versions of images
• Effect: Generates smaller preview images

Quality

• Type: Number
• Default: 85
• Range: 1-100
• Description: Image compression quality
• Note: Higher = better quality, larger file size

Max Width

• Type: Number
• Default: 1920
• Description: Maximum image width in pixels
• Note: Images larger than this are resized

Max Height

• Type: Number
• Default: 1080
• Description: Maximum image height in pixels
• Note: Images taller than this are resized

File Information

File Name

• Original name of the uploaded file
• Includes file extension

File Size

• Human-readable size (KB, MB)
• Calculated from actual file size

File Type

• Determined by file extension
• Categories: image, video, document

Dimensions

• Width x Height in pixels
• Only for image files

Upload Date

• Date and time file was uploaded
• Displayed in local timezone

Uploader

• User who uploaded the file
• Links to user profile

Permissions

• media.view: Can view and access media library
• media.upload: Can upload new files
• media.edit: Can edit file details
• media.delete: Can delete files

Tips and Best Practices

• Optimize Before Upload: Compress large images before uploading
• Descriptive Names: Use clear, descriptive file names
• Folder Organization: Create logical folder structure (images/products, documents/legal)
• File Formats: Use modern formats (WebP for images, MP4 for videos)
• Size Limits: Keep files under 5MB when possible
• Alt Text: Always provide alt text when using images in content
• Regular Cleanup: Delete unused files periodically
• Backup: Keep backups of important media files
• Naming Convention: Use consistent naming (lowercase, hyphens instead of spaces)
• Image Dimensions: Upload images at appropriate sizes for their use
• WebP Support: Enable WebP for better performance
• Thumbnails: Use thumbnails for listings and previews

Troubleshooting

Problem: Upload fails

Solution:

• Check file size is under limit (10MB default)
• Verify file format is supported
• Check server upload limits (php.ini settings)
• Ensure storage directory has write permissions
• Try uploading fewer files at once
• Check available disk space

Problem: Images not optimizing

Solution:

• Verify optimization option is checked
• Check that GD or Imagick extension is installed
• Try uploading smaller images
• Check server memory limits
• Review error logs for details

Problem: Cannot create folders

Solution:

• Check storage directory permissions
• Verify folder name doesn't contain invalid characters
• Ensure you have proper permissions
• Try creating folder through file system

Problem: Files not appearing after upload

Solution:

• Refresh the page
• Clear browser cache
• Check that upload completed successfully
• Verify files exist in storage directory
• Check folder filter settings

Problem: Cannot delete files

Solution:

• Verify you have delete permission
• Check if file is in use elsewhere
• Ensure file exists in storage
• Check file permissions on server
• Try deleting through file system

Problem: Broken image URLs

Solution:

• Verify storage symlink is configured: php artisan storage:link
• Check file exists in storage/app/public
• Ensure correct URL is being used
• Clear CDN cache if using CDN
• Check .htaccess or nginx configuration

Problem: Slow upload speeds

Solution:

• Upload fewer files at once
• Compress files before uploading
• Check internet connection speed
• Disable optimization temporarily
• Try different browser

Related Modules

• Pages: Use media library images in page content
• Landing Page: Upload images for landing page sections
• About Us: Upload team photos and company images
• Footer: Use media for footer logos and images
• Settings: Configure site logo and favicon from media library