Archived topic

Custom Post Type: Page hero element is not showing

27 replies · Started by webteam on February 16, 2022

Viewing posts 16–28 of 28

February 20, 2022 at 9:14 pm #2126936

Can we try doing a var_dump of the post meta?

You can do it with this code:
var_dump( get_term_meta( get_queried_object_id(), 'category_image', bool $single = false ) );

If you run this, a bunch of string will appear on the page. It should show us the actual value stored on the category_image.

Once we see it, we should know what to do with it.

Let us know. :)

February 20, 2022 at 10:43 pm #2126996

Hi Elvin,

Not sure if the code is wrong, it's only showing "string(4) "2251" for the category.

This is the code used in funtions.php (new ACF field is 'category_image_pts')

function get_acf_category_featured_image( $url ) {
		$term = get_queried_object();		
		$background_image = get_field('category_image_pts', $term);
		if ( $background_image ) {
			$url = $background_image;
			var_dump( get_term_meta( get_queried_object_id(), 'category_image_pts', true));		
    	}
    	return $url;		
}

add_action('wp', function(){
	if(is_archive()){
		add_filter( 'generate_after_header', 'get_acf_category_featured_image'  );
	}
});

February 20, 2022 at 10:59 pm #2127003

That means its returning an Image ID instead of an Image Array or Image URL.

We can use this to get the url using this snippet:

$img_ID = get_term_meta( get_queried_object_id(), 'category_image_pts', true);
$img_src = wp_get_attachment_image_src($img_ID, 'full');

Where $img_src is the URL of the term meta image. With this, you can do $url = $img_src.

Can you do a var_dump($background_image); as well? just to know what ACF returns.

February 20, 2022 at 11:17 pm #2127016

Sweet, that's right. var_dump($background_image); also returns the ID, and the var_dump($img_src) now returns the actual URL if category already has and without listing (but not the fallback image)


string(4) "2385" 
array(4) { [0]=> string(109) "https://professionaltrainingsolutionscomau.wpstaging.io/wp-content/uploads/2022/02/Rectangle-14pts-mining.jpg" [1]=> int(1180) [2]=> int(1180) [3]=> bool(false) }

February 20, 2022 at 11:30 pm #2127024

Now that we have something we can use for the image, let's do the fallback image.

About the code:

Can you explain what's the goal for this code?

add_action('wp', function(){
	if(is_archive()){
		add_filter( 'generate_after_header', 'get_acf_category_featured_image'  );
	}
});

To understand if the goal matches what this code actually does.

As it is, it does nothing as you're using a filter for an action hook.

If you wish to apply the background to the container block, you'll need a different filter.

Or you can assign the PHP value with CSS.

February 20, 2022 at 11:43 pm #2127034

That code bit was used from a different thread via the forum, it is just to see the output at least var_dump on the Archive template.
And yes, the background needs to be applied to the container block as other pages.
Can we go forward with the correct hook, please?

February 20, 2022 at 11:58 pm #2127046

You'll need the generateblocks_background_image_url filter:

Example usage:

add_filter( 'generateblocks_background_image_url', function( $url, $settings ) {
    $field_img = get_term_meta( get_queried_object_id(), 'category_image_pts', true);

    //targets a specific container block 
    if ( 'unique-id' === $settings['uniqueId'] ) {

        return get_the_post_thumbnail_url();
    }

    return $url;
} );

To clarify further, is this result:
array(4) { [0]=> string(109) "https://professionaltrainingsolutionscomau.wpstaging.io/wp-content/uploads/2022/02/Rectangle-14pts-mining.jpg" [1]=> int(1180) [2]=> int(1180) [3]=> bool(false) } from doing a var_dump of $img_src?

If yes, to get the actual URL, you need to do $img_src[0].

Like this:

