[Resolved] Content Template for Archive: How to show next post in inverse layout.

[Rafy]

Hi,

How do we combine two or three different content template designs for all archive pages? And set them to show up in a loop. For example, the first post in the first design, the second post in the second design, the third post in the third design, fourth post in the first design again.

https://share.cleanshot.com/e62pha

Thanks.

[Rafy]

Kindly check on the following link:

[David]

Hi there,

you could create 3 x Block Element Content Templates.

Take a note of each of the IDs.
And DO NOT set any Display Rules.

Then try this PHP Snippet to programmatically count posts in the loop and display the relevant element.

// Set up global counter
add_action( 'generate_before_loop', function() {
    global $loop_count;
    $loop_count = 0;
});
// Increase counter for each post
add_action( 'generate_before_do_template_part', function() {
    global $loop_count;
    $loop_count++;
});
// Display element based on counter modulo
add_filter( 'generate_element_display', function( $display, $element_id ) {
	
    global $loop_count;
    
    if ( is_archive() || is_home() ) {
        if ( 38 === $element_id && $loop_count % 1 == 0 ) {
            $display = true;
        }
        if ( 129 === $element_id && $loop_count % 2 == 0 ) {
            $display = true;
        }
        if ( 131 === $element_id && $loop_count % 3 == 0 ) {
            $display = true;
        }
    }
    
    return $display;
	
}, 10, 2 );

Note the 39, 129 and 131 are the IDs that need updating to match your element IDs

[Rafy]

Hi,

Thanks for the code. I applied that, but it seems to return the same results, the same post twice. I have two templates, so I removed the 3rd from the code and added the element IDs to the other two. I removed all display rules. I pasted the following code to the themes functions.php file. It returns the results but repeats the same post twice.

// Set up global counter
add_action( 'generate_before_loop', function() {
    global $loop_count;
	$loop_count = 0;
});
// Increase counter for each post
add_action( 'generate_before_do_template_part', function() {
	global $loop_count;
    $loop_count++;
});
// Display element based on counter modulo
add_filter( 'generate_element_display', function( $display, $element_id ) {
	
    global $loop_count;
    
    if ( is_archive() || is_home() ) {
        if ( 55403 === $element_id && $loop_count % 1 == 0 ) {
            $display = true;
        }
        if ( 55460 === $element_id && $loop_count % 2 == 0 ) {
            $display = true;
        }

    }
    
    return $display;
	
}, 10, 2 );

[David]

Hmmm…. it works on my local install, so it should work here.

Can you edit this code:

add_action( 'generate_before_do_template_part', function() {
    global $loop_count;
    $loop_count++;
});

And change it to:

add_action( 'generate_before_do_template_part', function() {
    global $loop_count;
    $loop_count++;
    echo 'loop counter: ' . $loop_count;
});

This should print out the loop counter value before each post, so we can see if thats working.

[Rafy]

I tried that code, but it has started to display loop counter:1, loop counter:2, loop counter:3, with no change to the output.

Screenshot: https://share.cleanshot.com/VMpN4R

Here is the current code:

// Set up global counter
add_action( 'generate_before_loop', function() {
    global $loop_count;
	$loop_count = 0;
});
// Increase counter for each post
add_action( 'generate_before_do_template_part', function() {
    global $loop_count;
    $loop_count++;
    echo 'loop counter: ' . $loop_count;
});
// Display element based on counter modulo
add_filter( 'generate_element_display', function( $display, $element_id ) {
	
    global $loop_count;
    
    if ( is_archive() || is_home() ) {
        if ( 55403 === $element_id && $loop_count % 1 == 0 ) {
            $display = true;
        }
        if ( 55460 === $element_id && $loop_count % 2 == 0 ) {
            $display = true;
        }

    }
    
    return $display;
	
}, 10, 2 );

[David]

Thats good, it shows that the counter value is working.
Would it be possible to get admin access to the site so i can see why that filter isn’t working ?

[Rafy]

Sure, here:

[David]

Ok, sorry for the delay.
Complete change of plan 🙂

You require only One Content Template that combines both of the templates. Stacked one above the other.
Each should have their own top level Container to keep them separate, and in those containers we need to add a CSS Class.

For template one container add: content-template-one
For template two container add” content-template-two

Now we use this snippet and the render_block filter to remove the container:

add_filter( 'render_block', function( $block_content, $block ) {

    global $wp_query;
    $index = $wp_query->current_post + 1;
	
	if ( !is_admin() && ! empty( $block['attrs']['className'] ) ) {
		if ( 
			'content-template-one' === $block['attrs']['className']
			&& $index % 2 == 0
		) {
			$block_content = null;
		} 
	}

    return $block_content;

}, 10, 2 );

add_filter( 'render_block', function( $block_content, $block ) {

    global $wp_query;
    $index = $wp_query->current_post + 1;
	
	if ( !is_admin() && ! empty( $block['attrs']['className'] ) ) {
		if ( 
			'content-template-two' === $block['attrs']['className']
			&& $index % 2 == 1
		) {
			$block_content = null;
		} 
	}

    return $block_content;

}, 10, 2 );

[Rafy]

It worked! Many thanks.

[David]

Phew…. glad to hear that.

[Author]

Posts