[Resolved] ACF Image field displayed in Query loop

[Jason]

Hi guys. I feel like this should be possible, but…

I’m trying to display a custom image field from ACF in a GP pro query loop block as a grid on the homepage titled “featured products” (custom post type and custom taxonomy – not woocommerce).

The image field is being output as an array from ACF, and I’m using a portable hook shortcode with a custom hook to display the image. It works fine on the single product template, but it is not displaying in the query block. The query block is pulling the rest of the data from post meta names just fine.

The code I’m using to generate the shortcode:

function product_main_image($atts, $content = null) {
      ob_start();
      do_action('prod_main_img');
      return ob_get_clean();
}
add_shortcode('product_main_image', 'product_main_image');

The custom hook code:

<?php 
$image = get_field('product_main_image');
if( !empty( $image ) ): ?>
    <img class="product-main-image" src="<?php echo esc_url($image['url']); ?>" class="product-main-image" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>

Instead of the image block on the query loop, (I understand now that doesn’t work with array output) I’m trying to display as a shortcode block in a container. I’m able to use this process in other areas on the website and assume my issue has something to do with the query block functionality. Any help understanding this would be great. Thanks, so much.

[Ying]

Hi Jason,

Does the shortcode output anything at all in the query loop?

Let me know!

[Jason]

No, no output at all. Only the container that it’s nested in.

[Jason]

Ok, so what I’m trying to do ultimately, is display featured post archive loop (custom post type) on the homepage based on a custom taxonomy relationship. My custom post type is ‘products’ and related taxonomy is ‘product_display’ and the choice would be ‘featured’. I’m using ACF and CPT UI for the framework and my output for the main product image is an array from ACF. Without changing the output to URL, is there an easy way to display the post loop based on taxonomy? I don’t think the query loop block will work because of the array output on the image (all other text items display fine) so I’ll have to write some code.

I know just enough about PHP to get in trouble, so any help or suggestions would be great. If there is a way to display the image with a shortcode as I mentioned above, I’m all ears – otherwise maybe some code suggestions. Thank you so much!

[Fernando]

Hi Jason,

To clarify, do you want to output the ACF image array field added in posts in your Query Loop, and you already have a working shortcode for that? Also, this Shortcode works if added manually on a post, but not in a loop?

Let us know.

[Jason]

Fernando, yes, exactly. I’ve used the portable hook shortcode to display the image on the post, and it works. When attempting to add the shortcode to the query loop on the homepage, the image does not display and nothing is output. I’m happy to create an admin account for you to take a look if you’d like. Thank you for your time.

[Fernando]

I see. We can try to inject the shortcode through a filter. By default, shortcodes using get_post_meta() or anything post meta related doesn’t work. This is a core issue with WordPress.

Can you share the link to where we can view your current Query Loop so we can have an idea of a potential approach?

[Jason]

Link included in PM. I just realized that none of the post meta items are working in the query loop, and it’s making me crazy because I swear they were working before… Only the title and “date”. I’ve changed the date block to a post meta block and it’s still displaying the date. Anyway, that may be a clue. Thanks again for your time.

[Jason]

Edit – Now the other post meta fields are back and displaying correctly. Only the image is missing, (from shortcode block)

[Jason]

Forgive my noob questions, but am I missing something in this code if the custom post shown is related to a taxonomy? Would that even matter?

<?php 
$image = get_field('product_main_image');
if( !empty( $image ) ): ?>
    <img class="product-main-image" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>

edit- sorry, just re-read your message about using a filter with shortcode. I understand now what you were saying about shortcodes not accepting post meta items. Carry on with potential filter. Thx

[Jason]

Link in PM if you have time to check. Many thanks

[Fernando]

So the Shortcode is [home_featured_prod] and it appears on top of the Query Loop Post Template?

[Jason]

Yessir

[Jason]

The hook is an element hook named “Portable Hook – Product Main Image”

The Portable hook shortcode is:

function homepage_featured($atts, $content = null) {
      ob_start();
      do_action('homepage_featured_prod');
      return ob_get_clean();
}
add_shortcode('home_featured_prod', 'homepage_featured');

[Fernando]

And, basically you’re just hooking this code to that hook?:

<?php 
$image = get_field('product_main_image');
if( !empty( $image ) ): ?>
    <img class="product-main-image" src="<?php echo esc_url($image['url']); ?>" class="product-main-image" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>

[Author]

Posts