Change pagination view

Good to hear from you again, and thanks for the question.

The current MLA version does not directly support a “load more” button or infinite scrolling but other MLA users have added this plugin to MLA for a solution:

Ajax Pagination and Infinite Scroll, by Malinky

The plugin hasn’t been updated in quite a while but on my system it’s working fine. To use this combination you must add a bit of HTML around your gallery and pagination shortcodes. Here’s a simple example:

<div id="malinky-content">
<h2>Malinky Gallery</h2>
[mla_gallery attachment_category=abc posts_per_page=4]
<div id="malinky-pagination" style="display:none">
[mla_gallery attachment_category=abc posts_per_page=4 mla_output="paginate_links,prev_next"]
</div>
</div>

As you can see, I have added two simple DIV elements around the MLA shortcodes. The DIV id attributes can be anything you want but must be unique. The style="display:none" attribute hides the MLA pagination controls; they will be replaced by the “load more” button.

After installing and activating the “Ajax Pagination and Infinite Scroll” plugin, navigate to the Settings/Ajax Pagination Settings screen and configure the plugin to match your MLA shortcodes:

Wrapper Settings
Theme Defaults – not applicable; select anything
Posts Selector – #malinky-content
Post Selector – dl.gallery-item (or figure.item for HTML5 themes)
Navigation Selector – #malinky-pagination
Next Selector – a.next

Paging Type – Infinite Scroll, Load More Button, or Pagination

For your application, select the “Load More Button” paging type and configure the Load More Button Settings as you see fit. You can also select the “Infinite Scroll” paging type and play with that option.

If you select the “Pagination” paging type, change the pagination DIV attribute to style="display:inline" to make MLA’s controls visible. For this paging type, clicking on the MLA pagination links will update the gallery display without refreshing the entire page.

I hope that gets you started on a solution that works for your application. I am marking this topic resolved, but please update it if you have any problems or further questions regarding the above suggestions. Thanks for an interesting question and for your continued interest in MLA.

Hi David,

thank you very much, that was exactly what I was looking for! Works perfect.

The only thing I would still need help is, I have a search box built into my page:
Textfield:
[mla_gallery s="{+template:({+request:search-string+}|a-bad-term)+}" mla_rollover_text="{+parent_title+}" posts_per_page=12 size=full? mla_link_href='{+site_url+}/?page_id={+parent+}']
Codeblock:

<form id="mla-search-form" action="." method="post">
<input id="mla-search-box" name="search-string" type="text" value="" />?<input id="submit" name="submit" type="submit" value="Suchen" />
</form>

Can I put this function in a div like you said above and if so, how do I do that?
Thank you so much!

Best regards

Thanks for trying the plugin I suggested and for the good news of your progress. I understand your latest question to be that you want to retain the keyword(s) entered in the keyword search text box when the “Load More Button” is clicked to add items to the gallery display.

The “Ajax Pagination and Infinite Scroll” plugin works by finding the “more” link in the pagination controls and using it to request more items from the server. This technique is unable to copy the form data into the link, so the keyword(s) are lost when the “Load More Button” is clicked.

The current MLA version includes the “MLA UI Elements Example” plugin, which implements several shortcodes that allow form data to be “sticky”, i.e. survive a page refresh and a pagination operation. Adding this plugin to your site and changing your form and gallery shortcodes to use it will give you the results you seek.

To install (or update) the example plugin, navigate to the Settings/Media library Assistant Documentation tab and click the “Example Plugins” button. Type “elements” in the text box and click “Search Plugins” to filter the table.

You are looking for the “MLA UI Elements Example” plugin. Find that plugin and hover over the title in the left-most column. Click the “Update” (or “Install”) rollover action, then go to the WordPress Plugins/Installed Plugins submenu and verify or activate the example plugin as you would any other plugin.

Once the example plugin is installed you can change your form and shortcodes to something like this:

<h2>Search Form</h2>
<form id="mla-search-form" action="." method="post">
[muie_keyword_search]
<input id="submit" name="submit" type="submit" value="Suchen">
</form>

<div id="malinky-content">
<h2>Malinky Gallery</h2>
[mla_gallery s="{+template:({+request:muie_keyword_search.s+}|a-bad-term)+}" add_filters_to=any mla_rollover_text="{+parent_title+}" posts_per_page=12 size=full mla_link_href='{+site_url+}/?page_id={+parent+}']
<div id="malinky-pagination" style="display:inline">
[mla_gallery s="{+template:({+request:muie_keyword_search.s+}|a-bad-term)+}" add_filters_to=any mla_rollover_text="{+parent_title+}" posts_per_page=12 size=full mla_link_href='{+site_url+}/?page_id={+parent+}' mla_output="paginate_links,prev_next"]</div>
</div>

I have made a few changes in the above suggested form and shortcodes. First, I have replaced the text box field in the form with the [muie_keyword_search] shortcode. Second, I have changed the s= template in the gallery shortcodes from {+request:search-string+} to {+request:muie_keyword_search.s+} so the output of the MUIE shortcode is used in the template. Finally, I have added add_filters_to=any to the gallery shortcodes to activate the MUIE code that copies the search term(s) into the pagination links. The latest “MLA UI Elements Example” version, 1.16, includes a Settings/MLA UI Elements Documentation tab with several similar shortcodes for other MLA parameters.

I hope that gets you started on a solution for your application. I am leaving this topic resolved, but please update it if you have problems or further questions regarding the above suggestions.

Hi David,

Thank you so much for your help and your effort!

The code works, but the ‘load more’-button comes only the first time, the second time the standard pagination with ‘previous – page number – next’ comes. If i then click on the next page, the button comes again, but also only once ..

Do you know what the reason is and how I can solve this?

You can see it on the bottom of this page!
https://www.reisebuero-bamberg.de/portfolio-test/

Thank you so much.
Best regards

Thank you for working with me offline to solve this problem.

Your theme and other plugins include JavaScript of their own that interferes with the Malinky plugin script. Fortunately, some documentation at the GitHub site for the Malinky plugin provides some clues for a solution:

Initialization (Setup)
The plugin is initialized when the page first loads and the pagination is then updated to use Ajax. If you need to reinitialize the plugin at anytime call the following function in your JavaScript.

MalinkyAjaxPaging.setUp();

This is useful if you run any other javascript / ajax on the page, for example filtering on an ecommerce site.

Callback
Add your own Javascript code in the settings which runs after each new set of posts are loaded. Callback receives two parameters: loadedPosts (An array of the new posts) and url (The url that was loaded).`

Calling the setUp() function after each set of new posts is loaded will help. To do that, navigate to the Settings/Ajax Pagination Settings page and add the setup call to the Callback text area.

I understand that you made that change and it solved the problem. Thanks for confirming the fix by email, and for your continued interest in the plugin.