Wordpress Custom Field using Advanced Custom Fields

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>";
                }

get_field() has to be located inside the Loop, because it defaults to the "current" post. You have to figure out how your plugin is iterating through your 10 posts, and make sure get_field is called once for each post — JP Lew

JP Lew JP Lew · Accepted Answer · 2013-11-13T09:34:10

<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: see here

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\" />";

Wordpress Custom Field using Advanced Custom Fields

1 Answers