Volume: Lazy loaded Infinate scroll of Blog & Latest Posts

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.

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

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 ?

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.

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.

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

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;
}

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 ?

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.

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

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;
    }
}

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 ?

WPSP are added as <article> elements :)

Whoops, my bad. I kept missing them.