Jump to content

Pager: item classes override current item classes


fruid
 Share

Recommended Posts

The $options array seems to be missing one crucial item, which is itemClass.

BTW I'm using tailwind css, in case the classes confuse you a bit.

I can't seem to style the <li> elements. If I add bg-green-400 to the classes of itemMarkup, it overrides the class of currentLinkMarkup.  

If I apply all the styling to the <a> tags instead, I cannot have a rounded corner for the first and last item.

$options = array(
  'listClass' => 'inline-flex',
  'linkMarkup' => "<a class='px-2' href='{url}'>{out}</a>",
  'currentItemClass' => 'bg-red-400',
  'itemMarkup' => '<li class="{class} h-auto hover:bg-red-400">{out}</li>',
  'separatorItemClass' => '',
  'currentLinkMarkup' => "<a class='px-2'>{out}</a>",
  'nextItemClass' => 'rounded-r-full',
  'previousItemClass' => 'rounded-l-full',
  'lastItemClass' => 'rounded-r-full',
  'firstItemClass' => 'rounded-l-full',
  'nextItemLabel' => '>>',
  'previousItemLabel' => '<<',
  'separatorItemLabel' => '<span>…</span>',
);

thanks for ideas!

Link to comment
Share on other sites

2 hours ago, fruid said:

The $options array seems to be missing one crucial item, which is itemClass.

An itemClass would accomplish the same as adding your class to itemMarkup. I'm not sure where exactly the problem lies, but you could test if adding your desired class before or after the {class} in itemMarkup solves the issue if it's a simple case of precedence within identically specific selectors.

  • Like 2
Link to comment
Share on other sites

2 hours ago, BitPoet said:

before or after the {class} in itemMarkup

I tried that, doesn't help. If I do that, all look non-active. Both classes appear in the markup but the second one, coming from {class} gets ignored. That's why I thought that by having an array-item called itemClass, only one would be inserted via {class} and the problem I reckon would be solved.

Link to comment
Share on other sites

Can you outline the desired and working HTML output you would need in your case?

Maybe not only the current item but a whole pagination block. That way it would be much easier for us (at leat me) to know and understand exactly where to look.

And... what about writing your own little CSS snippet for that case? 

Link to comment
Share on other sites

[SOLVED]

it actually started working for not good reason. I'm sure I tried before what I tried just now, but then it didn't work. 

Maybe by showing you the final code will clear things up

$options = array(
  'listClass' => 'inline-flex flex-center',
  'linkMarkup' => "<a href='{url}'>{out}</a>",
  'currentItemClass' => 'bg-red-400 text-white',
  'itemMarkup' => '<li class="bg-green-400 px-3 py-2 {class} h-auto hover:bg-red-400 hover:text-white ">{out}</li>',
  'currentLinkMarkup' => "<a>{out}</a>",
  'separatorItemClass' => '',
  'nextItemClass' => 'rounded-r-full',
  'previousItemClass' => 'rounded-l-full',
  'lastItemClass' => 'rounded-r-full',
  'firstItemClass' => 'rounded-l-full',
  'nextItemLabel' => '>>',
  'previousItemLabel' => '<<',
  'separatorItemLabel' => '<span></span>',
);

thanks

