[Resolved] ACF Image field displayed in Query loop

Home Forums Support [Resolved] ACF Image field displayed in Query loop

Home Forums Support ACF Image field displayed in Query loop

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #2372608
    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.

    #2372669
    Ying
    Staff
    Customer Support

    Hi Jason,

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

    Let me know!

    #2372671
    Jason

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

    #2372849
    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!

    #2372874
    Fernando
    Customer Support

    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.

    #2372883
    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.

    #2372922
    Fernando
    Customer Support

    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?

    #2372936
    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.

    #2372938
    Jason

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

    #2372942
    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

    #2372952
    Jason

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

    #2372956
    Fernando
    Customer Support

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

    #2372971
    Jason

    Yessir

    #2372972
    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');
    #2372974
    Fernando
    Customer Support

    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; ?>
Viewing 15 posts - 1 through 15 (of 28 total)
  • You must be logged in to reply to this topic.