Slider of blogs at Homepage & Post Hero Layout

Hi there,

we don’t have a Slider option for Displaying Posts.
For now you would need to use a dedicated Post Slider plugin to do that.

The single post hero you can build using a GP Block Element – Page hero:

https://docs.generatepress.com/article/block-element-page-hero/

Set the elements Display Rules Location to: Posts > All Posts

Use the GenerateBlocks Plugin to build the layout and add the dynamic data.

For the base layout you would create:

Container Block #1
---- Container Block #2
---- ---- Container Block #3 Left column
---- ---- ---- Image Block
---- ---- Container Block #4 Right column
---- ---- ---- Headline blocks for title
---- ---- ---- Headline blocks for description ( Excerpt ?)
---- ---- ---- Container Block #5 for Post Meta row
---- ---- ---- ---- Button blocks for post meta

Container Block #2
Set the Sizing > Max Width to Global Max Width by clicking the blue globe icon
Set the Spacing > Margin Left & Margin Right to auto
Set the Layout > Display to Flex, switch to Mobile view and set the Display to Block

Container Block #3 & Container Block #4
Set the Sizing > Width to the % you require eg. 50% for each column or 40 / 60….
Switch to Mobile view and set the Width to 100%

GB Image Block
In the GB Image Blocks settings activate the Dynamic Data and set the Content Source to Featured Image.

Blocks inside the Right Column,
Here you would need to add the headlines for the Title and Description ( Post Excerpt ? )

Container Block #5
Set the Layout to Display Flex and Flex Wrap to Wrap
Within this container you can add the Button blocks and set there dynamic data to show the Post Author and the List of Terms.

For the Reading Time you will need to create a shortcode to display that. See here:
https://generate.support/topic/reading-time-with-generateblocks/#post-86125

Edit your single post block element content template.
And open the List View

Expand the top Container Block and select its inner Container.
Set the blocks Spacing -> Margin Left & Right to auto

That will center that container for your.

1. Add this PHP code to create a shortcode [reading_time] .

add_shortcode( 'reading_time', function() {
    ob_start();
  
    $post = get_post();
    $content = $post->post_content;
    $wpm = 238; // How many words per minute.

    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = str_word_count( $clean_content );
    $m = ceil( $word_count / $wpm );
	if($m < 2) {
		$time = '<div class="reading-time"> 1 min</div>';
	} else {
		$time = '<div class="reading-time"> '.$m . ' mins</div>';
	}
	
    echo $time;
    return ob_get_clean();
} );

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

2. Add the shortcode [reading_time] via a headline block in your element.

Hi there,

How to add this PHP code exactly?

This article provides methods on how to add the PHP:
https://docs.generatepress.com/article/adding-php/

Also, please elaborate on adding shortcode via headline block.

After adding the Headline block, just type in the shortcode name with square brackets, like this: [reading_time]