[Resolved] Executing code IF a GeneratePress element is displaying on page

[William]

Hi there,

I’ve have done research and have hit a roadblock!

It’s possible to use conditions to display GeneratePress elements. However, is it possible to execute code IF a GeneratePress element is active/displaying?

For example, I have two header elements – one has an image above the fold, and the other has an image below the fold.

For the element with the image above the fold, I want to make code that executes a preload of the image if the element is displaying. If the element is displaying with the image below the fold, the preload does not execute.

Is this possible?

Many thanks,

Will

[David]

Hi there,

GP registers the global $generate_elements; variable, so you can query this to see what elements are on a page.

But I get the impression ( or recall ) that these elements are a displayed using a specific PHP Snippet, can you share that with us ? Might be able to see best way to do this

[William]

That’s great. How would I incorporate that variable into an if statement?

It’s a little complicated. I basically have the ‘bad LCP image’ element as a default, and then have multiple snippets of code to display other elements, if certain conditions are met:

add_filter( 'generate_header_element_display', function( $display, $element_id ) {
    if ( 2553606 === $element_id ) { // Only target specific Element
        if ( ! has_post_thumbnail() ) {
            $display = false;
        }
    }

    return $display;
}, 10, 2 );

and

add_filter( 'generate_element_display', function( $display, $element_id ) {
	
	$categories= get_the_category();
    $term = get_category($categories[0]->term_id);
    $category_description = get_field( 'poet_description', $term );
	$category_top_articles = get_field( 'poets_top_articles', $term );
	
	/* Code for full poem page hero */
	    if (get_field('poem_svg_icon') && get_field('poem_review_analysis') && get_field('central_message_poem') && get_field('speaker_poem') && has_post_thumbnail() && has_term( '','nationality') && has_term( '','time_period') && has_term('','poem_theme') && has_term('','emotions') && has_term('','poem_form') && !empty($category_description) && is_single() )	{
	
    	if ( 2603263 === $element_id )	{
      	  $display = true;
 	   } else if ( in_array( $element_id, array( 2553606, 2553607) ) ) {
            $display = false;
		}
	}	
	
	/* Code for full poem page hero excluding featured image and review */
		    if (get_field('poem_svg_icon') && get_field('poem_review_analysis') && get_field('central_message_poem') && get_field('speaker_poem') && !has_post_thumbnail() && has_term( '','nationality') && has_term( '','time_period') && has_term('','poem_theme') && has_term('','emotions') && has_term('','poem_form') && !empty($category_description) && is_single() )	{
	
    	if ( 2603874 === $element_id )	{
      	  $display = true;
 	   } else if ( in_array( $element_id, array( 2553606, 2553607) ) ) {
            $display = false;
		}
	}	
	
	
		/* Code for William Blake Test and Carol Ann Duffy Test */ 
		    if ( !empty($category_description) && in_category( [ 'William Blake', 'Carol Ann Duffy' ] ) && is_single() && !is_single( ['2540477', '2540208' ] ) )	{
	
    	if ( 2605134 === $element_id )	{
      	  $display = true;
 	   } else if ( in_array( $element_id, array( 2553606, 2553607) ) ) {
            $display = false;
		}
	}	
	
    return $display;
	
}, 10, 2 );

, for example.

[David]

You can do something like this:

add_action('wp_head', function(){
    // get the generate elements variable
    global $generate_elements;

    // loop through all elements on page
    foreach ( $generate_elements as $generate_element ) {

        // if element matches an ID 
        if ( $generate_element['id'] === 12345 ) {
            // output your preload link here
        }

    }
});

So we’re hooking into the wp_head which is where you want to insert your preload link.
And we loop over the $generate_elements and check if it matches an ID.

Where does the image you want to preload come from ?

[William]

Yes that is amazing thank you! I have quite a few different header elements that have different conditions to showing, such as if certain custom fields are filled etc.

Is this the best way to add code to a page based on an element appearing, or is it better to include it with the same condition for the generatepress element appearing?

[David]

So the generate_element_display filter can only be used to show/hide the element. You can’t use it to add other content or content. Its a one trick pony 🙂

The function i provided above is specific to loading stuff in the <head> and use the element ID for conditional checks, of which it could check many and return different results for each, and within each check you can test other conditions like that of a post_meta value eg.

add_action('wp_head', function(){
    // get the generate elements variable
    global $generate_elements;

    // loop through all elements on page
    foreach ( $generate_elements as $generate_element ) {

        // if element matches an ID 
        if ( $generate_element['id'] === 12345 ) {
            $featured_image = get_post_meta( get_the_ID(), 'my_custom_field', true );
            if ( $featured_image ) {
                // output your preload link here if $featured_image has value
            }
        }
        // if element matches anohter ID 
        if ( $generate_element['id'] === 23456 ) {
            // output your preload link here
        }
        // and if element matches anohter ID 
        if ( $generate_element['id'] === 34567 ) {
            // output your preload link here
        }
    }
});

Does that help?

[William]

Yes this is amazing David, a ground-breaking piece of code I really think can be super useful to GeneratePress – thank you!!!

[David]

You’re welcome !

[Author]

Posts