[Resolved] ACF Image field displayed in Query loop

[Jason]

That’s correct – if possible

[Fernando]

Try adding to my-query-header the Class list of the first Headline Block in your Query Loop. Then add this PHP:

add_filter( 'render_block', function( $block_content, $block ) {
    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'my-query-header' ) !== false ) {
$image = get_field('product_main_image');

if( !empty( $image ) ) {
	$my_append = '<img class="product-main-image" src="' . esc_url($image['url']) . '" class="product-main-image" alt="' . esc_attr($image['alt']) . '"/>';
	$block_content = $my_append . $block_content;
}

		
    }

    return $block_content;
}, 10, 2 );

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

[Jason]

I may be doing this wrong.. bear with me pls – I replaced my code with this, I may be completely off, here, but it doesn’t work. I also tried adding this code to the end without replacing, and nothing. Should this be a totally different snippet?

add_filter( 'render_block', function( $block_content, $block ) {
    if ( !is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'gb-headline gb-headline-0f7cabbe gb-headline-text' ) !== false ) {
$image = get_field('product_main_image');

if( !empty( $image ) ) {
	$my_append = '<img class="product-main-image" src="' . esc_url($image['url']) . '" class="product-main-image" alt="' . esc_attr($image['alt']) . '"/>';
	$block_content = $my_append . $block_content;
}

		
    }

    return $block_content;
}, 10, 2 );

[Jason]

Ok, I think I understand more of what you were trying to do there, and I believe I answered my last question (trying by replacing the whole hook with that code and adding the class list), it’s still not working. – super appreciate you spending the time to work on it. I’m officially cross-eyed and must call it a day. I’ll check the forum in the morning. Fernando, you’re a rockstar. Thanks for sticking with me. The quest continues…

[Fernando]

Actually, to be sure, does this code work if you add it directly to a post?: https://generatepress.com/forums/topic/acf-image-field-displayed-in-query-loop/#post-2372974

Try replacing gb-headline gb-headline-0f7cabbe gb-headline-text

with just this: gb-headline-0f7cabbe

[Jason]

When I add the query loop to a (single) post template, (using the original method), the image is displayed, but it outputs the image of the post that it’s on, not the “featured” post. So, the grid that displays is all correct except for the image, which just repeats in every container of the grid the current post where the loop resides…

So, that tells me the hook is working, but something needs to be added to it to tell it to pull from the post in the grid, not from the page where it is parked. I have the concept in mind but not sure how to execute it.

[David]

Hi there,

shortcodes inside a Query Loop ( both the GB version and the core block ) will not pull the current post ID, they automatically fall back to the ID of the page.

This is untested, but what happens if you add that shortcode inside a Container Block, and enable the dynamic data options on that container block eg. display featured image. Just a thought, as the shortcode inside that container may now be passed the correct ID. Let me know.

[Jason]

Hi David. Thank you – good to know about the shortcodes in Query blocks. That will save me some time in the future…

I attempted to enable the dynamic content on the container that housed the shortcode, and nothing happened. Are there any settings that are important in that theory I may be missing? eg. current post vs post type, etc…

Just so I understand correctly, the thought is that by making the parent container dynamic, the inner shortcode would work as expected, right? Thanks for your time.

[David]

Just so I understand correctly, the thought is that by making the parent container dynamic, the inner shortcode would work as expected, right? Thanks for your time.

Yeah, that was the big stab in the dark theory…. which obviously didn’t pay off lol.

Ok, so why the need for the shortcode ?
If the image is stored in the post meta ( ACF get_field ) and its not part of an array or a options page, then you should be able to just use the GB Image Block and set it to display that post meta field.

Sorry i haven’t digested the entire thread, so if you could let me know what i a missing.

[Jason]

The reason I’ve been trying to use array output for images is that I’d like to include other data like alt tags, dynamically. I only know enough about PHP to get into trouble, so there may be a way to include that data and still output as URL or ID? My understanding was that it was only array output that would offer the flexibility for other data.

That’s when I found the portable hook shortcode method and began using that on my single post pages, and it worked great. Then the thought of a “featured posts” on the homepage came up and I just assumed a shortcode would work in a query loop (wrong), and here we are.

The end goal is to have a “featured products” section on the homepage based on a custom taxonomy “featured”, displayed in an archive format. I could absolutely be missing the boat and thinking about it the wrong way. If you have any suggestions along how I can make that happen in a different way, I’m all ears. Thanks so much for your time!

[David]

I think we need to revisit render_block filter option.
Try:

add_filter( 'render_block', function( $block_content, $block ) {
    
    $image = get_field('product_main_image');

    if ( !is_admin() 
        && $image
        && ! empty( $block['attrs']['className'] ) 
        && strpos( $block['attrs']['className'], 'my-query-header' ) !== false
    ) {
        $block_content = '<img class="product-main-image" src="' . esc_url($image['url']) . '" class="product-main-image" alt="' . esc_attr($image['alt']) . '"/>';
    }

    return $block_content;

}, 10, 2 );

And then simply add any block to the page and give it a CSS CLass of: my-query-header

[Jason]

Wow… just wow. It works! Now I have all kinds of questions about sizing and whatever, but I can figure all that out. This has made my day/week/month. Thank you so much! You guys rock

[David]

Awesome – glad to be of help!!

[Author]

Posts