Webflow Rich Text Editor Image Rows

[row]
[row]First image in a row with a caption
[row]
[row]Second image in a row with a caption
[row]
[new-row]
[row]
[row]Image in the middle of the row with a caption
[row]
[row]
Image
Standard image without a marker
[row]
[row] A new row being created after a standard image without marking a new row.
[row]
[row]

Any other content between images marked with row will break the row and start a new one. In this instance, the above two images will be in one row and the image below that is marked with [row] will start it's on new row.

[row]
Look it's a new row

Webflow Rich Text Editor Image Rows

This feature allows Webflow designers to create rows of images within the Rich Text Editor. This is useful for blogs or any other type of content that is written in the Rich Text Editor and requires a more complex layout for images. It uses a combination of CSS for styling and JavaScript for handling the placement of images into rows based on caption markers.

Developer Instructions

  1. Add CSS: Include the following CSS in your project. You can place the code either in an Embed element on the page itself, or in the site-wide custom code settings in the Project Settings. Be sure to wrap the CSS in <style></style> tags.
  2. Add JavaScript: Include the following JavaScript in your projectBe sure to wrap the <script></script> tags.
  3. Add rte-image-rows Attribute: To any Rich Text element that you want to have the ability to create image rows, add the rte-image-rows attribute. The attribute doesn't need a value; its presence is enough to trigger the script. You can add the attribute through the Custom Attributes section in the Element Settings panel (the cog icon).
  4. The rows gutter width is set by the custom CSS in the on page Embed element. Adjust the value of the --gutter-width: 1.5rem; in the embed to adjust the spacing between the images.
  5. Add Caption Markers: To specify which images should be in a row, you'll need to add markers in the captions. Add [row] to put an image in a row. If an image has a [row] marker, the script will put it in the same row as the previous image. If you want to start a new row, add [new-row] to the caption of the first image in the new row. The script will automatically remove these markers from the captions when the page is loaded, so they won't be visible to your visitors.

CSS

See the Pen Webflow Rich Text Editor Image Rows by Tony Seets (@tony-seets) on CodePen.

JavaScript

See the Pen Webflow Rich Text Editor Image Rows by Tony Seets (@tony-seets) on CodePen.

Client Instructions: How to Use Image Rows in the Rich Text Editor

This feature allows you to create rows of images within the Rich Text Editor. This is especially useful when you want to show multiple images side-by-side within your content. Here's how to do it:

  1. Add your images: Click the plus icon within the Rich Text Editor to add an image. You can do this for both static Rich Text Elements and Rich Text Fields within the Webflow CMS.
  2. Add a caption: After you've uploaded your image, you'll have the option to add a caption. This is where you'll specify whether the image should be in a row.
  3. To add the image to a row, type [row] somewhere within the caption. This tells the system to put the image in the same row as the previous image.
  4. To start a new row, type [new-row] somewhere within the caption. This tells the system to start a new row with this image as the first image of that new row.‍
  5. Note: The rows won't be visible in Webflow's Preview view, inside of the Webflow Rich Text Editor in the CMS Editor, or in the Editor. They're only be visible once the website or CMS item has been published.‍
  6. Publish your page or CMS item: When you publish your page or CMS item, the images will be arranged in rows based on the markers you've added.

Additional Notes

  • The [row] and [new-row] text will not be visible on the live site. It is only used to mark your row images.
  • Images that aren't marked with [row] or [new-row] will be excluded from this layout and will appear as they normally would.
  • Adjusting the size, layout, or type of images within a row may affect the overall layout of the content. Please note that images with different sizes, aspect ratios, or alignment settings may not align perfectly within the rows. If you encounter any issues with image positioning or layout, please reach out to your developer for assistance.

That's it! You can add as many image rows as you like within a single Rich Text Element or Rich Text Field.

If you run into any issues or need further assistance, don't hesitate to reach out to your developer.

For fun by Tony Seets | Flow Maestro
Clone This
Custom code in on page Embed elements