Using custom ImageSet in spa sdk

Experience Manager (PaaS/OnPrem)
1

Hello again,

We are using the react-sdk and now we created some custom image sets, following these docs: Configure Image Variants - Bloomreach Experience Manager (PaaS/Self-Hosted) - The Fast and Flexible Headless CMS They are properly serialized and returned from the resource api, but when extracting the data in the frontend, it appears that there’s no method on the ImageSet to get a custom size, there’s only the getOriginal and getThumbnail method.

Is there another way to get the custom image size, or to extend the ImageSet or would it then be better to not use the ImageSet and just create a custom type for it?

Kind regards, Ineke

1 Like
2

You need to generate custom image set beans. You can use the essentials beanwriter tool to generate these.

3

Hmm, we did and we also get the correct response from the API, but the problem is in the SPA frontend. The ImageSetImpl there only has getOriginal() and getThumbnail() methods and there doesn’t seem to be any way to use the other image sizes.

4

If you are getting the additional imageset sizes in the API, you should be able to retrieve those values in the front end. Could you share how you are trying to retrieve this?

5

We are using react + typescript, then to get the image url we do this: page.getContent<ImageSet>(imageReference)?.getOriginal()?.getUrl(). ImageSet is imported like this: import {ImageSet} from "@bloomreach/spa-sdk";

Ideally I would like to do something like: page.getContent<ImageSet>(imageReference)?.getSmall()?.getUrl()
or:
page.getContent<ImageSet>(imageReference)?.getCustomSize('small')?.getUrl()

We could probably extract the data if we create a custom interface and using that for getting the content:

interface CustomImageSet {
 original: Image;
 small: Image;
}

and then:
page.getContent<CustomImageSet>(imageReference)?.small?.getUrl()

But then we can’t use the other methods from the ImageSetImpl anymore…I was just wondering if there isn’t a better way to do this.

6

I guess as a workaround you could do something like this:

const imageSet = props.page?.getContent<
  ImageSet & {
    model: any; // the raw model
    original: Image;
    small: Image;
    getSmall(): Image | undefined;
  }
>(imageReference);

if (imageSet) {
  imageSet.small = Object.create(
    imageSet.original,
    {
      model: {
        value: imageSet.model.data.small, // data from the raw model
        writable: false,
        enumerable: true,
        configurable: true,
      },
    }
  );
  imageSet.getSmall = () => {
    return imageSet.small;
  };
}

const smallImage = imageSet?.getSmall()?.getUrl() || "";