Jump to content
MilenKo

Cusom pagination html code

Recommended Posts

Hello. I am working on a culinary web project where I am aiming at listing all recipes with a pagination after reaching the recipe limit. As far as I already did the pagination on another project, I was quite happy to use the code and see it in action. However, my joy was not lasting long as far as the present pagination HTML code differs from the other and I was scratching my head today for several hours and yet no solution to precisely match the styling.

I was able to apply the pagination, show the prev/next and numbers properly, however the active class is not applied properly and the design has the prev/next arrows at the both ends of the recipe block (image attached).

Here is the pagination original html code:

<!-- Pagination -->
<div class="sixteen columns">

	<div class="pagination-container">
		<nav class="pagination">
			<ul>
				<li><a href="#" class="current-page">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
			</ul>
		</nav>

		<nav class="pagination-next-prev">
			<ul>
				<li><a href="#" class="prev"></a></li>
				<li><a href="#" class="next"></a></li>
			</ul>
		</nav>
	</div>
</div>

And here is my pagination code (after making sure that the template pagination is enabled):

<div class="sixteen columns">
	<div class="pagination-container">


	<?php echo $result->renderPager(array(	

		"nextItemLabel" => __(">>"),
		"previousItemLabel" => __("<<"),				
		"currentItemClass" => "current-page",	
		'listMarkup' => "<nav class='pagination'><ul>{out}</ul></nav>",
		'itemMarkup' => "<li>{out}</li>",
		'linkMarkup' => "<a href='{url}'>{out}</a>"

		));
	?>

		<nav class="pagination-next-prev">
			<ul>
				<li><a href="#" class="prev"></a></li>
				<li><a href="#" class="next"></a></li>
			</ul>
		</nav>
	</div>
</div>

As far as the pagination active class is not applied on the <li> but on the <a href... > I tried to change the linkMarkup to: 'linkMarkup' => "<a href='{url}' class='{class}'>{out}</a>" however that shows that the {class} is not applied with linkMarkup but with itemMarkup. Tried to add the class to itemMarkup too, but the same result is showing.

For sure the navigation is not an issue if it is next to the numbers, however I wanted to attempt to match fully the style and learn how can I move the prev and next pointers away from there or in other words to match the original theme.

So any ideas how to achieve the proper functionality and obtain the previous/next page links? I read so many tutorials and manuals today mentioning to use prev() and next() but in my case the results are not coming from $page and the next page pointed to the next page in my admin but not the next results page.

custom-pagination-issue.jpg

Share this post


Link to post
Share on other sites

Looking at the code this morning, it would have been so easy if I could apply the class='{class}' to the linkMarkup same as it can be applied to itemMarkup. On top of that I need to find a way to move the prev/next buttons aside from the page numbers. Trying to link $page->next() worked sort of but did not point to the next rendering result page but to point to the next page in the row after the initial Recipes one.

What am I doing wrong and how can this be achieved? Out of all the issues I was prepared to have, the pagination was one of the easiest to deal with earlier before I had a different template to work on ;)

P.S. I just noticed that the present page is wrapped up with <span> so I should be able to assign the curent-page to a span and it should work, but that won't still solve the issue with moving the arrows to the sides. I am looking into a link for Prev/Next page that I could add to the link and the case would be solved.

Share this post


Link to post
Share on other sites

The Pager includes prev and next links with identifying classes in the markup when there is a prev and next page to the results. Use CSS to position those links where you want them to be.

.MarkupPagerNavPrevious {  }
.MarkupPagerNavNext {  }

 

  • Like 1

Share this post


Link to post
Share on other sites

