One of my customers has asked to implement a new home page which pulls content from a variety of content types in a specific ratio (e.g., 1 blog post node, 3 photo nodes, and 2 event nodes, none of which have any particular relationship to one another). They'd also like for the user to be able to page forward and have each successive page include the same ratio of content types.

Due to limitations on the specific modules available in this environment, they're going to have to do this with views. My initial recommendation was to use attachment displays. The primary page display would pull a single blog post node, and then two more attachment displays would pull the other content types. All three displays would need to be updated whenever the page-forward link is clicked in order to satisfy the requirements.

This worked almost perfectly, with one catch:

  • If the attachment displays are configured to inherit the parent display's pager, they will page forward when it does, which is the desired behavior. However, they will also inherit its item limit —so if the parent display pulls one node, the photo attachment display will also pull one node, instead of the 3 my customer wants it to pull.
  • If the attachment displays do not inherit the parent display's pager, they show the correct number of items —but they don't page forward with the parent display either.

What I propose as a resolution here is to decouple pager inheritance a bit —instead of inheriting the entire pagination settings, perhaps we could have one option for inheriting the page number and another option for inheriting the LIMIT/OFFSET values.

Comments

ravi.kumar88’s picture

ravi.kumar88 commented

There are two alternatives to solve this issue.Consider an example as 1 blog post node having 4 pages, 3 photo nodes having 3 pages, and 2 event nodes having 2.
First and the simpler way is as follows:
1. Create a page in view filtering out the contents having content type with maximum number of pages.From the above example you have to choose content type of blog post as it has maximum number of pages i.e 4.
2. Then create block (don't use attachment) for each of the other content type in the same view.In pager setting you just have to specify the no of nodes to be shown on a particular page which is different for each content type.
3. Now go to admin/structure/block and show them above the content in the page.
4. Configure each block to be visible only on the page of your view.
5. Now you will have a page showing content from a variety of content types in a specific ratio but with their corresponding pager.
6. So we have 3 pagers in the same page however changing any of the pager will change the other pages too ( because all the pagers have the same pager id).
7. We just have to show the lower most pager.In order to do that go to each block and under advance setings assign a css class lets say 'xyz' ( Dont assign the css class to the page).
8. Now the class of the pagers except the main pager will be 'xyz pager-list'.
9. Last step is just to write the code in the style.css of your theme to hide those pagers using their class name i.e. 'xyz ul.pager'.Sample code is as follows:
.xyz ul.pager {
display:none;
}

ravi.kumar88’s picture

ravi.kumar88 commented

Second way is a little bit complicated but it is more of a generalized way as the solution for the multiple pager is handled by jquery in Global PHP of the view.The steps are as follows:
1.You have to create a page and blocks as mentioned above regardless of whatever may be the sequence.
2. Install the view_php module and Create a field of Global PHP in the page of that view.
3. The code under the output code of Global PHP goes like this

drupal_add_js('jQuery(document).ready(function(){
    var block1 = jQuery(".block--1 ul.pager li").length;
    var block2 = jQuery(".block--2 ul.pager li").length;
    var block3 = jQuery(".block--3 ul.pager li").length;
    var _array = [block1,block2,block3];
    var res1 = _array.indexOf(Math.max.apply(Math,_array));
    var block;
    if(res1 == 0) block = "block--1";
    if(res1 == 1) block = "block--2";
    if(res1 == 2) block = "block--3";
    jQuery(".block--1 ul.pager,.block--2 ul.pager").hide();
    jQuery(".block--3 ul.pager").html(jQuery("."+block+" ul.pager").html());
    });','inline');

where block--1 ,block--2 and block--3 are the name of the CSS classes assigned to the blocks and the pages.
Basically by the above code we are finding the largest pager out of the three pagers and replacing the html of the page's pager by it.Then hide the rest two pagers.

tiikeri’s picture

tiikeri commented

my aim was a little different, but the solution is the same.
I want to override taxonomy term pages by activating the default view. I want to display 3 items in a single line, and after them i want to show the next 4 items in two columns (2 items per column).
Can't do it by CSS only, because of different text-truncate lenght and different images size.
In my first attempts i tried with view-attach and view block attached to footer with no expected result, the problem was pagination.

The solution provided by ravi.kumar works for my aim, thank you!