Jump to content
Roych

Pagination styles?

Recommended Posts

Hello,

I'm new to PW and need some help. I created a simple gallery which is working fine, but I can't figure it out how to create some styling for pagination.

I use this for pagination:

<?= $a->renderPager() ?>

My html look like this:

<div class="numeric-pagination">
	<a href="#" class="button"><i class="icons icon-left-dir"></i></a>
	<a href="#" class="button">1</a>
	<a href="#" class="button active-button">2</a>
	<a href="#" class="button">3</a>
	<a href="#" class="button"><i class="icons icon-right-dir"></i></a>
</div>

I hope you understand what I want to create.

Thank you

R

Share this post


Link to post
Share on other sites

Here are my code snippets for that

<?php
                echo $all_products->renderPager(array(
                    "nextItemLabel" => __("След."),
                    "previousItemLabel" => __("Пред."),
                    "firstNumberItemClass" => "pagination__item--first-num",
                    "lastNumberItemClass" => "pagination__item--last-num",
                    "previousItemClass" => "pagination__item--prev",
                    "nextItemClass" => "pagination__item--next",
                    "firstItemClass" => "pagination__item--first",
                    "lastItemClass" => "pagination__item--last",
                    "currentItemClass" => "pagination__item--active",
                    "listMarkup" => "<div class='pagination'><ul class='pagination__list'>{out}</ul></div>",
                    "itemMarkup" => "<li class='pagination__item {class}'>{out}</li>",
                    "linkMarkup" => "<a class='pagination__item-link' href='{url}'><span>{out}</span></a>"
                ));
        ?>

and SASS styles ( mixins from foundation ) 

$module: 'pagination';

.#{$module} {
    text-align: center;
    background: $white;
    border-radius: $global-radius;
    padding: rem-calc(5);
    box-shadow: rem-calc(0 1 4 0) rgba(0, 0, 0, 0.1);

    &__list {
        @include pagination-container;
        display: inline-block;
        margin-bottom: 0;

    }

    &__item {
        display: inline-block;
        padding: rem-calc(5) rem-calc(10);

        &--active {

            a {
                text-decoration: underline;
            }
        }

        a {
            @include button-base();
            @include button(false, $brand-darker, darken($brand-darker, 5), $white, solid);
            border-radius: $global-radius - 2;
            margin-bottom: 0;
            padding: rem-calc(3 7);
        }
    }
}

 

  • Like 3

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 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 usualCommission
      Hey everyone,
      I'm pretty experienced with pagination and haven't seen this before. I have my pages pulled using $pages->find, which is working fine however using renderPager() generates pagination where the links do not work. Here are some details.
      All templates needing pagination have pagination enabled in the admin. URL Segments are not enabled. Clicking on the "Next" or numbered links merely reloads the current page. The link href values are properly being output with the urls being /page2, /page3, /page4, etc. Manually entering the paginated urls has the same effect of reloading the current page with no new content. Pages are being returned from the ->find function properly and with the proper limit. A few other details:
      ProcessWire v3.0.98 Multi-language is enabled, 2 languages implemented. Pagination does not work on either language Have very few modules installed (few enough to list), none of which I could see interfering: ProFields, ProDrafts, ListerPro, DB Backups, Cronjob DB Backup, Upgrades, Upgrade Checker, Force Password Change, Markup Sitemap XML I'm stumped. For the sake of being overly-thorough, here's the code:
      <?php $articleTemplates = [ 'template_news_article', 'template_news_video', 'template_news_press_release' ]; $searchParams = [ 'template=' . implode('|', $articleTemplates), 'sort=-published', 'limit=' . $pages->get('template=template_news')->list_count ]; $articles = $pages->find(implode(',', $searchParams)); echo $articles->renderPager(); ?>  
    • By j00st
      Hi all,

      I've set up a filter on my product-page, which I then use to...filter my products!
      – I've got pagination set up, and 30 items per page.
      – When I active the filter it works perfectly (in my opinion).
       
      Here's what I'm struggling with though:
      When I'm on another page (filtered as well/or the total overview) and I put my GET request in for the filter,
      it gives back the result, but still with the page-number there. In some cases, this is no problem – like a A-Z or Z-A filter,
      but others (say, per location) I might have less pages.
      Visual/code ref: (I DO have 3 pages of authors, but I don't have 3 pages from London)
      url: books/page3?author=ascending url: books/page3?studio=london  
      The current setup for my pages that get rendered are as follows:
      $allbooks = $pages->find("template=book, sort=$sort, $q, $tagged, $select_studio, start=0, limit=$limit"); As you can see I have the start=0 in there, but I read that's for the start of the pagination, not so much where it'll drop me in the search results.
      $q, $tagged and $select_studio are all empty values, unless they're returned from the GET request
      To repeat it, in it's most simplest form:
      When I click a filter, and a GET request is done, I want to 'reset' the page-number to 0, and get my results...
      Perhaps I'm missing something obvious, but I'd be really grateful to have your input.
×
×
  • Create New...