Media Library

The Media Library is Website Studio's central place to upload, organize, and reuse images, videos, and documents on your public website. Anything you upload here can be inserted into hero sections, content blocks, galleries, staff photos, and more through the built-in Media Picker.

Accessing the Media Library

1. Go to Website Studio from the left sidebar.
2. Click Media Library on the dashboard, or navigate to Website Studio > Media directly.

The library shows a paginated grid of every file in your church's media library along with quick stats (total files, images, videos, total disk used).

Uploading Files

1. Click Upload (or drag files onto the upload area).
2. Pick which folder to upload into (see Folders below).
3. Select one or many files and confirm.

Allowed File Types

Uploads are validated against the file's actual content (not just its extension). The following MIME types are accepted:

• Images: JPEG, PNG, GIF, WebP, SVG
• Videos: MP4, WebM, QuickTime (.mov)
• Documents: PDF, Word (.doc, .docx), Excel (.xls, .xlsx)
• Audio: MP3, WAV, OGG

Files with mismatched or unsupported MIME types are rejected and a warning is logged.

File Size Limit

Each individual file must be 20 MB or smaller. For larger video files (sermons, services), use the Sermons module or embed from YouTube/Vimeo via the Embed or Livestream sections instead.

Image Processing

When you upload an image (JPG, PNG, GIF, or WebP), Website Studio automatically:

• Reads the image dimensions and stores them with the file.
• Generates a thumbnail (max 400 x 400 pixels) used in pickers and listings.

SVGs are accepted but not thumbnailed -- they are served directly.

Folders

Files are organized into folders to keep large libraries manageable. The default folders are:

You can filter the library by folder using the Folder dropdown at the top of the page.

Note: Folder names are fixed at the system level. You cannot rename or add new folders from the UI today.

Searching and Filtering

Use the toolbar at the top of the library to narrow results:

• Search -- Match against file title, original filename, or alt text.
• Folder -- Show only files in one folder.
• Type -- Show only Images, Videos, or Documents.

Editing File Details

Click any file in the library to open its detail view. From there you can update:

• Title -- A friendly name shown in pickers (defaults to the original filename).
• Alt Text -- Important for accessibility and SEO. Describe what the image shows.
• Folder -- Move the file to a different folder.

Click Save to apply changes.

Bulk Operations

The library supports two bulk actions for managing many files at once.

Bulk Delete

1. Select files using their checkboxes.
2. Click Delete Selected.
3. Confirm the deletion.

Each deleted file's record is removed and its underlying files (and any thumbnails) are removed from storage.

Bulk Move

1. Select files using their checkboxes.
2. Click Move to Folder and pick the destination folder.
3. The selected files are reassigned to that folder.

Important: Deleting a media file is immediate and permanent. If the file was used inside a section's content (for example, as a hero background), that reference will break and you will need to upload a replacement.

Media Picker (Reusing Files in Sections)

Anywhere a section accepts an image -- hero background, content block image, staff photo, gallery, etc. -- you will see a "Choose from Media Library" button. Clicking it opens the Media Picker, a lightweight modal that reads from the same library:

1. The picker shows recent uploads in a thumbnail grid.
2. Filter by folder, search by name, or filter to images only.
3. Click an image to insert it into the section.

The picker is also where you can upload a new file inline -- new uploads are immediately available everywhere in your library.

Best Practices

• Set descriptive alt text on every image. It helps screen readers and improves SEO.
• Use the right folder -- it makes the picker dramatically faster on larger libraries.
• Optimize before uploading. A 4 MB photo straight off a phone takes longer to load than a 400 KB optimized version. Tools like Squoosh, TinyPNG, or your phone's "share resized" option can help.
• Use SVG for logos and icons -- they scale perfectly and stay tiny.
• Reuse, don't re-upload. Always check the library before uploading a new copy of an image you already have.

Next Steps

• Website Sections -- See where uploaded media gets used
• Staff Directory -- Photos used here come from the Staff Photos folder