Echo image field

• skinny_mv

• January 2, 2017 at 10:26 am

Kinda new to ACF and having issues with displaying an image field in my front end.
would be most thankful if somebody helped me sorting this out.

I have a page where i want to display a list of different instructor custom post types,i manage to fetch all text based values for my instructors but have so far not managed to display my image field.

This is the code in my page-template:

<section id="instructors">
				<?php
                $args = array( 'post_type' => 'mudo-instructor', 'posts_per_page' => -1, 'orderby' => 'meta_value_num', 'meta_key' => 'instructor-degree', 'order' => 'ASC' );
                $loop = new WP_Query( $args );
            
                while ( $loop->have_posts() ) : $loop->the_post();
                
                echo '<li class="list-item">'; 
                    echo '<div class="link-box">';
                        echo '<a href="' . get_permalink() . '">';
                        echo '<figure class="instructor-thumb">';
    
                        
            
                        echo '</figure>';
                        echo '<h2 class="instructor-title-swedish">' . get_field('instructor-title-swedish') . '</h2>';
                        echo '<br>';
                        echo '<i class="instructor-title-korean">' . get_field('instructor-title-korean') . '</i>';
                        echo '<br>';
                        echo '<h2 class="instructor-title">' . get_the_title() . '</h2>';                   
                        
                        echo '</a>';
                    echo '</div>'; // .link-box //
                echo '</li>'; // .list-item //
                
                endwhile;
				?>
            </section><!-- #instructors -->

The image field I’m trying to fetch is called instructor-image and is set to return the image object…

• James

• January 3, 2017 at 12:58 am

Hi @skinny_mv

Thanks for the post.

I believe you will need to add the following code to get the image data on your template:

<?php 

$image = get_field('instructor-image');

if( !empty($image) ): ?>

	<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php endif; ?>

• skinny_mv

• January 3, 2017 at 4:00 am

That is basically the code i tried at first, but it throws a parse error…

I don’t know if the way i set things up with echo’ing out each div is the best/most elegant way to go about this problem?

• James

• January 16, 2017 at 12:11 pm

Hi @skinny_mv

Could you please share the error message you got?

Also, could you please share the JSON or XML export file of your field group so I can check your setup?

Thanks 🙂

• hectorplus

• February 8, 2018 at 1:49 pm

Hi, am also having issues displaying an image, no error at all, this is the code I am using:
<img src="<?php the_field('photos'); ?>" alt="" />

But it displays a weird image path:
<img src="59, , logo, , , image/png, http://url.com/wp-content/uploads/2018/02/logo.png, 100, 100, Array" />

I tried the other codes from your site, but still, not pointing to the incorrect path, it adds extra data…

I am a Drupal guy, sort of new to word press but picked it up pretty quick!

Thanks
Hector

• mudi

• August 3, 2018 at 12:58 am

i think you should try this
$image = get_field(‘photos’);

if( !empty($image) ): ?>

” alt=”<?php echo $image[‘alt’]; ?>” />

<?php endif; ?>

• sumitrabhat

• February 19, 2021 at 8:05 pm

Hello,

I am also facing the same issue, it says:

Thanks!

• sumitrabhat

• February 19, 2021 at 8:15 pm

Okay,

I found the solution!

<?php $image = get_field('author_photo'); ?>

” alt=”<?php echo $image[‘title’]; ?>” />

– 2nd line in above code is omitting half part, screenshot attached. use your image field name instead of ‘author_photo’

—

code-1.png.png