How can I populate multiple blocks on a paginated page?

Question

my problem seemed simple to solve and how to do it. But the paging did not work properly ..

As we see in the images, we have:

• Main block with an image and description. It only shows 1 element.
• Sequential block, an image and a description that the second content must show. It only shows 1 element. It is a block that is attached to the first
• Third block with image and description showing the third content. It only shows 1 element. It is a block that is attached to the first
• And at the end of a list of 3 cards, showing image and description. It must be shown from the third image onwards. It is a block that is attached to the first

It is content similar to news, the idea is to show different types of blocks for each content. And then paginate all the contents. The problem I found is that when you attach elements or when doing so with blocks you can only page one block. For example, when paging the main block, I will paginate all the attached blocks of an element. On the other hand, if I use the block of 3 cards, and I paginate it for this, I will paginate all the attached blocks with three elements.

The idea of mockups, would paginate the whole set with its corresponding content. That is, for the first page I have 6 elements shown in different ways, for the second page should show 6 to 12, the third 6 to 18. And to be more specific the main block will have the content 1 of page 1, the element 7 on page 2, and item 13 on page 3 and so on.

Example complete:

I hope you understand

Answer 1

I think building this functionality using custom code would be the way to go as views isn't really capable of this sort of thing.

If it was me I'd make a custom block to replicate this giving you alot more control.

But if you really want to use views you could maybe just have the 1 block and make it show 11 item per page. Then create a views template for the view and add some bits in there e.g. if you're using unformatted list you could copy views-view-unformatted.html.twig and save as views-view-unformatted--VIEWNAME--block-1.html.twig and then do something like:

{% for row in rows %}
  {%
    set row_classes = [
      default_row_class ? 'views-row',
    ]
  %}
  <div{{ row.attributes.addClass(row_classes) }}>

    {% if loop.index == 1 %}
     //use elements from $row to build display 1
    {% endif %}

    {% if loop.index == 2 %}
      //use elements from $row to build display 2
    {% endif %}
    ....
    ....
  </div>
{% endfor %}

Downsides of this you can't easily use different image styles or amount of text per row without using some contrib modules and other bits (I haven't actually attempted this but know there are modules to let you do more in twig, as mentioned custom block would be better though)