[Resolved] Showing same post grid layout as in default archive/index

Home Forums Support [Resolved] Showing same post grid layout as in default archive/index

Home Forums Support Showing same post grid layout as in default archive/index

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1575033
    sirlouen

    How can I show the same layout as in archive/index for a list of WP_query’d blog posts in a different part of the site?

    I’ve noticed that by using the default “content” template part as suggested by function generate_do_template_part it is not shown the same way. For example: the featured images are not even shown in “content.php”

    What I’m missing? Where are the template parts actually are in Generatepress?

    #1575686
    sirlouen

    I think I’ve found the issue:

    generate_post_image is hooked to generate_after_entry_header with the conditional
    not “is_singular” and not “is_404”, which means that replicating this content template won’t work either for 404 or post/pages

    Default imported theme blog structure doesn’t seem to be meant to be replicated outside archives/blog pages unfortunately, which is a drawback because it looks pretty cool

    I’ve tried Tom’s WP Show Posts short code but the look is not that awesome…

    WP Show Posts 3 column structure:

    wp show post 3 column structure

    LH Consulting’s Broadcast GP template content 3 column structure:

    3 column structure broadcast template

    PS: Probably with WPSP Pro I could do the trick… but hoped I could replicate it via code/templating.

    #1575747
    David
    Staff
    Customer Support

    Hi there,

    when you say in a different part of your site – is this a separate Archive page or within the content of a page/post ?

    #1575753
    sirlouen

    Within the content of a page/post

    #1575786
    David
    Staff
    Customer Support

    In that case i would recommend the WPSP plugin – the Pro version has more styling controls, and a fancy card feature:

    https://demos.wpshowposts.com/cards/

    Or i am more than happy to provide you some CSS to make the free version match your existing site styles

    #1575871
    sirlouen

    Yes I was thinking that WSPS Pro could make this happen (for example, that featured post in the first position), but I don’t want to invest more atm.

    In fact, I see that most of this blog functionality and styling is provided by Blog premium module, not generatepress itself and profiled by LH Consulting’s Broadcast customization.

    I think this is a dead end on my journey to copy/paste replication of the blog page inside a page.

    #1575995
    David
    Staff
    Customer Support

    As i said i am happy to provide some CSS to style the WPSP Free version to match. If you want to set up a test page with the WPSP in place and share me a link ill take a look.

    #1577533
    sirlouen

    Ok David, here I provide you the access data

    Main static page with blog posts based on WSPS: https://demo.ponoi.me/
    Blog posts based on LH Consulting’s Broadcast template: https://demo.ponoi.me/blog/

    Looking forward to hearing from you
    Regards

    #1578344
    David
    Staff
    Customer Support

    Lets do some future proofing first. By adding a Wrapper around the WPSP post content. This way if you want to add more content to the Post eg. excerpt, terms etc. they will keep the card styling.
    To do this you need to create 2 x Hook Elements:

    https://docs.generatepress.com/article/hooks-element-overview/

    First Hook
    Title: WPSP Open Content Wrapper
    Content:

    <div class="wpsp-content-wrap">
    <!-- Openeing wrapper -->

    Note: when you add the HTML to the hook it will auto add a </div> – you must delete that.
    Hook: Custom Hook –> Enter in the field provided: wpsp_before_header
    Priority: 15
    Display Rules: Entire Site

    Second Hook
    Title: WPSP Close Content Wrapper
    Content:

    <!-- Close WPSP Wrapper -->
    </div>

    Hook: Custom Hook –> Enter in the field provided: wpsp_after_content
    Priority: 15
    Display Rules: Entire Site

    Let me know once thats setup so i can then work on the CSS.
    If you want to display the Read More button, can you enable that in your WPSP list.

    #1578347
    sirlouen

    Hello David
    Done, two hooks and Read More button included

    #1578653
    David
    Staff
    Customer Support

    Now add this CSS:

    /* post card style */
    
    .wp-show-posts-columns .wp-show-posts-inner {
        display: flex;
        flex-direction: column;
        border-radius: 3px;
        transition: all 0.2s ease-in;
        transform: scale(1);
        box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
    }
    .wpsp-content-wrap {
        padding: 0 30px 20px;
        background-color: #fff;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    /* Heading style */
    .wp-show-posts-entry-title a,
    .wp-show-posts-entry-title a:hover {
        color: #00253e;
    }
    
    /* Button Styling */
    .wpsp-read-more {
        display: block;
        text-align: center;
        margin-top: auto;
    }
    
    a.wp-show-posts-read-more, a.wp-show-posts-read-more:visited,
    a.wp-show-posts-read-more, a.wp-show-posts-read-more:hover {
        color: #00a390;
        background-color: #ffffff;
        font-size: 17px;
        line-height: 1.5em;
        padding: 10px 20px;
        border-width: 1px;
        border-style: solid;
        border-color: inherit;
        border-radius: 3px;
    }
    
    a.wp-show-posts-read-more:hover {
        color: #000;
    }
    
    /* Hover effects desktop only */
    
    @media (min-width: 769px) {
        .wpsp-read-more {
            opacity: 0;
            transition: all 0.3s ease-in-out;
        }
        .wp-show-posts-inner:hover .wpsp-read-more {
            opacity: 1;
        }
        .wp-show-posts-columns .wp-show-posts-inner:hover {
            transform: scale(1.01);
            box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
        }
        .wp-show-posts-single.post:first-child {
           width: 66.666%
        }
    }
    #1582032
    sirlouen

    Nice CSS, for some reason I did not receive the notification from the last update 🙁
    How would you make the first element more prominent compared to the others like in the LH Consulting’s Broadcast customization

    #1582529
    David
    Staff
    Customer Support

    Just updated the CSS above to include that 🙂

    #1583080
    sirlouen

    Looks great.
    I think this does the trick.
    Thanks for the support.

    #1583151
    David
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.