[UX] Image Library view: Dynamic number of items per page

[klonos]

This is a follow-up of #4375, which is an improvement. Ideally though, we'd have a way to dynamically (AJAX?) alter the number of pager items, based on grid/column number.

[klonos]

I have done some research of possible solutions, so I'll post a series of comments here with my findings. Hoping to save us some time if any of us finds time/energy to work on this in the future...

[klonos]

https://drupal.stackexchange.com/questions/4920/load-more-content-with-ajax-when-clicking-more-link-in-a-view is about trying to achieve a similar thing:

I have a custom block view. I display the last 5 node titles. If someone clicks the more link I want to load the next 5 titles underneath the current 5 node titles. No page refresh and not pager. Is this possible? How would I go about doing this?

There are mentions of a few relevant contrib Views modules that may or may not do the job, or may be easy to adapt to achieve what we're after.

[klonos]

...in the previous SE solution article, there's also a comment that points to Transform any Drupal pager into an autopager - infinite scroll pager - load more pager, which uses https://github.com/paulirish/infinite-scroll

[klonos]

http://www.codeexpertz.com/blog/drupal/drupal-7-alter-view-pagination-custom-pager

We can set pager for our views in user interface under pager:

For our custom purpose we can alter the views pager in our module by using the hook function hook_views_pre_render(). This hook contains the reference argument $view that have all render able array of the view.

Using this argument we can reset the pager based on our requirements.

Example:

/**
 * Implementation of hook_views_pre_render().
 */
function MYMODULE_views_pre_render(&$view) {
  if ($view->name == 'VIEW_NAME' && in_array($view->current_display, array('PAGE_1', ‘BLOCK_1’))) {
    $pagerCount = db_query("SELECT count(nid) AS total FROM {node} n WHERE n.type ='article'")->fetchField();
        $view->query->pager->current_page = isset($_GET['page']) ? $_GET['page'] : 0;
    $view->query->pager->total_items = $pagerCount;
        $view->query->pager->totla_pages = round($pagerCount/$view->query->pager->options['items_per_page']);
    $view->query->pager->update_page_info();
  }
}

[klonos]

https://drupal.stackexchange.com/questions/269625/how-to-set-views-pager-item-size-programmatically (D8-specific)

I have tried below code to set pager size. ...

$view = \Drupal\views\Views::getView('english_chart');
$view->pager['items_per_page'] = 5;
$view->execute();

Comment:

The object returned from $views->pager is an object implementing ViewsPluginInterface and extending PagerPluginBase.

If you look at the methods in PagerPluginBase you will see the setItemsPerPage method.

So you should be able to do something like $view->pager->setItemsPerPage(5);

[klonos]

https://www.drupal.org/project/views/issues/1594468

I have a view that I use for showing different items on my website. It is a very simple view that accept taxonomy term as argument and shows the related nodes.

This view also have a pager, that handle 20 items per page.

I want to see if it is possible to dynamically change that to another number, for example if we are in different category (taxonomy term), I want to show different items per page.

...

Something like that should probably work:

function hook_views_pre_execute(&$view) {
  $view->init_pager();
  $view->set_items_per_page($number);
}

...

...you might need to use hook_views_pre_build() instead to get it working?

[klonos]

Some modules that may have code to reuse:

https://www.drupal.org/project/views_load_more

This module has some very key differences than the other load more module.

• Provide ajax/no-ajax views load more
• Works with views default AJAX implementation, no hacks (check/uncheck AJAX)
• Supports the Waypoints module for loading on various points, Such as when the scroller is visible on the page.

https://www.drupal.org/project/views_infinite_scroll

...allows you to load and display pages of any view inline, using AJAX (this has been called infinite scrolling, load more, autopaging, endless pages and more). The pager can be triggered with the press of a button or automatically as the user scrolls to the bottom of the view's content. ... ... 7.x-2.x has been updated to use just the AJAX functionality already packaged with views, however it is somewhat experimental and hasn't been battle-tested.

https://www.drupal.org/project/views_blocksit

Create dynamic grid layouts using the Blocksit JS jQuery plugin and Views. This module supports setting up breakpoints to change the number of columns as required. ... If required, breakpoints can be set up for the number of columns to change at a set container width. To do this, the "Breakpoints" setting needs to be configured using the following format and having the breakpoints ordered from largest width to lowest width.

[container_width_in_px, number_of_columns] [container_width, number_of_columns]

[docwilmot]

This is a follow-up of #4375, which is an improvement. Ideally though, we'd have a way to dynamically (AJAX?) alter the number of pager items, based on grid/column number.

But is the problem the grid number or is it the screen width (because its responsive)? No matter how we load the images, AJAX or otherwise, we cant load a dynamic number based on the screen width, so the images will re-align responsively anyway.

[ghost]

Wonder if it's worth trying to adjust the size of the images so they fall into an appropriate grid instead...? For example: