diff --git a/content/guides/media-library/media-library-setup/index.md b/content/guides/media-library/media-library-setup/index.md index f5b0d74329..3b1eab6a5c 100644 --- a/content/guides/media-library/media-library-setup/index.md +++ b/content/guides/media-library/media-library-setup/index.md @@ -31,14 +31,16 @@ Below you can see an example configuration. ```js // In editorSettings dashboards: [ - type: 'mediaLibraryDashboard', // Required - handle: 'myMediaLibraryDashboard', // Required, must be unique - assetType: 'mediaImage', // Required: Finds available mediaTypes when not filtered by baseFilters - pageTitle: 'Images', // Optional, sets the title in the top toolbar, defaults to a generic title for the mediaType - baseFilters: [{key: 'mediaType', term: ['image1', 'image2']}], // Optional: Invisible base filters applied to every search (including the default result list) - displayFilters: [{filterName: 'liDateTimeRange'}], // Optional: Filters shown to the user below the search input - sort: 'updated_at', // Optional: Defaults to 'updated_at' - useCard: 'myImageCard' // Optional: References an existing DashboardCardConfiguration + { + type: 'mediaLibraryDashboard', // Required + handle: 'myMediaLibraryDashboard', // Required, must be unique + assetType: 'mediaImage', // Required: Finds available mediaTypes when not filtered by baseFilters + pageTitle: 'Images', // Optional, sets the title in the top toolbar, defaults to a generic title for the mediaType + baseFilters: [{key: 'mediaType', term: ['image1', 'image2']}], // Optional: Invisible base filters applied to every search (including the default result list) + displayFilters: [{filterName: 'liDateTimeRange'}], // Optional: Filters shown to the user below the search input + sort: 'updated_at', // Optional: Defaults to 'updated_at' + useCard: 'myImageCard' // Optional: References an existing DashboardCardConfiguration + } ] ``` @@ -66,7 +68,7 @@ To do so, add the card’s handle here. ([Read more about dashboard cards]({{< r Before [release-2026-01]({{< ref "/operations/releases/release-2026-01#media-library-dashboards" >}}), it was only possible to have a single Media Library per media category: Images, Videos, and Files. The [Main Navigation]({{< ref "/reference/project-config/editor-settings#main-navigation" >}}) automatically included entries for Images, Videos, and Files when a `liItem: 'mediaLibrary'` entry was present in the `mainNavigation` configuration and at least one corresponding Media Type existed. Both [Base Filters]({{< ref "/customising/advanced/editor-configuration/base-filter" >}}) and [Display Filters]({{< ref "/customising/advanced/editor-configuration/display-filter" >}}) were defined on the Media Type ([legacy example]({{< ref "/reference/project-config/media-type-example-legacy" >}})). They could be defined individually for the Media Library shown in the document editor and for the Media Library accessible via the main navigation. -While this approach is not yet deprecated, we encourage using the new Media Library Dashboard Configuration and referencing configured Media Library dashboards directly on the Content Type via [useDashboard]({{< ref "/reference/project-config/content-types#usedashboard" >}}) (see description above). +This approach has been deprecated in `release-2026-05` and will be removed in `release-2026-11`. We recommend using the new Media Library Dashboard Configuration and referencing configured Media Library dashboards directly on the Content Type via [useDashboard]({{< ref "/reference/project-config/content-types#usedashboard" >}}) (see description above). {{< /info >}} ## 2025 Behavior @@ -151,7 +153,7 @@ module.exports = { **Media Library Filters:**
**Legacy Media Type Configuration vs. Dashboard-Based Setup**

-Before [release-2026-01]({{< ref "/operations/releases/release-2026-01#media-library-dashboards" >}}), Display Filters and Base Filters were defined directly on the Media Type. While this approach has not yet been deprecated, we recommend configuring the Media Library via a dedicated Media Library Dashboard (see section beginning) and referencing that dashboard from the Content Type, which shows your Images/Videos/Files. +Before [release-2026-01]({{< ref "/operations/releases/release-2026-01#media-library-dashboards" >}}), Display Filters and Base Filters were defined directly on the Media Type. This approach has been deprecated in `release-2026-05` and will be removed in `release-2026-11`. We recommend configuring the Media Library via a dedicated Media Library Dashboard (see the section above) and referencing that dashboard from the Content Type, which shows your Images/Videos/Files. When using this new setup, any Display Filters and Base Filters defined on the Media Type are automatically ignored for _Media Library dashboards opened from the Main Navigation_. For _Media Library dashboards opened from the document editor_, Display Filters and Base Filters are instead resolved from the [referenced Media Library dashboard]({{< ref "/reference/project-config/content-types#usedashboard" >}}) (`useDashboard`), if one is configured. For reference, the legacy configuration is documented here: [Basic Media Type example before release-2026-01]({{< ref "/reference/project-config/media-type-example-legacy" >}}). @@ -480,7 +482,8 @@ module.exports = { } ], editor: { - // the dashboard seen by users when opening Images/Videos from the document editor + // Deprecated since release-2026-05, will be removed in release-2026-11. + // Use useDashboard on the content type instead. dashboard: { displayFilters: [{filterName: 'liDateTimeRange'}] }, @@ -518,7 +521,7 @@ module.exports = { info: { label: 'Poster Images' }, - hidden: true, // This makes sure these images are not shown in the regular Image Library + hidden: true, // Deprecated since release-2026-05, will be removed in release-2026-11 metadata: [ { handle: 'title', diff --git a/content/operations/releases/release-2026-05-media-library-tabs.png b/content/operations/releases/release-2026-05-media-library-tabs.png new file mode 100644 index 0000000000..163e1c56cb Binary files /dev/null and b/content/operations/releases/release-2026-05-media-library-tabs.png differ diff --git a/content/operations/releases/release-2026-05.md b/content/operations/releases/release-2026-05.md index 3d277dc97f..cd6dfb76fb 100644 --- a/content/operations/releases/release-2026-05.md +++ b/content/operations/releases/release-2026-05.md @@ -64,6 +64,7 @@ These are the release notes of the upcoming release (pull requests merged to the - :fire: Integration against the upcoming release (currently `main` branch) is at your own risk ## PRs to Categorize + - [Add Norwegian Translations](https://github.com/livingdocsIO/livingdocs-editor/pull/10892) - [fix(media cards): Top Info](https://github.com/livingdocsIO/livingdocs-editor/pull/10942) - [fix(deps): update dependency pusher-js from 8.4.3 to v8.5.0 (main)](https://github.com/livingdocsIO/livingdocs-editor/pull/10941) @@ -202,8 +203,79 @@ Please use the following replacements instead: ## Deprecations +### Auto-Generated Media Library Dashboards + +Auto-generated media library dashboards using `{liItem: 'mediaLibrary'}` are deprecated and will be removed in release-2026-11. Remove `{liItem: 'mediaLibrary'}` as well as `mediaTypes[].editor.managementDashboard` and `mediaTypes[].editor.dashboard` from the project config. + +Configure [media library dashboards]({{< ref "/guides/media-library/media-library-setup/#media-library-dashboard-configuration" >}}) instead. These dashboards can also be referenced in content types to configure the dashboards shown in media library sidepanels and media selection dialogs, using `contentTypes[].editor.images.useDashboard`, `contentTypes[].editor.videos.useDashboard`, or `contentTypes[].editor.files.useDashboard`. + +### `contentTypes[].editor.images.mediaTypes` + +Project config property `contentTypes[].editor.images.mediaTypes` is deprecated and will be removed in `release-2026-11`. It controlled which media types were shown in image sidepanels and dialogs. Configure a media library dashboard with the appropriate `baseFilters` instead. + +### `mediaTypes[].hidden` + +Project config property `mediaTypes[].hidden` is deprecated and will be removed in `release-2026-11`. To hide a media type from sidepanels and dialogs, exclude it with `baseFilters` instead. + +For poster image media types, we introduce `useDashboard` on `li-poster-image` and `posterImageUseDashboard` on `li-video-reference` metadata plugins. You can use these to configure which dashboards appear when selecting a poster image. By setting `baseFilters` on those dashboards, you can specify which media types appear. + ## Features :gift: +### Tabs in Media Library Sidepanels and Dialogs :gift: + +When editors open the image, video, or file sidepanel in a document, or use a media selection dialog, the media library is now organized into tabs. Each tab corresponds to a configured media library dashboard, a media source, or image collections (if enabled on the project). + +{{< img src="release-2026-05-media-library-tabs.png" alt="Media library sidepanel with tabs for dashboards, media sources, and image collections" caption="Media library sidepanel showing dashboards, media sources, and image collections as tabs." >}} + +This replaces the previous behavior where media was grouped by media type. The old appearance is [deprecated]({{< relref "#auto-generated-media-library-dashboards" >}}) and will be removed in `release-2026-11`. + +#### Configuration + +`contentTypes[].editor.images.useDashboard`, `contentTypes[].editor.videos.useDashboard`, and `contentTypes[].editor.files.useDashboard` now accept a single dashboard handle or an array of handles. Each dashboard in the array becomes a tab. + +```js +editor: { + images: {useDashboard: ['images', 'infographics']}, + videos: {useDashboard: 'reels'} +} +``` + +If no `useDashboard` is configured on a content type, a single "Feed" tab with all media grouped by type is shown instead. This is the old behavior and is now deprecated. + +For full configuration details, refer to the [Content Types reference]({{< ref "/reference/project-config/content-types#usedashboard" >}}). + +##### Image Collections + +For the dialog used to add an image to a collection, `imageCollections.useDashboard` also accepts an array of dashboard handles. + +```js +imageCollections: { + useDashboard: ['images', 'infographics'] +} +``` + +##### Poster Images + +For the dialog used to select a poster image for a video, we introduce `ui.config.useDashboard` on [`li-poster-image`]({{< ref "/reference/document/metadata/plugins/li-poster-image/" >}}) and `ui.config.posterImageUseDashboard` on [`li-video-reference`]({{< ref "/reference/document/metadata/plugins/li-video-reference/" >}}) metadata plugins. You can use these to configure which dashboards appear when selecting a poster image. + +### Allowed Media Types :gift: + +The new `contentTypes[].allowedMediaTypes` configuration enforces that only specific media types can be placed in a document. + +```js +allowedMediaTypes: { + mediaImage: ['myImage', 'myInfographic'], + mediaVideo: ['myVideo'], + mediaFile: ['myFile'] +} +``` + +If `allowedMediaTypes` is not configured, all media types are allowed (default behavior). + +It is possible to configure media library dashboards or image collections in sidepanels and dialogs in such a way that they show media types not listed in `allowedMediaTypes`. If a user tries to insert such an asset into a document, an error is shown. We recommend configuring dashboards with appropriate `baseFilters` so that only allowed media types are shown in the first place. + +For full configuration details, refer to the [Content Types reference]({{< ref "/reference/project-config/content-types#allowedmediatypes" >}}). + ## Vulnerability Patches We are constantly patching module vulnerabilities for the Livingdocs Server and Livingdocs Editor as module fixes are available. Below is a list of all patched vulnerabilities included in the release. diff --git a/content/reference/document/metadata/plugins/li-poster-image.md b/content/reference/document/metadata/plugins/li-poster-image.md index 782308a063..a1fc5b2f75 100644 --- a/content/reference/document/metadata/plugins/li-poster-image.md +++ b/content/reference/document/metadata/plugins/li-poster-image.md @@ -41,6 +41,17 @@ storageFormat: | ] } contentTypeConfig: |2 - handle: 'myHandle' + handle: 'myHandle', type: 'li-poster-image' + config: { + required: true, // optional, default: false + requiredErrorMessage: 'Provide a value', // optional + }, + ui: { + label: 'Poster Image', // optional + config: { + uploadMediaType: 'posterImage', // optional, default: 'image' + useDashboard: 'posterImagesDashboard', // optional + } + } --- diff --git a/content/reference/document/metadata/plugins/li-video-reference.md b/content/reference/document/metadata/plugins/li-video-reference.md index c8b4bc318b..9e269a36b3 100644 --- a/content/reference/document/metadata/plugins/li-video-reference.md +++ b/content/reference/document/metadata/plugins/li-video-reference.md @@ -32,7 +32,7 @@ storageFormat: | } } contentTypeConfig: |2 - handle: 'myHandle' + handle: 'myHandle', type: 'li-video-reference', config: { // common @@ -45,7 +45,8 @@ contentTypeConfig: |2 }, ui: { config: { - posterImageUploadMediaType: 'image2', // optional, default: 'image' + posterImageUploadMediaType: 'posterImage', // optional, default: 'image' + posterImageUseDashboard: 'posterImagesDashboard', // optional } } --- diff --git a/content/reference/project-config/content-types.md b/content/reference/project-config/content-types.md index c1441286e5..a7219ce5b9 100644 --- a/content/reference/project-config/content-types.md +++ b/content/reference/project-config/content-types.md @@ -80,6 +80,14 @@ contentTypes: [ } ], + // Restricts which media type handles can be placed in the document. + // If not set, all media types are allowed. + allowedMediaTypes: { + mediaImage: ['image'], + mediaVideo: ['video'], + mediaFile: ['file'] + }, + // Set the default mediaType handle to use for uploads, drag & drop etc. // The project config defaults will be used when these are not defined. defaultMediaTypes: { @@ -559,7 +567,12 @@ The above example disables direct image uploads to Livingdocs and allows only th ## Image Media Type Restrictions -{{< added-in "release-2025-09" >}} +{{< added-in "release-2025-09" block >}} +{{< deprecated-in "release-2026-05" block >}} + +{{< warning >}} +`editor.images.mediaTypes` is deprecated and will be removed in `release-2026-11`. Use [`allowedMediaTypes.mediaImage`](#allowedmediatypes) instead. +{{< /warning >}} You can restrict image operations (upload, drag & drop, media library selection) to specific media types for each content type using the `editor.images.mediaTypes` configuration. @@ -578,50 +591,51 @@ When configured, this content type will only allow image operations using the sp If not configured, all image media types are allowed (default behavior). -## useDashboard +## Allowed Media Types -{{< added-in "release-2026-01" >}} -
+{{< added-in "release-2026-05" block >}} -Together with the introduction of [Media Library Dashboards]({{< ref "/guides/media-library/media-library-setup/index#media-library-dashboard-configuration" >}}), we are introducing the `useDashboard` property for images, videos and files. -It determines which Media Library Dashboard is displayed for a specific media assetType (mediaImage, mediaVideo, or mediaFile) within a content type. +`allowedMediaTypes` restricts which media types can be dragged from the sidepanel or a dialog into a document. If a user drags a media item of a type not listed in `allowedMediaTypes` into the document, an error is shown. -Ultimately, `useDashboard` controls, which Media Library Dashboard is shown: - -- in the document editor side panel for the media type (can be opened via the toolbar elements image / video / file). -- in any dialog modal within the document editor that displays the media library. - -#### Behaviour without useDashboard +```js +{ + allowedMediaTypes: { + mediaImage: ['myImage', 'myInfographic'], + mediaVideo: ['myVideo'], + mediaVideo: ['myFile'] + } +} +``` -If **no** reference is configured, the displayed media library shows all available media types for images / videos / files, unless otherwise restricted. -If mediaTypes are configured in `content-type.editor.images.mediaTypes`, only those mediaTypes are shown. -This behavior applies only to images, cannot be combined with `useDashboard`, and will be deprecated in the future. -We therefore recommend using `useDashboard` instead. +## Media Library Sidepanels and Dialogs -#### Behavior with useDashboard +{{< added-in "release-2026-05" block >}} -If `useDashboard` is configured, the displayed media library shows all media types for the asset type defined on the referenced dashboard. -Both Base Filters and Display Filters configured on that dashboard are applied. +Use `editor.images.useDashboard`, `editor.videos.useDashboard`, and `editor.files.useDashboard` to configure which [Media Library Dashboards]({{< ref "/guides/media-library/media-library-setup/index#media-library-dashboard-configuration" >}}) are shown in the image, video, and file sidepanels and selection dialogs for a content type. Each dashboard, media source, and image collection appears as its own tab. -#### Example Config +{{< info >}} +In {{< release "release-2026-01" >}} and {{< release "release-2026-03" >}}, `useDashboard` is already supported but only accepts a single dashboard. In addition, media results are always grouped by media type. +{{< /info >}} ```js { handle: 'article', editor: { images: { - useDashboard: 'myImageLibrary', + useDashboard: ['images', 'infographics'], }, videos: { - useDashboard: 'myVideoLibrary', + useDashboard: 'reels', }, files: { - useDashboard: 'myFileLibrary' + useDashboard: 'epapers' } } } ``` +If `useDashboard` is not configured, all available media is shown in a single "Feed" tab and grouped by media type. This fallback behavior is deprecated and scheduled to change in `release-2026-11`. + ## Teaser Previews You can configure teaser previews for this content-type that are displayed on the publish panel, e.g. how an article will look like when referenced from the start page. This is useful for your editors to see the provided metadata in the real, visual context. diff --git a/content/reference/project-config/media-type-example-legacy.md b/content/reference/project-config/media-type-example-legacy.md index 7ff0cf173c..044b1e6181 100644 --- a/content/reference/project-config/media-type-example-legacy.md +++ b/content/reference/project-config/media-type-example-legacy.md @@ -5,7 +5,7 @@ excludeFromSearch: true --- {{< warning >}} -Before [release-2026-01]({{< ref "/operations/releases/release-2026-01#media-library-dashboards" >}}), Display Filters and Base Filters were defined directly on the Media Type, as shown in the example below. While this approach has not yet been deprecated, we recommend configuring the Media Library via a dedicated Media Library Dashboard ([See Media Library Setup Guide]({{< ref "/guides/media-library/media-library-setup/index" >}})) and referencing that dashboard from the Content Type, which shows your Images/Videos/Files. +Before [release-2026-01]({{< ref "/operations/releases/release-2026-01#media-library-dashboards" >}}), Display Filters and Base Filters were defined directly on the Media Type. This approach has been deprecated in `release-2026-05` (and will be removed in `release-2026-11`) for media library panels, but not yet for management dashboards. We recommend configuring the Media Library via a dedicated Media Library Dashboard ([See Media Library Setup Guide]({{< ref "/guides/media-library/media-library-setup/index" >}})) and referencing that dashboard from the Content Type, which shows your Images/Videos/Files. When using this new setup, any Display Filters and Base Filters defined on the Media Type are automatically ignored for Media Library dashboards opened from the Main Navigation. For Media Library dashboards opened from the document editor, Display Filters and Base Filters are instead resolved from the [referenced Media Library dashboard]({{< ref "/reference/project-config/content-types#usedashboard" >}}), if one is configured. {{< /warning >}} @@ -70,7 +70,9 @@ module.exports = { } ], editor: { - // the dashboard seen by users when opening Images from the document editor + // Deprecated since release-2026-05, will be removed in release-2026-11. + // Use useDashboard on the content type instead. + // The dashboard seen by users when opening Images from the document editor. dashboard: { displayFilters: [ { @@ -82,6 +84,7 @@ module.exports = { }, baseFilters: [{key: 'metadata.transformed', term: true}] }, + // Deprecated since release-2026-05, will be removed in release-2026-11. // the dashboard opened through the main navigation // `card`and `baseFilters` could also be added here managementDashboard: { diff --git a/content/reference/project-config/media-types.md b/content/reference/project-config/media-types.md index 5673699a7d..13e00fabd5 100644 --- a/content/reference/project-config/media-types.md +++ b/content/reference/project-config/media-types.md @@ -166,7 +166,7 @@ mediaTypes: [{ {{< info >}} **Media Library Filters: Legacy Media Type Configuration vs. Dashboard-Based Setup**

-Before [release-2026-01]({{< ref "/operations/releases/release-2026-01#media-library-dashboards" >}}), Display Filters and Base Filters were defined directly on the Media Type. While this approach has not yet been deprecated, we recommend configuring the Media Library via a dedicated Media Library Dashboard (see [Media Library Dashboard Configuration]({{< ref "/guides/media-library/media-library-setup/index#media-library-dashboard-configuration" >}})). +Before [release-2026-01]({{< ref "/operations/releases/release-2026-01#media-library-dashboards" >}}), Display Filters and Base Filters were defined directly on the Media Type. This approach has been deprecated in `release-2026-05` and will be removed in `release-2026-11`. We recommend configuring the Media Library via a dedicated Media Library Dashboard (see [Media Library Dashboard Configuration]({{< ref "/guides/media-library/media-library-setup/index#media-library-dashboard-configuration" >}})). When using this new setup, any Display Filters and Base Filters defined on the Media Type are automatically ignored for _Media Library dashboards opened from the Main Navigation_. For _Media Library dashboards opened from the document editor_, Display Filters and Base Filters are instead resolved from the [referenced Media Library dashboard]({{< ref "/reference/project-config/content-types#usedashboard" >}}) (`useDashboard`), if configured on the content-type.