Appearance

Media Library Module ​

The Media Library module allows you to upload, organize, and manage all media files (images, videos, documents) used throughout your website. This comprehensive guide covers all media management features.

Table of Contents ​

  1. Overview
  2. Accessing Media Library
  3. Uploading Files
  4. File Organization
  5. Managing Files
  6. Image Editing
  7. File Search and Filtering
  8. Bulk Operations
  9. Media Usage Tracking
  10. File Types and Limits

Overview ​

Features ​

  • ✅ Upload multiple file types
  • ✅ Folder-based organization
  • ✅ Image editing capabilities
  • ✅ File search and filtering
  • ✅ Bulk file operations
  • ✅ Media usage tracking
  • ✅ File metadata management
  • ✅ Responsive image handling
  • ✅ CDN integration support

Admin Routes ​

  • Media Library: /admin/media
  • File Manager: /admin/file-manager

Supported File Types ​

  • Images: JPG, PNG, GIF, SVG, WebP
  • Videos: MP4, WebM, MOV, AVI
  • Documents: PDF, DOC, DOCX, XLS, XLSX
  • Audio: MP3, WAV, OGG
  • Archives: ZIP, RAR

Accessing Media Library ​

From Admin Panel ​

  1. Log in to admin panel
  2. Navigate to Core → Media Library
  3. Or go directly to: /admin/media

Alternative Access ​

  • File Manager: /admin/file-manager
  • From Editors: Media picker in content editors

Permissions Required ​

  • View Media: view media permission
  • Upload Media: upload media permission
  • Delete Media: delete media permission
  • Manage Media: manage media permission

Uploading Files ​

Single File Upload ​

Method 1: Drag and Drop ​

  1. Open Media Library
  2. Drag file from computer
  3. Drop into upload area
  4. File uploads automatically
  5. Appears in library

Method 2: Click to Upload ​

  1. Click Upload Files button
  2. Select file from computer
  3. Click Open
  4. File uploads
  5. Appears in library

Multiple File Upload ​

  1. Click Upload Files
  2. Hold Ctrl (Windows) or Cmd (Mac)
  3. Select multiple files
  4. Click Open
  5. All files upload simultaneously

Note: Upload progress shown for each file

Upload to Folder ​

  1. Navigate to desired folder
  2. Click Upload Files
  3. Select files
  4. Files upload to current folder

Upload Settings ​

File Naming ​

Options:

  • Keep Original: Use original filename
  • Sanitize: Clean filename (remove special chars)
  • Rename: Custom naming pattern

Image Processing ​

Automatic:

  • Generate thumbnails
  • Create multiple sizes
  • Optimize file size
  • Extract metadata

File Organization ​

Folders ​

Creating Folders ​

  1. Click New Folder button
  2. Enter folder name
  3. Select parent folder (optional)
  4. Click Create
  5. Folder appears in library

Folder Structure ​

Hierarchical Organization:

Media Library/
├── Images/
│   ├── Products/
│   ├── Blog/
│   └── Pages/
├── Videos/
├── Documents/
└── Archives/

Managing Folders ​

  • Rename: Right-click → Rename
  • Delete: Right-click → Delete (must be empty)
  • Move: Drag to new location

Moving Files ​

Drag and Drop ​

  1. Select file(s)
  2. Drag to destination folder
  3. Drop in folder
  4. File(s) moved

Move Dialog ​

  1. Select file(s)
  2. Click Move button
  3. Choose destination folder
  4. Click Move
  5. File(s) relocated

File Organization Tips ​

  1. Use Descriptive Names:

    • Name files clearly
    • Include dates if relevant
    • Use consistent naming

  2. Create Logical Folders:

    • Organize by content type
    • Group related files
    • Use subfolders for detail

  3. Regular Cleanup:

    • Remove unused files
    • Archive old files
    • Maintain organization

Managing Files ​

File Information ​

