yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better thumbnails

Browse Source
This commit is contained in:
Lone Iversen
2024-05-16 15:41:04 +02:00
parent 2c18b2ba4a
commit a42918cb4f
3 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.context.ts
View File

@@ -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) => {

6
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-media/input-media.context.ts
View File

@@ -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) => {

8
src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts
View File

@@ -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<UmbMediaPick
async #mapMediaUrls(items: Array<UmbMediaItemModel>): Promise<Array<UmbMediaCardItemModel>> {
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;