How to Get ACF Image to Display in a Post

[jmrallen]

I'm using Advanced Custom Fields (ACF) for the first time and am struggling mightily to figure out how to get an image to display in a post. I have the area registered in my functions.php file so it can display three different types of content (Pairing, Image and Description):

add_action('genesis_entry_footer', 'food_pairing_image');
function food_pairing_image() {
if ( is_single() && genesis_get_custom_field('food_pairing_image') )
echo '<strong>If this were food, it would be:</strong>&nbsp;'. genesis_get_custom_field('food_pairing') . '<br />'. genesis_get_custom_field('food_pairing_image'). '<br />'. genesis_get_custom_field('food_pairing_description');
}

This allows me to get the text to display just fine in the post. However, whenever I use the ACF tool to reference an image in the post, the image shows up as a number rather than being displayed. Check out the bottom of the entry on this page (test environment and not even the real URL). That #9 there should actually be a big image of cars. I've been working for three hours to try to figure this out, but I'm totally stumped. Furthermore, if I can ever get this to work, I'd like the image to be the thumbnail version rather than the full-size version.

If anyone here can help me out, I would sincerely appreciate it. I'm losing my mind, and I'm sure it's just some simple thing that my feeble brain is just missing due to lack of sleep.

[jmrallen]

OK, I've gotten the image to display using the code below and by checking the radial button for "Image URL" rather than "Image Object."

add_action('genesis_entry_footer', 'food_pairing');
function food_pairing() {
if ( is_single() && genesis_get_custom_field('food_pairing') )
echo '<div class="food-pairing"> ' . get_field('food_pairing') . ' </div>';
if( get_field('food_pairing_image') ):
?><img src="<?php the_field('food_pairing_image'); ?>" alt="" /><?php
endif;
echo '<div class="food_pairing_description"> ' . get_field('food_pairing_description') . ' </div>';
}

However, I'm struggling with figuring out how to get the image's thumbnail version to display rather than the full size version. Any advice on how to output the thumbnail instead? I've tried a host of settings from the ACF forums and Google searches, but nothing's turned up that works for me. Once I get that in place, I think it's mostly going to be a styling exercise at that point.

[Brad Dalton]

Yes but you may consider using get_post_meta as its not dependant on the ACF plugin.

---

Tutorials for StudioPress Themes.

[jmrallen]

Thanks. There are certainly ways to do this without the ACF plugin, but I don't know enough about php to feel comfortable doing all that. The actual site is slim on plugins in general, so I'm not worried about overloading it with this one. In light of my lack of php knowledge, it's unclear to me whether I use that code you linked whole-hog in the functions.php file, or whether there are parts of that I might excerpt for incorporation into my current code.

[jmrallen]

Another option, I suppose, is to upload images only in the size I want them. I'm not planning to use the same featured image in the top of the post and in this custom field, and in fact I'm not planning to use the images from the custom fields in any other way. So, uploading those images only in the thumbnail dimensions would accomplish the same basic effect, and it may be easier. Maybe I'll just do that. It won't accomplish any of the other styling I need to do for that custom field area/box, but I should be able to chip away at that. Presuming the code above will allow me to create one large div for the entire box and then separate attributes for specific elements within it.

[Brad Dalton]

You can still use ACF and the get_post_meta function. If the plugin fails, the content still works.

---

Tutorials for StudioPress Themes.

[jmrallen]

So instead of using get_field or genesis_get_custom_field I would simply use get_post_meta ? Sorry. I fully admit to being lost on this one. I've gotten it to work for the moment, with just some styling to work through before going live on the actual URL, but if the code swap is as simple as that, I'll happily make the update before going live.

[Brad Dalton]

Here's the code and a video which is fairly long but you might just want to see the code .http://wpsites.net/web-design/how-to-create-a-custom-field/

---

Tutorials for StudioPress Themes.

[Author]

Posts