Get the media image parameters of height, width and other properties in custom block Grid preview

Questions
, ,
3

I can recommend using the <umb-imaging-thumbnail /> element to render images. It supports width, height, and crop mode, and it handles the whole requestThumbnailUrls from the repository. I think you can shave most of your block view away:

import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { PlTextStyles } from '../../styles/site.pl.styles';
import type { UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/block-custom-view';
import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
import { html, customElement, property, css, state, repeat} from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
import { UmbBlockGridTypeModel } from '@umbraco-cms/backoffice/block-grid';
// for images
import type { UmbMediaPickerPropertyValueEntry } from '@umbraco-cms/backoffice/media';

interface MyBlockContent extends UmbBlockDataType {
    image?: Array<UmbMediaPickerPropertyValueEntry>;
}

const elementName = "image-block";

// eslint-disable-next-line local-rules/enforce-umb-prefix-on-element-name
@customElement(elementName)
// eslint-disable-next-line local-rules/umb-class-prefix
export class ImageBlockCustomView
    extends UmbElementMixin(UmbLitElement)
    implements UmbBlockEditorCustomViewElement
{

    @property({ attribute: false })
    content?: MyBlockContent;

    @property({ attribute: false })
    settings?: UmbBlockDataType;

    @state()
    blockType?: UmbBlockGridTypeModel;

    override render() {
        return html`
            <h5>My Custom View</h5>
            ${repeat(
                this.content?.image ?? [], 
                (image) => image.key,
                (image) => 
                    html`<umb-imaging-thumbnail class="thumbnail" width="300" height="300" mode="crop" unique=${image.mediaKey} alt="Logo"></umb-imaging-thumbnail>`
            )}
        `;
    }

    static override styles = [
        UmbTextStyles,
        PlTextStyles,
        css`
	    :host {
                display: block;
                height: 100%;
                box-sizing: border-box;
                border-radius: 9px;
                padding: 12px;
            }

            .thumbnail {
                max-width: 300px;
                max-height: 300px;
            }
		`,
    ];
}

export default ImageBlockCustomView;

declare global
{
    interface HTMLElementTagNameMap
    {
        [elementName]: ImageBlockCustomView;
    }
}

Notice how a custom interface resolves the image property and that we are passing different parameters to the imaging element.