Add an inline image in RichText

I am using Prismic's RichText editor to add a paragraph with an image in it. However, when I grab it in the backend and use PrismicDOM.RichText.asHtml to display it in my html code, the image is displayed under a separate paragraph <p> tag. What I want is to have my image included under the same paragraph tag as the text before and after it. Any ideas how I can do that? Is there something in the rich text editor that I can set, or this needs to be taken care of in the frontend of my website using javascript or css?

Hi @akbzanj,

Thanks for posting this question, and welcome to the Prismic community forum :slight_smile:

I think the only way to handle this is with JavaScript in your project code. You might be able to handle it with a higher-order HTML Serializer. Instead of passing an HTML Serializer to the asHtml method, you pass a higher-order function invocation, which accepts a Rich Text object as an argument and returns an HTML Serializer function. That way you can manipulate the entire Rich Text object. Here's an example of how to do that:

Let me know if that helps!


1 Like

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