View File Details ​

  1. Click on file
  2. View details panel:
    • Filename: Original name
    • File Size: File size
    • Dimensions: Image dimensions (if image)
    • Upload Date: When uploaded
    • Uploaded By: User who uploaded
    • File Type: MIME type
    • URL: File URL

Edit File Information ​

  1. Select file
  2. Click Edit or Info
  3. Modify:
    • Title: Display title
    • Alt Text: Alternative text (images)
    • Caption: File caption
    • Description: File description
  4. Click Save

File Actions ​

View File ​

  • Click file thumbnail
  • Opens in lightbox/viewer
  • See full-size version
  • View file details

Download File ​

  1. Select file
  2. Click Download
  3. File downloads to computer

Delete File ​

  1. Select file
  2. Click Delete
  3. Confirm deletion
  4. Warning: Check usage first
  5. File removed

Copy File URL ​

  1. Select file
  2. Click Copy URL
  3. URL copied to clipboard
  4. Paste where needed

Image Editing ​

Basic Editing ​

Crop Image ​

  1. Select image
  2. Click Edit → Crop
  3. Adjust crop area
  4. Click Apply
  5. Save changes

Resize Image ​

  1. Select image
  2. Click Edit → Resize
  3. Enter dimensions:
    • Width: New width
    • Height: New height
    • Maintain Aspect Ratio: Keep proportions
  4. Click Apply
  5. Save changes

Rotate Image ​

  1. Select image
  2. Click Edit → Rotate
  3. Choose rotation:
    • 90° Clockwise
    • 90° Counter-clockwise
    • 180°
  4. Click Apply
  5. Save changes

Advanced Editing ​

Image Filters ​

  • Brightness: Adjust brightness
  • Contrast: Adjust contrast
  • Saturation: Adjust color saturation
  • Sharpen: Enhance sharpness

Image Effects ​

  • Grayscale: Convert to black and white
  • Sepia: Apply sepia tone
  • Blur: Apply blur effect

Image Optimization ​

Automatic Optimization ​

  • Compress images on upload
  • Generate WebP versions
  • Create responsive sizes
  • Optimize file size

Manual Optimization ​

  1. Select image
  2. Click Optimize
  3. Choose quality level
  4. Click Optimize
  5. Optimized version saved

File Search and Filtering ​

Search Files ​

Text Search ​

  1. Enter search term in search box
  2. Search by:
    • Filename
    • Title
    • Alt text
    • Description
  3. Results update in real-time

Filters:

  • File Type: Images, Videos, Documents
  • Date Range: Upload date
  • Size Range: File size
  • Folder: Specific folder
  • Uploaded By: User filter

Filtering ​

By File Type ​

  1. Click Filter → File Type
  2. Select type:
    • Images
    • Videos
    • Documents
    • Audio
    • All Files
  3. View filtered results

By Date ​

  1. Click Filter → Date
  2. Select:
    • Today
    • This Week
    • This Month
    • Custom Range
  3. View filtered files

By Folder ​

  1. Navigate to folder
  2. View files in folder only
  3. Or use folder filter

Bulk Operations ​

Selecting Files ​

Select Multiple ​

  • Checkbox: Click checkbox on each file
  • Select All: Checkbox in header
  • Select Page: Select all on current page
  • Keyboard: Ctrl/Cmd + Click

Bulk Actions ​

Bulk Delete ​

  1. Select multiple files
  2. Click Bulk Actions → Delete
  3. Confirm deletion
  4. Warning: Check usage first
  5. All selected files deleted

Bulk Move ​

  1. Select files
  2. Click Bulk Actions → Move
  3. Choose destination folder
  4. Click Move
  5. All files moved

Bulk Edit ​

  1. Select files
  2. Click Bulk Actions → Edit
  3. Modify common fields:
    • Alt text
    • Title
    • Description
  4. Click Save
  5. Changes applied to all

Media Usage Tracking ​

Where Files Are Used ​

