Latest articles on homepage

Hi there,

The latest blog card you are referring to is built with GenerateBlocks in a Content Template:
https://docs.generatepress.com/article/block-element-content-template/

You can replicate that using a Query loop block to use it in a static page:
https://docs.generateblocks.com/article/query-loop-overview/

Let me know if this helps :)

i still cant seem to do it, the one for all category pages is

element type: content template
tag name: article
apply to: all posts

if i try to copy for homepage it doesnt work as no blog linked to homepage.

If i try and query loop i cant seem to get the same styling

Hi there,

create a new draft page.
in the Top Bar 3 dot menu, select the Code Editor.
Paste this code into the editor:

<!-- wp:generateblocks/query-loop {"uniqueId":"d5cb2d92","query":{"post_type":"post","per_page":10}} -->
<!-- wp:generateblocks/grid {"uniqueId":"8c2a0adc","columns":1,"isDynamic":true,"blockVersion":2,"isQueryLoop":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"48cdce2d","isGrid":true,"isQueryLoopItem":true,"gridId":"8c2a0adc","width":33.33,"paddingTop":"16","paddingRight":"32","paddingBottom":"24","paddingLeft":"32","isDynamic":true,"blockVersion":2,"lock":{"remove":true,"move":true}} -->
<!-- wp:generateblocks/button-container {"uniqueId":"28c2612e","marginBottom":"6","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button {"uniqueId":"ad535997","hasUrl":false,"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff","borderColor":"","borderColorHover":"","fontSize":12,"letterSpacing":0.1,"marginRight":"6","paddingTop":"4","paddingRight":"10","paddingBottom":"4","paddingLeft":"10","blockVersion":2,"useDynamicData":true,"dynamicContentType":"terms","termTaxonomy":"category"} -->
<span class="gb-button gb-button-ad535997 gb-button-text">Button</span>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->

<!-- wp:generateblocks/image {"uniqueId":"c5a13e54","sizeSlug":"medium","width":"100%","useDynamicData":true,"dynamicContentType":"featured-image"} /-->

<!-- wp:generateblocks/headline {"uniqueId":"e0c654b8","fontWeight":"700","fontSize":30,"marginTop":"16","marginBottom":"12","useDynamicData":true,"dynamicContentType":"post-title"} -->
<h2 class="gb-headline gb-headline-e0c654b8 gb-headline-text"></h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"63fd867e","element":"div","fontWeight":"700","fontSize":12,"textTransform":"uppercase","marginBottom":"16","useDynamicData":true,"dynamicContentType":"post-date"} -->
<div class="gb-headline gb-headline-63fd867e gb-headline-text"></div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"674b34e2","element":"p","fontSize":16,"useDynamicData":true,"dynamicContentType":"post-excerpt","useDefaultMoreLink":false,"excerptLength":25} -->
<p class="gb-headline gb-headline-674b34e2 gb-headline-text"></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->

Switch back to Visual Editor.

Modify the colors of the meta buttons.
And with the Query Loop selected, change its Parameters to suit your needs.
Then copy the block and add it where you need it.

thanks - thats added all the styling but when i push it live there are no links on any of the articles?

link below and section is at the bottom of the page

Yeah, i thought it would be good to leave them out, so i can explain how to add them :)

In the Query Loop block, there is the Post Template Container.
Inside of that are the individual blocks.
If you select one of the blocks , start with the Image block.
In its sidebar settings > Dynamic Data you can see the:

DATA SOURCE is set to the Current Post
CONTENT/IMAGE SOURCE is set to the Featured Image

You just need to set is LINK SOURCE to Single Post

You can repeat this for the Title.
For the Category term buttons you can set the link source to the Term Archives

awesome thats worked a treat!!

sorry last questions!

how can i change it so it doesnt have pagination? this is on normal category pages like cycling or swimming

So should it only show the latest 10 posts in an archive ?

It would be to have 20 or 30+ posts showing

You will need to ad the following PHP Snippets to your site:

// remove pagination from category archvives
add_action('wp',function(){
    if ( is_category() ) {
        remove_action( 'generate_after_loop', 'generate_do_post_navigation' );	
    }
});

// set posts_per_page for category archives
add_filter('pre_get_posts', 'category_number_of_posts');
function category_number_of_posts($query){
    if (is_paged() && $query->is_category) {
        $query->set('posts_per_page', -1);
    }
    return $query;
}

This doc explains how to add PHP:

https://docs.generatepress.com/article/adding-php/

TLDR:
Are you using a Child Theme?
If Yes, then the PHP goes in the Child Theme > functions.php
If No, then install the Code Snippets plugin ( link in the above doc ) and Add New Snippet to add the PHP

great ive updated it all and works fine on desktop but on mobile all 3 columns are squashed on the page

its as the bottom of the homepage

Edit the Query Loop, inside it there is the Post Template container block. Select that.
In its Layout you can set its width, it will be 33%. Switch to Mobile view and change the value to 100%