From a42918cb4fb072623e950a52fc28525b9cb50ab0 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 16 May 2024 15:41:04 +0200 Subject: [PATCH] better thumbnails --- .../media/media/collection/media-collection.context.ts | 8 ++++++-- .../media/components/input-media/input-media.context.ts | 6 +++++- .../modals/media-picker/media-picker-modal.element.ts | 8 ++++++-- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.context.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.context.ts index ee33b64eea..dc58abba08 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.context.ts @@ -1,9 +1,10 @@ -import { UmbImagingRepository } from '@umbraco-cms/backoffice/imaging'; import type { UmbMediaCollectionFilterModel, UmbMediaCollectionItemModel } from './types.js'; import { UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS } from './views/index.js'; +import { UmbImagingRepository } from '@umbraco-cms/backoffice/imaging'; import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api'; import { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { ImageCropModeModel } from '@umbraco-cms/backoffice/external/backend-api'; export class UmbMediaCollectionContext extends UmbDefaultCollectionContext< UmbMediaCollectionItemModel, @@ -21,7 +22,10 @@ export class UmbMediaCollectionContext extends UmbDefaultCollectionContext< this.observe(this.items, async (items) => { if (!items?.length) return; - const { data } = await this.#imagingRepository.requestResizedItems(items.map((m) => m.unique)); + const { data } = await this.#imagingRepository.requestResizedItems( + items.map((m) => m.unique), + { height: 400, width: 400, mode: ImageCropModeModel.MIN }, + ); this.#thumbnailItems.setValue( items.map((item) => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.context.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.context.ts index 2d9b5b5249..4082e820eb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.context.ts @@ -10,6 +10,7 @@ import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api'; import { UmbImagingRepository } from '@umbraco-cms/backoffice/imaging'; +import { ImageCropModeModel } from '@umbraco-cms/backoffice/external/backend-api'; export class UmbMediaPickerContext extends UmbPickerInputContext< UmbMediaItemModel, @@ -31,7 +32,10 @@ export class UmbMediaPickerContext extends UmbPickerInputContext< this.#cardItems.setValue([]); return; } - const { data } = await this.#imagingRepository.requestResizedItems(selectedItems.map((x) => x.unique)); + const { data } = await this.#imagingRepository.requestResizedItems( + selectedItems.map((x) => x.unique), + { height: 400, width: 400, mode: ImageCropModeModel.MIN }, + ); this.#cardItems.setValue( selectedItems.map((item) => { diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts index ef3ff5241e..a3aa80888b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts @@ -1,4 +1,3 @@ -import { UmbImagingRepository } from '@umbraco-cms/backoffice/imaging'; import { type UmbMediaItemModel, UmbMediaItemRepository, UmbMediaUrlRepository } from '../../repository/index.js'; import { UmbMediaTreeRepository } from '../../tree/media-tree.repository.js'; import { UMB_MEDIA_ROOT_ENTITY_TYPE } from '../../entity.js'; @@ -6,8 +5,10 @@ import type { UmbMediaCardItemModel, UmbMediaPathModel } from './types.js'; import type { UmbMediaPickerFolderPathElement } from './components/media-picker-folder-path.element.js'; import type { UmbMediaPickerModalData, UmbMediaPickerModalValue } from './media-picker-modal.token.js'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; +import { UmbImagingRepository } from '@umbraco-cms/backoffice/imaging'; import { css, html, customElement, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import { ImageCropModeModel } from '@umbraco-cms/backoffice/external/backend-api'; const root: UmbMediaPathModel = { name: 'Media', unique: null, entityType: UMB_MEDIA_ROOT_ENTITY_TYPE }; @@ -63,7 +64,10 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement): Promise> { if (!items.length) return []; - const { data } = await this.#imagingRepository.requestResizedItems(items.map((item) => item.unique)); + const { data } = await this.#imagingRepository.requestResizedItems( + items.map((item) => item.unique), + { height: 400, width: 400, mode: ImageCropModeModel.MIN }, + ); return items.map((item): UmbMediaCardItemModel => { const url = data?.find((media) => media.unique === item.unique)?.url;