[Resolved] Images ID's displaying instead of Image URL

[Author]

Posts

[Ian]

I am trying to output an image that is saved in a custom field and it is set to display the IMAGE URL.

When I use this code:

  [wpv-post-field name="event_logo"]

It outputs the image ID instead? I am using Advanced Custom Fields and I know that it is set to URL.

How do I use Views to display the image like I can in a PHP template.
In the image I have attached you can see the ID's above and my PHP template code below that displays correctly.

[Eduard]

Hi,

I guess that's ACF behavior to store ID's in DB, this is not something I can answer, but you can add the following custom shortcode to display ACF image. You can place this in your functions.php

*** Please make a FULL BACKUP of your database and website.***

add_shortcode( 'wpv-acf-image', 'wpv_display_acf_image' );
function wpv_display_acf_image( $atts ) {
	$atts = shortcode_atts(
		array(
			'field' => '',
		), $atts );

	$field = sanitize_text_field( $atts['field'] );
	if ( '' === $field ) {
		return;
	}

	// Make sure to not break something if ACF is disabled
	if ( function_exists( 'get_field' ) ) {
		// Get Image field
		$image = get_field( $field );
		if( is_numeric( $image ) ) {
			// Check if ID is stored.
			echo wp_get_attachment_image( $image );
		} elseif( false === ! filter_var( $image, FILTER_VALIDATE_URL ) ) {
			// Check if URL is stored.
			?>
			<img src="<?php echo esc_url( $image ); ?>" />
			<?php
		} elseif( isset( $image['url'] )) {
			// Check if image object is stored.
			?>
			<img src="<?php echo esc_url( $image['url'] ); ?>" />
			<?php
		}
	}
}

And add this to your view

[wpv-acf-image field="event_logo"]

You might also like to check these topics:
https://toolset.com/documentation/user-guides/displaying-wordpress-custom-fields/
https://toolset.com/documentation/customizing-sites-using-php/functions/

Thanks

[Ian]

Hello Eduard, thanks for the help.

The images are showing but they don't seem to be part of the loop template.

I have this in the admin area:

<article class="span3">
  

<div class="eventimage">
	<div>
  [wpv-acf-image field="event_logo"] 
  </div>
</div>  
[wpv-post-title]

  [wpv-post-field name="event_start_date"]
[wpv-post-field name="city"]
[wpv-post-field name="state"]

</article>

The images are being output before the filter.

Any help would be greatly appreciated.

[Eduard]

Hi,

I've removed the confidential link.
I guess you are using parametric search view.
To get the whole picture of configuration can you please provide the whole code "From" , "Loop Output", "Filter and Loop Output Integration" and any content template that might be assigned to this view?

Thanks

[Ian]

Eduard,
Thank you. I forgot that this is a live forum board, thank you for removing that link.

Filter

[wpv-filter-start hide="false"]
[wpv-filter-controls][wpml-string context="wpv-views"][/wpml-string] [wpv-control field="event_start_date" url_param="event_start_date" type="select" auto_fill_default="Event Date" auto_fill="event_start_date" auto_fill_sort="asc"]
[wpml-string context="wpv-views"][/wpml-string] [wpv-control field="industry_type" url_param="industry_type" type="select" auto_fill_default="Industry Type" auto_fill="industry_type" auto_fill_sort="asc"][wpv-filter-spinner container="div" position="before" class="searchspinner" spinner="<em><u>hidden link</u></em>"][wpml-string context="wpv-views"]Searching...[/wpml-string][/wpv-filter-spinner][wpv-filter-submit name="Find Events" type="input"][wpv-filter-reset reset_label="Clear Form" type="input"]
[/wpv-filter-controls]
[wpv-filter-end]

Loop Output

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop>
		[wpv-post-body view_template="Loop item in Shows and Events Filter"]
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

Template for View

<article class="span3">
  

<div class="eventimage">
	<div>
      [wpv-acf-image field="event_logo"]
  </div>
</div>  
[wpv-post-title]

  [wpv-post-field name="event_start_date"]
[wpv-post-field name="city"]
[wpv-post-field name="state"]

</article>

Filter and Loop Output Integration

<div>[wpv-filter-meta-html]</div>
<div>[wpv-layout-meta-html]</div>

[Eduard]

Thanks, this looks fine, but somehow your HTML markup is missing on front-end.

*** Please make a FULL BACKUP of your database and website.***

I need to request temporary access (wp-admin and FTP) to your site - preferably to a test site where the problem has been replicated if possible - in order to be of better help. You will find the needed fields for this below the comment area when you log in to leave your next reply. The information you will enter is private which means only you and I can see and have access to it.

Thanks

[Eduard]

Hi,

This was because of the shortcode not properly outputting the image.
I've altered the code a little now to this:

add_shortcode( 'wpv-acf-image', 'wpv_display_acf_image' );
function wpv_display_acf_image( $atts ) {
    $atts = shortcode_atts(
        array(
            'field' => '',
        ), $atts );

    $field = sanitize_text_field( $atts['field'] );
    if ( '' === $field ) {
        //
        return;
    }

    $output = '';
    // Make sure to not break something if ACF is disabled
    if ( function_exists( 'get_field' ) ) {
        // Get Image field
        $image = get_field( $field );
        if( is_numeric( $image ) ) {
            // Check if ID is stored.
            $image_data = wp_get_attachment_image_src( $image );
            $output = '<img src="' . esc_url( $image_data[0] ) . '" />';
        } elseif( false === ! filter_var( $image, FILTER_VALIDATE_URL ) ) {
            // Check if URL is stored.
            $output = '<img src="' . esc_url( $image ) . '" />';
        } elseif( isset( $image['url'] )) {
            // Check if image object is stored.
            $output = '<img src="' . esc_url( $image["url"] ) . '" />';
        }
    }

    return $output;
}

Can you please check the URL you have sent to me and let me know if this resolves your issue?

Thanks

[Ian]

Eduard,
Thank you! This is looking much better. I think you solved it! I'll let you know if I run into any other issues.

All the best!

-Ian