How to display image field in a loop?

• Marzo

• August 8, 2013 at 8:13 am

I am using ACF for adding custom field to my ‘Speakers’ custom post type. I have added an image field for my speakers headshot, I can upload the headshot but how do I display the headshot in my loop? This is the loop I am using:

<?php
                $args = array( 'post_type' => 'speakers', 'posts_per_page' => 10 );
                $loop = new WP_Query( $args );

                while ( $loop->have_posts() ) : $loop->the_post();
					echo '<div class="entry-content">';
						echo '<h2 class="speaker-name">';
							the_title();
						echo '</h2>';
							
							echo '<span class="speaker-title">';
								the_field('title'); echo ' / '; the_field('company_name');
							echo '</p>';
							
							the_content();                    
					
					echo '</div>';
                
				endwhile;
?>

Thanks

• Elliot

• August 8, 2013 at 3:02 pm

Hi @Marzo

Please read the code examples for the image field:
http://www.advancedcustomfields.com/resources/field-types/image/

if your image field returned a simple URL, the following code would work:

<?php
$args = array( 'post_type' => 'speakers', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );

while ( $loop->have_posts() ) : $loop->the_post();
	echo '<div class="entry-content">';
		echo '<h2 class="speaker-name">';
			the_title();
		echo '</h2>';
			
			echo '<img src="' . get_field('field_name') . '" alt="" />';
			
			echo '<span class="speaker-title">';
				the_field('title'); echo ' / '; the_field('company_name');
			echo '</p>';
			
			the_content();                    
	
	echo '</div>';

endwhile;
?>

• Marzo

• August 9, 2013 at 11:29 pm

Awesome. It works. What if I want to use attachment_id instead of Image URL? It would be great to only show a thumbnail version of the image no matter what size of photos users are uploading.

I know this is this the code:

$attachment_id = get_field('field_name');
$size = "thumbnail"; // (thumbnail, medium, large, full or custom size)

but how do I fit this in my loop?

Thanks

• Elliot

• August 10, 2013 at 11:05 am

<?php
$args = array( 'post_type' => 'speakers', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );

while ( $loop->have_posts() ) : $loop->the_post();
	echo '<div class="entry-content">';
		echo '<h2 class="speaker-name">';
			the_title();
		echo '</h2>';
			
			$attachment_id = get_field('field_name');
			$size = "thumbnail"; // (thumbnail, medium, large, full or custom size)
			$image = wp_get_attachment_image_src( $attachment_id, $size );
			
			
			echo '<img src="' . $image[0] . '" />';
			
			echo '<span class="speaker-title">';
				the_field('title'); echo ' / '; the_field('company_name');
			echo '</p>';
			
			the_content();                    
	
	echo '</div>';

endwhile;
?>

Straight from the image field docs. Please read the docs

• TimG1

• August 21, 2013 at 7:28 am

Hello!

I tried the above and it wasn’t working for me. I tried outputting $attachment_id in a print_r to see what was in there, and it was much more than just the ID. Seems like the full image’s meta data.

I eventually (90 minutes later) learned it was because my image field was set to return the image object and not the image ID.

Just posting here in case someone else missed this too.

Thanks for reading,
-Tim