Wordpress Custom Field using Advanced Custom Fields - php

Question

I am having some trouble modifying a plugin WordPress popular posts I installed.
It has the option to fetch thumbnails from a custom field, which I have entered as "image_facebook". But the thumbnails are not being displayed.
While checking the code I found that img src has post id instead of returning image URL.
"<img src="5438" width="135" height="135" alt="Alt text" border="0" />"
I have narrowed down the problem to another plugin which I have installed http://wordpress.org/plugins/advanced-custom-fields/ and while it is active I have to use "the_field ()" to fetch the custom field content instead of regular WordPress "get_post_meta" It is documented here http://www.advancedcustomfields.com/resources/functions/the_field/
I need to edit the below code in the WordPress popular posts file to use the_field() function. The code in the WordPress-popular-posts.php says:-
// POST THUMBNAIL
if ($instance['thumbnail']['active'] && $this->thumb) {
$tbWidth = $instance['thumbnail']['width'];
$tbHeight = $instance['thumbnail']['height'];
$thumb = "<a href=\"". $permalink ."\" title=\"{$title}\" target=\"".$this->user_ops['tools']['link']['target']."\">";
if ( $this->user_ops['tools']['thumbnail']['source'] == "custom_field" ) { // get image from custom field
$path = get_post_meta($p->id, $this->user_ops['tools']['thumbnail']['field'], true);
if ( $path != "" ) {
if ( $this->user_ops['tools']['thumbnail']['resize'] ) {
$thumb .= $this->get_img( $p->id, array($tbWidth, $tbHeight), $this->user_ops['tools']['thumbnail']['source'] );
} else {
$thumb .= "<img src=\"{$path}\" width=\"{$tbWidth}\" height=\"{$tbHeight}\" alt=\"{$title}\" border=\"0\" />";
}
} else {
$thumb .= "<img src=\"". $this->default_thumbnail ."\" alt=\"{$title}\" border=\"0\" width=\"{$tbWidth}\" height=\"{$tbHeight}\" />";
}
} else { // get image from post / Featured Image
$thumb .= $this->get_img( $p->id, array($tbWidth, $tbHeight), $this->user_ops['tools']['thumbnail']['source'] );
}
//$thumb .= "</a>";
}
In my theme files I am able to retrieve the Image URL via the following code:-
<img src="<?php echo get_field('image_facebook'); ?>" alt="<?php the_title(); ?>" class="postImg" />
Please help me put this function in the plugin code above.
UPDATE
Ok so with the below code, the image URL is fetched but it is fetching the same image URL for all 10 popular posts.
// POST THUMBNAIL
if ($instance['thumbnail']['active'] && $this->thumb) {
$my_image = get_field('image_facebook');
$my_title = get_the_title();
$tbWidth = $instance['thumbnail']['width'];
$tbHeight = $instance['thumbnail']['height'];
$thumb = "<a href=\"". $permalink ."\" title=\"{$title}\" target=\"".$this->user_ops['tools']['link']['target']."\">";
if ( $this->user_ops['tools']['thumbnail']['source'] == "custom_field" ) { // get image from custom field
$path = get_post_meta($p->id, $this->user_ops['tools']['thumbnail']['field'], true);
if ( $path != "" ) {
if ( $this->user_ops['tools']['thumbnail']['resize'] ) {
$thumb .= $this->get_img( $p->id, array($tbWidth, $tbHeight), $this->user_ops['tools']['thumbnail']['source'] );
} else {
//$thumb .= "<img src=\"{$path}\" width=\"{$tbWidth}\" height=\"{$tbHeight}\" alt=\"{$title}\" border=\"0\" />";
$thumb .= "<img src=\"" . $my_image . "\" width=\"{$tbWidth}\" height=\"{$tbHeight}\" alt=\"" . $my_title . "\" border=\"0\" />";
}
} else {
$thumb .= "<img src=\"". $this->default_thumbnail ."\" alt=\"{$title}\" border=\"0\" width=\"{$tbWidth}\" height=\"{$tbHeight}\" />";
}
} else { // get image from post / Featured Image
$thumb .= $this->get_img( $p->id, array($tbWidth, $tbHeight), $this->user_ops['tools']['thumbnail']['source'] );
}
//$thumb .= "</a>";
}

Answer 1

<img src="5438" width="135" height="135" alt="Alt text" border="0" />
If this is your only problem, you can modify the value that the ACF image field returns. Right now it is probably set to Image ID. Try setting it to Image URL instead:
In case that doesn't help, I would try this. Keep in mind I don't understand how your plugin interacts with ACF. First I would set your variables:
$my_image = get_field('image_facebook');
$my_title = get_the_title();
Then I would replace every instance of $thumb .= with your functioning ACF code, just to test, like this:
$thumb .= "<img src=\"" . $my_image . "\" alt=\"" . $my_title . "\" class=\"postImg\" />";