[Support request] Top Articles

Hi there,

At first glance, this one resembles GP’s Dispatch – https://gpsites.co/dispatch/

Except the magazine grid is 2-1-2 with 25% – 50% – 25% width ratio.

I believe we can achieve something like this with 2 or 3 lists.

with 2 WPSP list setup, we’ll need to place the 2 WPSPs in 25%/75% column block.

And then first list would be:

– placed on the 25% column.
– A list with card style set to “Overlay” with post per page count set to 2.
– Column set to 1 so the posts are stacking.

As for the second list:

– placed on the 75% column.
– card style set to “Overlay” with post per page count set to 3.
– Set the offset to “2” so it doesn’t repeat the post from the first post list.
– column set to one. (this is fine, we’ll set the layout through CSS)

The 2nd list is the tricky part because of the CSS. But we can basically just copy the CSS of Dispatch’s magazine grid for this with a few modifications so posts #4 and #5 are displayed in a stacking manner.

This is the part of the CSS dispatch uses for its magazine grid. You can play around with its values.

/* magazine Grid Golden Ratio 5 block standard */
/* Add wpsp-grid class to WPSP List shortcode wrapper */
@media (min-width: 600px) {
    .wpsp-grid .wp-show-posts {
        display: grid;
    }
}

@media (min-width: 900px) {
    .wpsp-grid .wp-show-posts {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 1fr auto;
    }

    .wpsp-grid .wp-show-posts article:first-child {
        grid-column: 1 / 5;
        grid-row: 1 / 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(2) {
        grid-column: 5 / end;
        grid-row: 1 / 2;
    }

    .wpsp-grid .wp-show-posts article:nth-child(3) {
        grid-column: 5 / 7;
        grid-row: 2 / 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(4) {
        grid-column: 7 / end;
        grid-row: 2 / 4;
    }
}

@media (max-width: 899px) and (min-width: 600px) {
    .wpsp-grid .wp-show-posts article {
        grid-column: span 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) {
        grid-row: 3;
        grid-column: span 2;
    }
}

.wpsp-grid article:not(:first-child) .wp-show-posts-image a img {
    height: 250px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.wpsp-grid article:first-child .wp-show-posts-image a img {
    height: 500px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.wpsp-grid article:not(:first-child) .wp-show-posts-entry-summary, .wpsp-grid article:not(:first-child) .wp-show-posts-entry-meta-below-post, .wpsp-grid article:not(:first-child) .wpsp-read-more {
    display: none;
}

Not exactly sure what image you’re pertaining to.

Is it this one? https://share.getcloudapp.com/YEuP8KDO

Are you trying to lay it out like this? https://share.getcloudapp.com/xQuj9ZNN

If yes, Replace these CSS:

.wpsp-grid .wp-show-posts article:nth-child(3) {
grid-column: 5 / 7;
grid-row: 2 / 4;
}

.wpsp-grid .wp-show-posts article:nth-child(4) {
grid-column: 7 / end;
grid-row: 2 / 4;
}

with these CSS:

.wpsp-grid .wp-show-posts article:nth-child(3) {
    grid-column: 6 / 5;
    grid-row: 2 / 4;
}

.wpsp-grid .wp-show-posts article:nth-child(4) {
    grid-column: 6 / end;
    grid-row: 2 / 4;
}