Thanks Robin S. Will try to style those and see how it goes from there. At least I would have the links to prev/next page separated. Do you have any idea why the {class} is not inserting properly in linkMarkup? It seems strange to me that it works fine with itemMarkup but not with linkMarkup ? 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Mike Rockett
      Docs & Download: rockettpw/markup-sitemap
      Modules Directory: MarkupSitemap
      Composer: rockett/sitemap
      MarkupSitemap is essentially an upgrade to MarkupSitemapXML by Pete. It adds multi-language support using the built-in LanguageSupportPageNames. Where multi-language pages are available, they are added to the sitemap by means of an alternate link in that page's <url>. Support for listing images in the sitemap on a page-by-page basis and using a sitemap stylesheet are also added.
      Example when using the built-in multi-language profile:
      <url> <loc>http://domain.local/about/</loc> <lastmod>2017-08-27T16:16:32+02:00</lastmod> <xhtml:link rel="alternate" hreflang="en" href="http://domain.local/en/about/"/> <xhtml:link rel="alternate" hreflang="de" href="http://domain.local/de/uber/"/> <xhtml:link rel="alternate" hreflang="fi" href="http://domain.local/fi/tietoja/"/> </url> It also uses a locally maintained fork of a sitemap package by Matthew Davies that assists in automating the process.
      The doesn't use the same sitemap_ignore field available in MarkupSitemapXML. Rather, it renders sitemap options fields in a Page's Settings tab. One of the fields is for excluding a Page from the sitemap, and another is for excluding its children. You can assign which templates get these config fields in the module's configuration (much like you would with MarkupSEO).
      Note that the two exclusion options are mutually exclusive at this point as there may be cases where you don't want to show a parent page, but only its children. Whilst unorthodox, I'm leaving the flexibility there. (The home page cannot be excluded from the sitemap, so the applicable exclusion fields won't be available there.)
      As of December 2017, you can also exclude templates from sitemap access altogether, whilst retaining their settings if previously configured.
      Sitemap also allows you to include images for each page at the template level, and you can disable image output at the page level.
      The module allows you to set the priority on a per-page basis (it's optional and will not be included if not set).
      Lastly, a stylesheet option has also been added. You can use the default one (enabled by default), or set your own.
      Note that if the module is uninstalled, any saved data on a per-page basis is removed. The same thing happens for a specific page when it is deleted after having been trashed.
          
    • By MateThemes
      Hello everyone!
      I have a problem with pagination. I have following code:
      <div class="uk-section"> <?php $results = $pages->find("template=gallery, limit=10, sort=title"); $pagination = $results->renderPager(); echo $pagination; echo "<ul class='uk-pagination uk-flex-center'>"; foreach($results as $result) { echo "<li><a href='{$result->url}'>{$result->title}</a></li>"; } echo "</ul>"; echo $pagination; ?> </div> Which works fine. And this markup results in following html code:
      <div class="uk-section"> <ul class='uk-pagination uk-flex-center'> <li> <a href='/galerie-bisheriger-projekte/'>Galerie bisheriger Projekte</a> </li> <li> <a href='/galerie-bisheriger-projekte/galerie-1/'>galerie-1</a> </li> </ul> </div> But instead of "Galerie bisheriger Projekte" and "galerie-1" I want to have a number.
      And as last question, how can I add a previous and next button?
      Thanks for your help!
    • By Liam88
      Hi all,
      Quick question as I haven't found anything from my Googling. 
      I have a blog on the site which utilises pagination. On the standard blog page I have a custom header which has featured posts.
      Below that I then have recent posts like mosts blogs.
      Now if i click to page two or three I want the header to disappear and just show a continuation of the standard posts.
      I'm not sure how to go about this so any direction would be helpful.
      Thanks
    • By stanoliver
      Good morning everyone!
      I have a growing number of posts about cars, bikes, airplanes, etc. 
      The following code (below) just works fine and returns only the posts of the category=cars as I desired together with pagination.
      In my url I have for example /categories/cars/car1 or /categories/bikes/bike1
      I do want to filter my posts not only with ... category=cars ... but also with category=bikes or category=airplanes and at best:
      If my url is /categories/bikes/ then ... category=cars ... should be overwritten or replaced by ... category=bikes ... 
      If my url is /categories/airplanes/ ... then the filter should be ... category=airplanes ... (I know a work around by creating almost identical templates where I could just change the "category=cars" part of my code but that's comes of a prize by repeating a lot of identical code and is not a good habit). In the documentation I read something about the "has_parent" selector but I could not get to work it related to the urls mentioned above.
      <?php foreach ( $results = $pages->find('id>1, template=templateblogpost, category=cars, limit=5, sort=-postdate') as $post 😞?> <!-- Blog entry --> <div class="g8-card-4 g8-margin g8-white"> <!--<img src="/g8images/bridge.jpg" alt="Norway" style="width:100%">--> <div class="g8-container"> <h3><b><?= $post->title; ?></b></h3> <h5>Datum: <span class="g8-opacity"><?= $post->postdate; ?></span></h5> </div>   <div class="g8-container"> <p><?= $post->posteditor; ?></p> <div class="g8-row"> <div class="g8-col m8 s12"> <p> <a href="<?= $post->url; ?>"><button class="g8-button g8-padding-large g8-white g8-border"><b>Details lesen &raquo;</b></button></a> </p> </div> <div class="g8-col m4 g8-hide-small"> <!--<p><span class="g8-padding-large g8-right"><b>Comments &nbsp;</b> <span class="g8-badge">2</span></span></p>--> </div> </div> </div> </div> <!-- END BLOG ENTRIES --> <?php endforeach; ?>   <? echo $results->renderPager(array( 'nextItemLabel' => "rückwärts", 'previousItemLabel' => "vorwärts")); ?>
    • By sambadave
      Hi everyone, here's the problem I'm trying to solve.
      I have a config area in my PW admin that is locked down for admin use. I use pages to store a bunch of settings that I'll use for my clients website. It's mostly used for visual things like colours and theming. This list could be tiny or large, depending on the sites requirements, but its great because I can store any information I want to. So the page tree could look something like this:
      ADMIN SETUP
      Home Config Aesthetics Colours Red Field: Custom Label - "Red" Field: Class name - "theme--red' Green Field: Custom Label - "Green" Field: Class name - "theme--green' Blue Field: Custom Label - "Blue" Field: Class name - "theme--blue' etc... Sizes Small Field: Custom Label - "Small" Field: Class name - "sm' Medium Field: Custom Label - "Medium" Field: Class name - "md Large Field: Custom Label - "Medium" Field: Class name - "lg" etc... Icons Target Field: Custom Label - "Hands shaking Icon" Field: Icon SVG - "[svg code]' Target Field: Custom Label - "Target icon" Field: Icon SVG - "[svg code]' Success Field: Custom Label - "Happy face icon" Field: Icon SVG - "[svg code]' etc... HOW I USE THIS
      I'm then able to set up page reference fields for colour, size and icons. I'll use these fields on particular pages so that my clients can select a particular colour, size or icon, or anything really. Currently, with the page reference field I can create a custom label for the options. So for something like colour I can label the field "Theme" and present a list of colours like "Red, "Green" and "Blue" using the custom page label label format of the colours page.
      This of course means that I can use this to do some lovely presentation on the front end of the site. With a colour selected I'll then be able to use the page reference to get the class name for that colour theme so that I can update the page's look and feel. So in my markup I'd end up with "theme--red" or "theme--green" etc.
      THE PROBLEM
      I have this all working which is great and it's really flexible for the client which they love. However, I'd love to be able to make things more visual for the client.
      Is there a way to be able to output more than just text in the page reference field? I might have a bunch of different blue colours, so instead of a list like so:
      Navy Blue Deep Blue Bright Blue Sea Blue ... it would be great to be able to output actual colour swatches, which is a lot mor visual for the client.
      Taking the icon selector, I would ideally like to show the actual svg that I've stored against that icon as a selectable image instead of seeing text options like:
      Hands shaking icon Target icon Happy face icon Just a couple of scenarios here, but as you can see there could be any number of reasons to display a more visual method of selection.
      ANY SOLUTIONS?
      I've looked at modules like FieldtypeColorPicker which could help in solving the colour issue, but it doesn't allow me to select a colour and then use a particular class name assigned to it the way I describe above.
      Considering the other use cases I mention above, does anyone know if anything exists already that would help me to create custom presentaion for page reference lists, or if there's anything planned?
      Thank you in advance for anyone who's read this far and has any words of wisdom!
      Dave
       
×
×
  • Create New...