Manage Media Assets

Upload files to the Media Library, keep them organized in folders, and render them in Blade templates with responsive image support.

Step 1: Upload Files

1. Navigate to Media Library in the Admin sidebar.
2. Drag & drop files directly into the browser, or click the Upload button.
3. Kompass automatically generates multiple sizes and converts images to WebP and AVIF formats for faster loading.

Step 2: Organize with Folders

As your site grows, keep assets organized:

1. Click New Folder.
2. Give it a name (e.g., blog-headers).
3. Select files and use the Move action to place them inside the folder.

Step 3: Use Media in Blocks

When you use an "Image" field in a custom block, clicking it opens the Media Library.

1. Select your desired image.
2. Kompass stores the file ID.

In your Blade template, use the x-image component to render it with full responsive support:

@php
    $imageId = get_field('image', $item->datafield);
@endphp

@if($imageId)
    <x-image :id="$imageId" class="w-full h-auto rounded" />
@endif

Step 4: Troubleshooting Large Uploads

PHP Upload Limits

If you encounter errors when uploading large files, adjust your server's PHP configuration:

1. Locate your php.ini file.
2. Increase the following values:

   upload_max_filesize = 20M
   post_max_size = 20M

3. Restart your web server (Nginx/Apache).
4. Ensure your Livewire configuration (config/livewire.php) also allows the desired file size in the rules key.