Hi I have a Rich Text field in a CMS Collection that contains a <ul> / <li> list. I want to add images inside each list item, so each <li> shows a small image next to the text.
Any help or clarification would be greatly appreciated.
Alex
Hey Alex,
You’ll hit a few rich-text editor design restrictions here; In rich text,
- Images don’t have a built-in inline option, and are a block-level element
- Bulleted lists are designed to be built and edited as bulleted lists. The editor focuses on hierarchy, so your styling will be limited
Your best bet is probably just to use the rich text embed feature, and write the exact HTML you want. that way you can precisely control the image size, margins, alignment within the <li>
<ul>
<li><img src="..."> ... </li>
</ul>
@ola.nak , Would you like each list item to have its own image, or should one image be used for all list items?
image per item. It seems that I have to use the embed code.
If the images are custom that’s really the only way, but that’s a pain too since you’ll have to upload them to assets to use them.
However if they’re e.g. emojis, you could write some JS to look for and translate :joy: type emoji syntax for you. You’ll see them in code preview.