Changing the image size in Rich Text Editor

Prismic for Content Creators
1

Hi All,

I've been using Prismic on a number of projects but have only recently come across the problem of not been able to resize the image when its added into the RTE.

Is this possible to do as my client is uploading large photos and then wanting to resize them as dont want to load a 3000x3000 photo.

Thanks in advance.
Tom

2

Hello Tom, welcome to the Prismic community forum!

Prismic allows you to customize your images in many ways.

You can start by configuring different Image sizes from the Custom type builder while editing your Image field. This will allow you to have responsive views:

Then, inside your documents, and with your new added sizes you can go ahead and reframe, zoom, and/or crop your images as you like using the editing tool:

Finally, If you want a more detailed configuration to be added to your images, you can take advantage of the Image Optimisation feature. The Imgix integration gives you even more editing possibilities!

3

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

5

Re-opened for @developers3:

7

Hi @developers3,

You can't set image views for images inside the Rich Text field in the Prismic UI, but thanks to our Imgix integration you can create srcsets for images in the HTML serializer of your project. These will act as responsive views for any images in the rich text field and adapt accordingly.

You can read more about editing you HTML serializer here:

Then you can see how to implement srcsets here:

Even better would be to build your pages using slices and add images with the image field whenever you need it. So if you have three slices you could build very advanced layouts.

For example if you have 1 x [Rich Text Slice], 1 x [Image Slice], 1 x [Image + Text Slice], you can use these to build whatever you need like so:

[Rich Text Slice]
[Image + Text Slice]
[Rich Text Slice]
[Image Slice]
[Rich Text Slice]

This way you have full control over how the page looks and the responsiveness of the images. This is how we build our multi page example project:

Let me know if you need me to explain this further.

Thanks.