image not showing correctly

• kiouv

• November 28, 2013 at 9:28 pm

Hey there,

First, thanks for the great plugin, I love it.

I have an issue trying to display an image. I use last ACF plugin with WP 3.7.1

My front-end code :
<img src="<?php the_field('push_1_image'); ?>" alt="<?php the_field('push_1_titre'); ?>">

What I get in the source :
<img src="50, , Reiki rose, , , image/jpeg, http://cathy-reiki.fr/wp-content/uploads/2013/11/Reiki-rose-e1385632065339.jpg, 300, 113, Array" alt="Séance de soins">

Any idea what I do wrong ?

Thanks !

• Elliot

• November 29, 2013 at 10:06 am

Hi @kiouv

The above shows that your image field has a ‘return format’ setting of ‘Image Array’.

As expected, the value returned is an array. Please refer to the docs to understand how to use the array data:

$image = get_field('push_1_image');
echo $image['url'];

http://www.advancedcustomfields.com/resources/field-types/image/

Thanks
E

• kiouv

• November 29, 2013 at 10:35 am

Thanks, my question is part resolved. just one more question :

I did exactly the same thing as in the docs

<?php
 
/*
*  Show selected image
*  Return value = URL
*/
 
?>
<img src="<?php the_field('field_name'); ?>" alt="" />

Why does my code return an array, and not the URL ?

• liamtarpey

• November 29, 2013 at 5:45 pm

Kiouv,

This should work for you:

<?php $image = get_field(‘push_1_image’); ?>
” alt=”Image”/>

• liamtarpey

• November 29, 2013 at 5:46 pm

Sorry that img tag didn’t show up properly:

<?php $image = get_field('push_1_image'); ?>
<img src="<?php echo $image['url']; ?>" alt="Image" class=""/>

• astrixoblix

• November 29, 2013 at 11:33 pm

hi @kiouv

if your field return an array it’s because you set it to return an array.
on the ACF image field settings there is an option that you can change its returnable value.

go to the image field and take a look there, you will find your answer. you should set it to return image URL. so your code should be like this in your template:
<img src="<?php the_field( 'image_field_name' ); ?>" />

to get image dimensions, title, caption, description you should go a little more advanced.

let’s get the things we need:

$image_dimensions = wp_get_attachment_image_src( get_field( 'image_field_name', false, false ), 'full' );
$image_meta = get_post( get_field( 'image_field_name', false, false ) );
$image_alt = get_post_meta( $image_meta->ID, '_wp_attachment_image_alt', true );

‘full‘ => it define the image size. EX: full, thumbnail, small, … ( it’s in your theme function and could be more )

‘_wp_attachment_image_alt‘ => it get image alt, the italic part could be caption, description.

so your template code should looks like this:
<img src="<?php the_field( 'image_field_name' ); ?>" alt="<?php echo $image_alt; ?>" width="<?php echo $image_dimensions[1]; ?>" height="<?php echo $image_dimensions[2]; ?>" />

hope it could help you.
thanks,
A

• kiouv

• November 30, 2013 at 12:42 am

Thank you all for all the perfect and quick answers !