add_filter( 'generateblocks_background_image_url', function( $url, $settings ) {
    $img_ID = get_term_meta( get_queried_object_id(), 'category_image_pts', true);
    $img_src = wp_get_attachment_image_src($img_ID, 'full');

    /* targets a specific container block */
    if ( 'unique-id' === $settings['uniqueId'] && is_archive() ) {
        /* if field has value */
        if( $img_src[0] ){
            $url = $img_src[0];
        } 
    }
    return $url;
} );

unique-id is the number suffix you see on a container block when you inspect it. Example - https://share.getcloudapp.com/bLuxndBz

The fallback is assigned on the container block - https://share.getcloudapp.com/NQuxP7Nq

But we can assign it through the code as well.

February 21, 2022 at 12:26 am #2127064

Yes that's for var_dump of $img_src.

And the function gives the below error.
Uncaught ArgumentCountError: Too few arguments to function {closure}()

February 21, 2022 at 12:41 am #2127072

Strange, didn't get the error when I tested this.

Let's try specifying the $arg and priority and moving it to a callback function.

Try this:

add_filter( 'generateblocks_background_image_url', 'get_acf_category_featured_image', 20, 2 );

function get_acf_category_featured_image( $url, $settings ) {
    $img_ID = get_term_meta( get_queried_object_id(), 'category_image_pts', true);
    $img_src = wp_get_attachment_image_src($img_ID, 'full');

    /* targets a specific container block */
    if ( 'unique-id' === $settings['uniqueId'] && is_archive() ) {
        /* if field has value */
        if( $img_src[0] ){
            $url = $img_src[0];
        } 
    }
    return $url;
}

Reminder: While this workaround can work, it's unusual that an ACF field that's suppose to return URL returns an ID instead.

I remember ACF having a bug with fields that were originally text fields turned into image fields having this issue but I'm not sure if this still the case. I suggest contacting ACF about this as I believe having this fixed is the better approach instead of having workarounds.

February 21, 2022 at 12:53 am #2127079

Thanks for the quick fix. It works.

The only thing now is the fallback image (on that element) does not work if the category is empty. Can see the container ID is same though.
https://professionaltrainingsolutionscomau.wpstaging.io/category/mining-courses/

Also, we will contact the ACF as it is strange to see the "Image" field output as you suggested.

February 21, 2022 at 1:16 am #2127093

Try this:

add_filter( 'generateblocks_background_image_url', 'get_acf_category_featured_image', 20, 2 );

function get_acf_category_featured_image( $url, $settings ) {
    $img_ID = get_term_meta( get_queried_object_id(), 'category_image_pts', true);
    $img_src = wp_get_attachment_image_src($img_ID, 'full');

    /* targets a specific container block */
    if ( 'unique-id' === $settings['uniqueId'] && is_archive() ) {
        /* if field has value */
        if( $img_src[0] ){
            $url = $img_src[0];
        } elseif ( !$img_src[0] && ! empty( $settings['gpUseFallbackImageBg'] ) && !have_posts() ) {
			if ( isset( $settings['bgImage']['id'] ) ) {
				$image_size = ! empty( $settings['bgImageSize'] ) ? $settings['bgImageSize'] : 'full';
				$image_src = wp_get_attachment_image_src( $settings['bgImage']['id'], $image_size );

				if ( is_array( $image_src ) ) {
					$url = $image_src[0];
				} else {
					$url = $settings['bgImage']['image']['url'];
				}
			} else {
				$url = $settings['bgImage']['image']['url'];
			}
		}
    }
    return $url;
}

This assumes the fallback toggle is active and there is an image assigned as fallback on the container block. :D

February 21, 2022 at 4:18 pm #2128274

Hi Elvin,

Thank you so much for the following up and the support.

It is working now and we will follow up with the ACF team to see if there is a problem with the Image tag.

This is one of our test run projects with GP and so far it has been an awesome experience.
Thank you guys again :)

February 21, 2022 at 8:11 pm #2128388

No problem. Glad to be of any help. :)

This archived topic is closed to new replies.

Start building better websites today.