View Usage ​

  1. Select file
  2. Click Usage or Where Used
  3. See list of:
    • Pages using file
    • Posts using file
    • Products using file
    • Other content using file

Usage Information ​

  • Content Type: What's using the file
  • Content Title: Name of content
  • Usage Date: When added
  • Link: Direct link to content

Benefits ​

  • Safe Deletion: Know what will break
  • Content Audit: Find all uses
  • Replacement: Find files to replace
  • Cleanup: Identify unused files

File Types and Limits ​

Supported File Types ​

Images ​

Formats:

  • JPG/JPEG: Photos, complex images
  • PNG: Graphics with transparency
  • GIF: Animated images, simple graphics
  • SVG: Vector graphics
  • WebP: Modern optimized format

Recommendations:

  • Use JPG for photos
  • Use PNG for graphics with transparency
  • Use WebP for modern browsers
  • Optimize all images

Videos ​

Formats:

  • MP4: Most compatible
  • WebM: Modern browsers
  • MOV: QuickTime format
  • AVI: Legacy format

Recommendations:

  • Use MP4 for maximum compatibility
  • Compress videos before upload
  • Consider hosting on YouTube/Vimeo

Documents ​

Formats:

  • PDF: Documents, forms
  • DOC/DOCX: Word documents
  • XLS/XLSX: Excel spreadsheets
  • PPT/PPTX: PowerPoint presentations

File Size Limits ​

Default Limits ​

  • Images: 10MB per file
  • Videos: 100MB per file
  • Documents: 50MB per file
  • Total Upload: Varies by server

Increasing Limits ​

PHP Settings:

ini
upload_max_filesize = 64M
post_max_size = 64M
max_file_uploads = 20

Server Configuration:

  • Contact hosting provider
  • Increase server limits
  • Configure for large files

Storage Configuration ​

Storage Locations ​

Local Storage ​

  • Files stored on server
  • Path: storage/app/public
  • Accessible via: public/storage
  • Default storage method

Cloud Storage ​

Supported:

  • Amazon S3
  • DigitalOcean Spaces
  • Google Cloud Storage
  • Azure Blob Storage

Configuration:

  1. Go to Settings → Storage
  2. Select storage driver
  3. Enter credentials
  4. Test connection
  5. Save settings

Storage Best Practices ​

  1. Regular Backups:

    • Backup media files
    • Store off-server
    • Test restores

  2. Organization:

    • Use folders effectively
    • Name files clearly
    • Regular cleanup

  3. Optimization:

    • Compress images
    • Use appropriate formats
    • Remove unused files

Tips and Best Practices ​

File Management ​

  1. Organize Early:

    • Create folder structure first
    • Use consistent naming
    • Group related files

  2. Optimize Files:

    • Compress images before upload
    • Use appropriate formats
    • Remove unnecessary files

  3. Use Alt Text:

    • Describe images accurately
    • Include keywords
    • Improve SEO and accessibility

Performance ​

  1. Image Optimization:

    • Use WebP when possible
    • Compress images
    • Use appropriate sizes

  2. Lazy Loading:

    • Enable lazy loading
    • Improve page speed
    • Better user experience

  3. CDN Usage:

    • Use CDN for media
    • Faster load times
    • Reduced server load

Troubleshooting ​

Upload Fails ​

Solutions:

  1. Check file size limits
  2. Verify file type is allowed
  3. Check server permissions
  4. Increase PHP limits
  5. Check disk space

Files Not Displaying ​

Solutions:

  1. Check file permissions
  2. Verify storage link exists
  3. Clear cache
  4. Check file URLs
  5. Verify file exists

Slow Uploads ​

Solutions:

  1. Compress files before upload
  2. Check internet connection
  3. Increase PHP timeout
  4. Use chunked uploads
  5. Check server resources

Last Updated: [Date will be updated during final review]

Released under the MIT License.

Copyright © 2024 OmniSuite CMS