Need a better way to order and repeat components for populating blog articles

Questions and Answers Strapi Admin
1
System Information
  • Strapi Version: 4.11.1
  • Operating System: Mac
  • Database: None
  • Node Version: 16.13.1
  • NPM Version: 8.1.2
  • Yarn Version:

I have a blog, and in the Strapi admin, I’ve made a number of components that will be used to create the content for each article. For example, a component with just text and a component with image and text.

I’ve created a collection type for the blog articles and added the components to the collection type as repeatable. Calling the collection type API for an article returns object arrays for each component, but there isn’t a way for the user to order them in a specific way that I’ve found.

To order them, I needed to make an instructions JSON for the layout in the collection type (just an array of strings) that is used by the frontend code to parse the data from Strapi and return article components in the right order. For example, if I want a blog article with the format of “text paragraph” + “image and text” + “text paragraph”, I need to write an array of that order so it can reorganize the data from the arrays and create the content in that order too. In that example, it will traverse the instructions array and get the first text component item and then the first image and text component item and then the second text one.

This is tedious and unintuitive. What can I do to make this functionality better and have control of the order or my repeatable components in a blog post?

Thanks

2

works on every layer

3

Hi, thanks for your response. I’m kind of new to Strapi and not seeing how this solves what I’m trying to do. The person who will put together the blog articles on my project will only be using the Strapi Content Manager, not doing anything with APIs. So they need to be able to drag and drop repeating content (components) in the order they want them to appear, different for each article. I did try making a test collection type with relations to two other components (that are also collection types), but I can’t see how I can reorder them so that when the data is consumed, they could be in a specific order, not just grouped in their collection type objects.

Could you provide some more insight? Thanks

Here’s my test

Screen Shot 2023-06-28 at 09.15.26
Screen Shot 2023-06-28 at 09.15.261168×586 119 KB

4

@Boegie19, are you able to provide any more specific info here? Thanks

5

dynamic zone is your answer