[Resolved] Volume: Lazy loaded Infinate scroll of Blog & Latest Posts

Home Forums Support Volume: Lazy loaded Infinate scroll of Blog & Latest Posts

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1209331
    Tim

    Hello

    As I understand it Volume utilises and styles the WP Blog with pagination.

    1. How could I use the same style and pagination of the above for the public view of the standard WP Gutenberg “Latest Posts” ?

    2. How could I replace Volume’s pagination with a lazy loading infinite scroll for the WP Blog and WP Latest Posts ?

    Thanks

    Tim

    #1209411
    David
    Staff
    Customer Support

    Hi there,

    you can only enable infinite scroll for the Blog within the GP Customizer settings. It does not work on the core WP Latest Posts block.

    #1210300
    Tim

    Hi David

    So I’m now looking into lazy loading plugins to take care of that part.

    What would be the best practice to style the Latest Posts to match the Volume Blog post listing ?

    Thanks

    Tim

    #1210668
    David
    Staff
    Customer Support

    I don’t think the latest posts block has featured images so can’t do a like for like match.
    Have you tried the wpshowposts.com plugin ?

    #1211456
    Tim

    Hi David

    Yes, I have now implemented wp show posts.

    I noticed that there is a field for specifying button class, but I’m not sure what that should be.

    #1211804
    David
    Staff
    Customer Support

    The CSS Class field is solely for developers to add their own class to target.

    To style the read more to match the blog you could do this:

    a.wp-show-posts-read-more, a.wp-show-posts-read-more:visited {
        padding: 10px 20px;
        color: #ffffff;
        background-color: #0066b2;
        border: none;
    }
    
    a.wp-show-posts-read-more:focus, a.wp-show-posts-read-more:hover {
        background-color: #0096d6;
        border: none;
    }

    Or you will find the Pro version of WP Show Posts provides a lot of styling controls.

    #1212646
    Tim

    Hi David

    Again I need to match the style of these lists to the Volume Blog. I see there are a ton of classes to wade through, but perhaps you have a shortcut to styling these ?

    
    wp-show-posts-inner
    wp-show-posts-entry-header
    wp-show-posts-entry-title
    wp-show-posts-entry-meta wp-show-posts-entry-meta-below-title post-meta-inline
    wp-show-posts-posted-on wp-show-posts-meta
    wp-show-posts-entry-date published
    wp-show-posts-updated
    wp-show-posts-image wpsp-image-left
    wp-show-posts-entry-summary
    wpsp-read-more
    wp-show-posts-read-more
    wp-show-posts-entry-meta wp-show-posts-entry-meta-below-post post-meta-stack
    wp-show-posts-terms wp-show-posts-meta a

    Thanks

    Tim

    #1212957
    David
    Staff
    Customer Support

    Titles – they use the same Typography settings as the H2 and the colors are the body colors in the customizer. If you want to override them separately this CSS:

    .wp-show-posts .wp-show-posts-entry-title a {
        /* Styles here */
    }
    
    .wp-show-posts .wp-show-posts-entry-title a:hover {
        /* Styles here */
    }

    The excerpt on the blog is being adjusted by this CSS, so you can include .wp-show-posts-entry-summary ( added below ):

    .entry-summary, .entry-meta, .wp-show-posts-entry-summary {
        font-size: 0.75em;
        margin-top: 1em;
    }

    Meta edit the following CSS and include .wp-show-posts-meta a selector ( added below ) :

    
    .hero-category a, .post-nav, .entry-meta .cat-links a, .wp-show-posts-terms a {
        padding: 6px 12px;
        border-radius: 3px;
        font-size: 0.7em;
        text-transform: uppercase;
    }
    
    .hero-category a, .post-nav, .entry-meta .cat-links a, .wp-show-posts-terms a {
        background-color: #0066b2;
        color: #fff !important;
    }
    #1213581
    Tim

    Hi David

    Thank you for your input. I added those changes.

    Following your lead I noticed that the thumbnail also needed the same treatment by adding .wp-show-posts-image here:

    .blog .post-image, .archive .post-image, .search .post-image, .wp-show-posts-image {
        margin: 0.5em 0 1em 0 !important;
    	float: none !important;
    }

    and .wp-show-posts-image img here:

    .blog .post-image img, .archive .post-image img, .search .post-image img, .wp-show-posts-image img {
        width: 100%;
        height: 250px;
        -o-object-fit: cover;
        object-fit: cover;
    }

    However, there are discrepancies.
    -The H2 is a different color than the Volume Blog.
    -The date has been overridden with a blue background.
    -The space between the thumbnail and the excerpt is different.
    -The Excerpt margin-bottom is overridden.
    -The Read more text does not have the same weight and the padding renders differently even though devtools says they are the same.

    Is using wp show posts at odds with the original theme styling in some way, or are there many more classes that need to be edited or added ?

    #1218342
    David
    Staff
    Customer Support

    I edited the CSS here switching .wp-show-posts-meta a for .wp-show-posts-terms a so only the terms and not the date are affected.

    Also the first 2x blocks of code there ie. begining with .wp-show-posts .wp-show-posts-entry-title a { you can use for changing the title colors.

    The read more CSS here just requires a font-weight: property to match your customizer styles.

    That should cover most of the primary differences.

    #1219251
    Tim

    Hi David

    Thank you for pointing me in the right direction.

    In the end I had to pick through the CSS comparing until I got everything looking the same:

    /* WP Show Posts  */
    
    .wp-show-posts-entry-header {
        margin:0;
    }
    
    .wp-show-posts-entry-meta {
        font-size: .75em;
        margin-top: 1em;
        line-height: 1.5;
    }
    
    .wp-show-posts-image img {
        vertical-align: inherit;
    }
    
    .wpsp-read-more {
        margin: 0;
    }
    
    .wp-show-posts-entry-meta.wp-show-posts-entry-meta-below-post.post-meta-stack {
        margin-top: 2em;
    }
    
    a.wp-show-posts-read-more, a.wp-show-posts-read-more:visited {
        padding: 10px 20px;
        margin-top: 1em;
        color: #ffffff;
        font-weight: 600;
        font-size: 0.75em;
        background-color: #0066b2;
        border: none;
    }
    
    a.wp-show-posts-read-more:focus, a.wp-show-posts-read-more:hover {
        background-color: #0096d6;
        border: none;
    }

    The only thing I seem to be missing now is the space between each <article> in the list. The Blog seems to use <div class="inside-article"> for this purpose, but WPSP doesn’t have that <div>. What do you suggest ?

    Thanks

    Tim

    #1219423
    David
    Staff
    Customer Support

    It does have its own inner container but for simplicity would be easier just to adjust the bottom margin like so:

    
    /* Mobile */
    .wp-show-posts:not(.wp-show-posts-columns) .wp-show-posts-single:not(:last-child) {
        margin-bottom: 70px;
    }
    
    /* Desktop */
    @media(min-width: 769px) {
        .wp-show-posts:not(.wp-show-posts-columns) .wp-show-posts-single:not(:last-child) {
            margin-bottom: 100px;
        }
    }
    #1220310
    Tim

    Hi David

    That certainly renders the page as expected. Thank you!

    I have a follow-up question.

    I guess there is a reason why the Blog list puts each item in an <article> container as a self-contained piece of related content that has a pudate.

    So shouldn’t wpsp also put each post in an <article> container ?

    #1220479
    David
    Staff
    Customer Support

    WPSP are added as <article> elements 🙂

    #1220593
    Tim

    Whoops, my bad. I kept missing them.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.