0

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

enter image description here

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: enter image description here

I hope you understand

  • Hi Icaraves! It's indeed difficult to understand and without doubt too broad. You probably need a custom route with a wildcard that returns a bare site with the pagination. Now you place your custom blocks on that page and these blocks check the URL for the page number. Then there's a second route that returns a JSON response with all node IDs per page and block and populate the blocks that way. Though, that's just how I would start to solve that problem. – leymannx Dec 17 '18 at 12:27
  • ay ay very complicated, I'm a little junior for so much information. The problem is that the design has different cards for the same view. I'm going to upload an example. – lcaraves Dec 17 '18 at 12:47
  • That's probably not going to help. As this question could be seen as "How do I implement a feature like shown in the screenshots below" type of question. Which definitely makes it off-topic. It's too broad anyways. You need to start to walk your way through this problem step by step yourself and ask a question when you have a reproducible and narrow problem you need help with. – leymannx Dec 17 '18 at 12:51
  • I'd love to help you out as this really seems like an interesting riddle to solve, and an opportunity to learn a lot of things. But unfortunately I currently don't have the time to guide you through this now and in the near future. – leymannx Dec 17 '18 at 13:35
  • And looking at this again, to be honest, maybe "blocks" is misleading here. Actually it's just one paginated view and could by styled with .row:nth-child(x) type of CSS styling, no? – leymannx Dec 17 '18 at 13:37
2

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)

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.