Add an inline image in RichText

[akbzanj (Akbar Bakhshi)]

Hi.
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?

[samlittlefair]

Hi @akbzanj,

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

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:

https://community.prismic.io/t/htmlserializer-grouped-images/2863/2

Let me know if that helps!

Best,
Sam