Edit: That said, what I don't like very much is the space between <a> and surrounding <li> tag which is not clickable but still changes its color upon hover. Hard to fix in this case at least.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By picarica
      Hello si have this gallery, pretty good website, but yesterday client uploaded over 3000 images oto the site, and it cannot handle filtering them out and showing them at the same time , i wanted some simple pagination maybe infinite scrool or onclikc load whatever, but i cannot seem to implement infinite ajax scrool and any other JS methods, nut sure why i still got stuck at the next method, like there is not next page.
      so i wanted to implement PW method of paginating i wanted to use MarkupPagerNav
      so far i have  this code for outputting images
      $pa = $pages->find("template=basic-page|art_gallery, images.tags!=''"); /* $pa = $pages->find("has_parent!=2,id!=2|7,status<".Page::statusTrash.",include=all"); */ echo "<div class='js-filter' id='gal' >"; /* row gtr-50 gtr-uniform */ $frame = $pages->get('/settings/')->watermark; foreach ($pa as $p) { foreach($p->images as $image) { if(!$image->hasTag("act")) { $options = array('quality' => 80, 'upscaling' => true, 'cropping' => 'north', 'sharpening'=>'medium'); $large = $image->size(1200, 0, $options); $wmImage = $large->pim2Load('wm1', ['quality'=>80, 'upscaling' => true, 'sharpening'=>'medium', 'defaultGamma'=>-1])->watermarkLogo($frame, $position='se',$padding=1.5)->pimSave(); /* zmazanie variacii, treba odpoznakovat ked sa menia nastavenie vyssie */ /* $image->pim2Load('wm1')->removePimVariations(); */ $thumb = $image->size(400, 300, $options); echo "<div class='$image->tags grid-item' style=''>"; echo "<span style='overflow:hidden;'class='image fit'>"; echo "<a class='hvr-reveal' href='$wmImage->url'>"; echo "<img uk-scrollspy='cls: uk-animation-fade; repeat: false' src='$thumb->url' alt='$image->tags'>"; echo "</a>"; echo "</span>"; echo "</div>"; } else { $options = array('quality' => 80, 'upscaling' => true, 'cropping' => 'north', 'sharpening'=>'medium'); $large = $image->size(1200, 0, $options); $wmImage = $large->pim2Load('wm2', ['quality'=>80, 'upscaling' => true, 'sharpening'=>'medium', 'defaultGamma'=>-1])->pixelate(25)->smooth(255)->watermarkLogo($frame, $position='se',$padding=1.5)->pimSave(); /* zmazanie variacii, treba odpoznakovat ked sa menia nastavenie vyssie */ /* $image->pim2Load('wm2')->removePimVariations(); */ $thumb = $image->size(400, 300, $options); echo "<div class='$image->tags blur grid-item' style=''>"; echo "<span style='overflow:hidden;'class='image fit'>"; echo "<a class='hvr-reveal' href='$wmImage->url'>"; echo "<img uk-scrollspy='cls: uk-animation-fade; repeat: false' src='$thumb->url' alt='$image->tags'><span>18+</span>"; /* <span>BY OPENING THIS IMAGE YOU CONSET THAT YOU'RE 18 YEARS OR OLDER</span> text copyraightova,y dat vedla obrazky potom */ echo "</a>"; echo "</span>"; echo "</div>"; } } }; to put it  simply, it first searches for sites, and then outputs all images from those sites, pretty simple, it also uses watermarking and uikit filtering
      i have filtering done like this
      $num = 1; echo "<ul class='uk-subnav uk-subnav-pill'>"; foreach(array_unique($alltags) as $key => $tag) { echo"<li uk-filter-control='filter: .$tag;group: $num' class='butt$num' uk-toggle='target: .butt$num ; animation: uk-animation-fade; queued: true'><a href='#'>$tag</a></li>"; echo"<li uk-filter-control='group: $num' class='butt$num active' aria-hidden='true' hidden='' uk-toggle='target: .butt$num; animation: uk-animation-fade'><a href='#'>remove - $tag</a></li>"; $num++; } echo "</ul>"; simple, but i have NO idea how to implement pagination, just because it seems to work that it like find all images, and stores with limit, and then just paginates them, but i cannot apply this method in my code.
      any idea how to make any JS inifite scroll work ? or just how to make this work ? with my setup, or with some modifications, it just have to work as is now
    • By ian
      Hi all,
      I've just noticed a strange issue with some paginated pages on my site UKMoths, (http://ukmoths.org.uk).  
      I have a series of pages showing thumbnails of moths by family, here: http://ukmoths.org.uk/thumbnails.  The opening page shows the families but as you drill down, it displays all the species within a certain family.  If there are more than 12 then the output is paginated using standard MarkupPagerNav functionality.
      On some however, I've noticed some long strings of random characters between the base url and the page notifier.  For example the crambidae list has 140 species so has about 12 pages.  Page 1 is fine, showing /thumbnails/crambidae, but pages beyond this, instead of the urls being like  /thumbnails/crambidae/page2 they are something like /thumbnails/crambidae/BVXAz1div6cNWKM3P5NDP7EoP4WA .... (cut for brevity) ... CSCHd6.9c6Nhh/page2.
      I can't for the life figure out why this is happening.  It seems to be the case for both ProCache version pages and non-cached (when logged in).  If I look at the ProCache folder in the assets, the structure looks to be correct - i.e. a crambidae folder and then page2, page3 etc. folders.   I should point out that the pages render correctly, even with these odd urls.
      It doesn't happen across the board though - it just seems to be certain ones - the /thumbnails/elachistidae folder pagination is fine - yet they're all using the same template.
      And the same site on my dev system is fine.
      Confused!    Any one have any thoughts? 
      Thanks,
      Ian.
    • By purwa
      Hi Everyone.
      I need help to paginate search results generated from a search form.
      my search result url:
      http://mysite.com/search/?products=tshirt&size=xl how do I keep the value when generating pagination using MarkupPagerNav?
      like on SKyscrapers example: 
      http://processwire.com/skyscrapers/search/page2?city=albuquerque   (tried to look at the source code but can't find where Ryan set the pagination options, maybe I missed it? can someone point it out to me )
      at the moment  my pagination link only showing the page number without the get value i.e:
      http://mysite.com/search/page2   however, it showing correct results if I type the url manually  like: 
      http://mysite.com/search/page2?products=tshirt&size=xl   I'm assuming I need to set the getVars in the pagination options
      can you give me example how to use the "getVars"? I've set the cache to 0 in the template setting.
      my code:
      $pagination = $matches->renderPager(array( 'nextItemLabel' => "»", 'previousItemLabel' => "«", 'listMarkup' => "<ul class='MarkupPagerNav pagination'>{out}</ul>", )); thank you!
×
×
  • Create New...