[Support request] Top Articles

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Top Articles

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #33915
    Hermann
    Participant

    Hello, we would like to migrate out of our current theme and begin using generate press. The one obstacle we are running into, which I believe can be solved with your superior support would be to point us in the right direction on how we can get the top section of this website http://www.nspirement.com. The section has 5 images, two on the left side, one in the middle and two on the right side. How would we be able to accomplish this? I tried playing around with the settings but did not come close. We would also like to know how to add a featured image with the excerpt to the right like we have in the latest section. Thank you so much in advance and look forward to your reply.

    #33952
    elvin
    Moderator

    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.

    #34014
    Hermann
    Participant

    Would you happen to have the CSS for dispatch magazine grid?

    #34035
    elvin
    Moderator

    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;
    }
    #34735
    Hermann
    Participant

    Sorry for the delay response. I think I have it, but how can I make the middle image a little smaller. The website I am testing on is http://www.delazing.com

    #34755
    elvin
    Moderator

    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;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.