ICT:D Media-Library uploading one file in an Asset

Media Library use in Asset for uploading ONE single media file

Media field edit in Asset

• is an Entity Reference to Media with types: Audio, Document, Image and Video
• Required field
• Referencemethod to default
• Limited to 1 (very important - one asset one file)

Media in Manage form display

• Widget = Media Library
• Tab order: Image, Document, Video, Audio

Media in Manage display

• View mode = Media Library

After this configurtion there is an important GUI finetuning needed to simplify the interface and mask unneeded filters and buttons. Therefor the next chapter is very important.

Media Library Widget UI Simplification (CSS Overrides)

Purpose

This document records the CSS overrides applied to the **Drupal Media Library widget** to simplify the user interface for editors.

The goal is to:

• reduce cognitive load
• hide internal mechanics (filters, buttons)
• provide a clean, focused media selection experience
• preserve full Media Library functionality

These overrides are **intentional**, **documented**, and **part of the UI contract**.

---

Context

The Media Library widget is powered by:

• a Drupal View (for listing media)
• exposed filters (search, filtering)
• a jQuery UI modal dialog

By default, the UI exposes:

• filter forms
• layout switches
• confirmation button bars

For this project, these elements are **not required** and confuse users.

---

Design Principle

Editors should:

• focus on selecting or replacing a single media item
• not be exposed to filtering mechanics
• not be presented with redundant confirmation actions

Filtering and constraints are applied **silently** via Views configuration.

---

Applied CSS Overrides

The following CSS rules are applied to the admin theme (e.g. gin-custom.css).

1. Hide the exposed filter form

/* Hide the Views exposed filter form inside Media Library */
.media-library-view .views-exposed-form {
  display: none !important;
}

Effect:

• Removes the visible filter form from the Media Library modal
• Filters continue to work internally
• Prevents users from interacting with unintended controls

---

2. Hide the dialog button bar (Select / Cancel)

/* Hide the bottom button bar in the Media Library modal */
.ui-dialog--media-library .ui-dialog-buttonpane {
  display: none !important;
}

Effect:

• Removes the redundant “Select / Cancel” button pane
• Selection happens directly via clicking media items
• Avoids duplicate confirmation paths

Note:

• Media Library uses jQuery UI dialogs
• Hiding the button pane via CSS is a supported and safe approach

---

3. Hide the Grid / Table display switch

/* Hide the Grid / Table view switch */
.media-library-view--display-switch {
  display: none !important;
}

Effect:

• Enforces a single, consistent layout
• Removes unnecessary UI choices
• Simplifies training and usage

---

What These Overrides Do NOT Do

These CSS rules:

• do NOT affect data
• do NOT alter Media entities
• do NOT disable Media Library functionality
• do NOT change Views filtering logic
• do NOT interfere with file replacement

They are **presentation‑only**.

---

Operational Notes

• These CSS rules are required for correct UI behavior
• Removing them may:

 * reintroduce clutter
 * confuse editors
 * appear to “break” Media Library UX

• They must be restored after experiments or refactoring

---

Maintenance Recommendation

Maintain a dedicated section in documentation for:

• UI‑level CSS overrides
• why they exist
• where they are applied

This prevents accidental removal during future development.

---

Summary

Area	Decision
Media selection UI	Simplified via CSS
Filters	Hidden visually, active internally
Confirmation buttons	Removed to avoid redundancy
Layout switching	Disabled for consistency
Impact	UI only, no data or logic changes

---