Should blog/article images have their own slice?

Hey, Prismic community! I'm leading a massive slice reduction effort at Arcadia.com and would like to better understand best practices when it comes to images in blog/article content.

Currently, when adding an image to our blog-type pages, we have a standalone slice for the image. For example, if I wanted a paragraph of text, then an image, then another paragraph of text, that would be three slices.

Playing around with the rich text field, I see that I can add an image in between paragraphs right within a single field and slice. Is there any reason why I wouldn't want to go with this option? Are there any good reasons for images to use a standalone slice, specifically when part of a traditional blog/article format? Please share thoughts!

Hello @dan.duett

Thanks for reaching out to us and posting this question to us.

I'd recommend you to use the Slices over the Rich Text field. Slices are more flexible, and you can use them as a component of your project. There are some benefits to using Slices:

  1. Slices are components, and you can shuffle them in Prismic editor if you want to change the position of Images paragraphs in your project.

  2. Some project pages might have a dynamic layout, so it's always better to use slices because they are reusable components.

  3. You can add Slices to the Slice library to make them available to all Custom Type.

Here are some resources I am sharing with you.

  1. What is a Slice
  2. Reuse Slices
  3. Create a dynamic layout with Slices

Let me know if you have further questions.

Thanks,
Priyanka

Hi, Priyanka. I appreciate your response, but I'm hoping for a more nuanced answer. I'm familiar with slices and their general benefits.

I also should've shared more context. For our website, the only place we intend to use a full-width image is our blog/article content. So the reusable/dynamic benefits of slices don't really apply for this use case. It's just as easy (if not easier) for a content editor to rearrange an image within a rich text block as it is for them to rearrange slices.

Given that our project has way too many slices and our "full-width image" slice doesn't seem to serve a unique purpose, it seems like one we can live without. Are there any technical differences/tradeoffs we should consider between a standalone image slice and an embedded image within a rich text field?

1 Like

Hello @dan.duett

Thanks for more detail.

There are some limitations to putting Images in the Rich Text field:

  1. In the HTML code, the image will be displayed under a paragraph <p> tag, not in the <img> tag. To apply the <img> tag, you need to use HTML Serializer. HTML Serializer - Prismic.

  2. You can not have full control over image blocks to add figcaption available for images in the rich-text editor. Here is a thread related to it: Caption for images in RichText field

  3. it's not possible to add labels to image fields in the Rich Text field. Here is a thread related to it.

  4. You can't set image views for images inside the Rich Text field in the Prismic UI. You need to create srcsets for images in the HTML serializer of your project. Here is a thread related to it.

I hope it answers your question. Let me know if you have any further questions.

Thanks,
Priyanka

2 Likes

Thank you, Priyanka! This is exactly the type of limitations and considerations I was seeking out. I really appreciate you putting them together for me. I think this resolves my question. Thanks again!

You are welcome, Dan. I am glad that it resolved your question. Feel free to reach out to us if you have any questions.

1 Like