How to specify images and text layout within Rich Text field?

I have a long-form article page with a Rich Text field for the main article body, since the structure of the content inside is completely ad-hoc.

Some sections inside the article body require showing images left or right-aligned with paragraph text.

For example, the rendered page HTML might end up with a structure like this:

<h2>Recipe ingredients</h2>
<ul>
  <li>Salt</li>
  <li>Butter</li>
  <li>Flour</li>
  <li>Eggs</li>
</ul>

<h2>Getting started</h2>
<p>Take the butter, flour and eggs and mix it in a bowl...</p>

<div>
  <div style="float: left;"><img src="image-of-bowl.jpg"></div>
  <div><p>This is what it will look like at this point...</p></div>
</div>

In Prismic, I’m able to create custom Slices that are repeatable pre-defined modules inside the page – for example, “panel with image aligned to left”, “panel with image aligned to right”. So then the author can take these “modules” and craft the article layout in a variety of ways and, likewise, our front-end code knows how to display these modules.

How can I do something like this with Contentful?

I don’t see any options for specifying alignment inside the Rich Text field, or creating these richer “building blocks”?

Note: I do not want to use separate Entry types that are embedded into Rich Text, because none of this content is re-usable outside of the individual article entry.

Thanks for any advice.

Hi @ralph ,

I don’t believe it’s possible to define the alignment inside the Rich Text Editor. Two possible solutions would be to tweak your Rich Text renderer to decide the alignment based on certain conditions. See more info here: @contentful/rich-text-react-renderer - npm

Or, if you don’t want to use many Content-types to define the alignment, you could use a linked entry of only one Content-type “type”. That can then have inside a selector for the type of alignment (left alignment, right alignment, no-image, full width image).

Hey @ralph ! Figuring out how to combine Contentful rich text with formatted content is something I was stuck on as well. It can be tricky.

I know you mentioned that your content is not re-usable, but have you thought of creating a Contentful component to encapsulate this UI style? While the content itself isn’t reusable, the UI styles can be. This would be a way for the front-end code to know how to display this module.

I’d recommend something like this for the content model:

:framed_picture:-Component-Photo-Text
Text - Rich text
Image - Media
Image Placement - Text (short text)
Validation:
:ballot_box_with_check: Accept only specified values
Pull-left
Pull-right

Here’s an example I spun up:

Happy to answer if you have any questions. :slightly_smiling_face:

-Connor

1 Like