twentyseventeen, display-posts: pagination

  • Unknown's avatar
    manuschwendener · Member ·

    Hi

    Two questions when using display-posts.

    1)
    On blog.ub.unibas.ch, when I click ‘Ältere Beiträge’ (= older posts), I get to …/alle/page/2.

    a) This is the only way to do that if I don’t want endless scrolling, correct?

    b) How can the pagination on page 2 be left aligned with the post(s) above it? [There is only one at the moment, which is correct.]

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    manuschwendener · Member ·

    2)
    My subpages, for example Sammlungen -> Basiliensia use the following code

    [display-posts category="basiliensia" include_date="true" date_format="d.m.Y" include_excerpt="true" posts_per_page="5" image_size="large" wrapper="div"]

    and the link behind ‘Ältere Beiträge’ goes to

    https://blog.ub.unibas.ch/category/sammlungen/basiliensia/page/2

    a) This is the only way to do that if I don’t want endless scrolling, correct?
    Ideally I’d stay on the page Basiliensia and would just load more blog posts, instead of switching to the category page.

    (I’ll add another question about the styling of ‘Ältere Beiträge’ later, will test some things first.)

  • Unknown's avatar
    manuschwendener · Member ·

    PS to 1b): I’d like the pagination on …/alle/page/2 to be left aligned like on …/category…page/2

  • Unknown's avatar
    manuschwendener · Member ·

    > Ideally I’d stay on the page and would just load more blog posts

    This would be ideal for the main page (alimented by /neueste) and all the sub pages.

    It _does_ work on /alle.

  • Unknown's avatar
    manuschwendener · Member ·

    Ah, and it also works if I start on page 1 of the category page.

  • Unknown's avatar
    manuschwendener · Member ·

    Third question: styling of the ‘Ältere Beiträge’ link.

    I’d like it to look like ‘Older posts’ on the main page of my personal blog.

    I copied the CSS

    a.older_btn {
	box-shadow: none;
	color: #008488;
	font-size: 16px;
	font-family: "Lato";
	background: #ebebeb;
	padding: .84375em .875em .78125em;
}

a.older_btn:hover {
	color: #D20537;
	font-size: 16px;
	font-family: "Lato";
	background: #ebebeb;
	padding: .84375em .875em .78125em;
}

    but I’m missing a piece to ‘activate’ it.

  • Unknown's avatar
    manuschwendener · Member ·

    Just solved colour and underline on the front page, trying to figure out font and subpages now.

  • Unknown's avatar
    manuschwendener · Member ·

    Third question solved for blog.ub.unibas.ch.

  • Unknown's avatar
    thesacredpath · Member ·

    On the Ältere Beiträge, if you did not have any footer widgets, you could activate Infinite Scroll, which would load seven posts initially and then when a visitor gets near the bottom of those initial seven, it would load seven more and so on till it had loaded all of your posts. With widgets in the footer area, Infinite scroll has to be disabled otherwise no one would see the widgets in your footer until they had scrolled far enough to get to the bottom of your posts.

  • Unknown's avatar
    thesacredpath · Member ·

    For the pagination on page 2, add this to float it to the left. 

    @media screen and (min-width: 48em) {
  .navigation.pagination {
    float: left;
  }
}

    On the pages using the Display Posts Shortcode, yes, the Ältere Beiträge is the only option.

  • Unknown's avatar
    manuschwendener · Member ·

    Thank you, thesacredpath :-)

    I don’t like infinite scroll, so I’ll try to avoid it.

    > float: left;

    This works, but now it’s too far left ;-)

    AND: looking at it again made me realize a difference to my own blog.

    The display of the pagination is already correct on – for example – page 2 of Sammlungen

    Coming from the main page on my personal blog, there is no further pagination on page 2, it just loads more posts when I click on ‘Older posts’.

    I’d like this also to be the case for the company blog. I’ll go and see if I can fix that myself. I’ll ask here again if I get stuck.

  • Unknown's avatar
    manuschwendener · Member ·

    To make the above post more clear: pagination is handled differently on the subpages (= filter by category) and on the page with all blog posts.

    Display on subpages already correct.

  • Unknown's avatar
    manuschwendener · Member ·

    Ok, got it to work by limiting posts per page to 2.

    Cosmetics:

    ‘Ältere Beiträge’ on the main page looking as I want.

    ‘Ältere Beiträge’ on page two: no visible change when I hover over it.
    Any idea how I can get it to behave like on the main page?

    It _does_ what I was looking for: load the next 2 posts.

  • Unknown's avatar
    thesacredpath · Member ·

    The page 2 needs different CSS selectors for some reason. Not sure why that is, but you can start with these three CSS rules. 

    #infinite-handle span {
  border-bottom: 3px solid #bbbbbb !important;
}
#infinite-handle span:hover {
  border-bottom: 3px solid #cc0000 !important;
}
#infinite-handle span button:hover {
  color: #cc0000 !important;
}
  • Unknown's avatar
    manuschwendener · Member ·

    Thank you, thesacredpath :-)

    While it’s not identical, it’s certainly close enough.

    I’m using slightly different colors

    #infinite-handle span {
  border-bottom: 3px solid #EBEBEB !important;
}
#infinite-handle span:hover {
  border-bottom: 3px solid #D20537 !important;
}
#infinite-handle span button:hover {
  color: #D20537 !important;
}

    I’ll set the limit of posts per page up again soon tomorrow, so it will only become visible once we have more posts.

  • Unknown's avatar
    manuschwendener · Member ·

    But you can see on my other blog how it works.

    Thank you again :-)

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘twentyseventeen, display-posts: pagination’ is closed to new replies.