CODEWITHSUNDEEP
wordpressadvanced-custom-fields
Co_oD
Co_oD

Reputation: 1

Advanced Custom Fields wordpress image size

I'm creating a website with a carousel. To load images, I'm using Advanced Custom Fields on Wordpress.

Here is my code :

<?php $images = get_field('slides', $post->ID);
// clean_print_r($images);
if (!empty($images)) :
?>
<div class="wide-container">
    <div id="slides">
        <ul class="slides-container">
        <?php for($i = 0; $i < count($images); $i++): ?>
        <!-- slides -->
            <li>
                <img src="<?php echo $images[$i]['img_slide']['sizes']['large'] ?>" alt="" />
            </li>
        <?php endfor; ?>
        </ul>
    </div>
</div>
<?php endif; ?>

I can load images, but they are sized at 1024px wide:

<img src="http://example.com/wp-content/uploads/2013/09/bg_header03-1024x341.jpg" ... />

Is there any way to get full sized images? I've tried to replace :

['img_slide']['sizes']['large']

with

['img_slide']['sizes']['full']

But that doesn't work, and no images are loaded. In ACF I call image attachment by ID, and it's a repeater field.

Upvotes: 0

Views: 6510

Answers (2)

David Lamm
David Lamm

Reputation: 529

My previous answer was about return: image ID, as specified by the thread starter but now i realize that he was actually talking about return: object.

/*
*  Return value = Object
*  requires ACF 3.3.7+
*/

$image = get_field('image');

var_dump($image);

/*

Data returned will look like this:

Array
(
    [id] => 540
    [alt] => A Movie
    [title] => Movie Poster: UP
    [caption] => sweet image
    [description] => a man and a baloon
    [url] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
    [sizes] => Array
        (
            [thumbnail] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-150x150.jpg
            [medium] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-300x119.jpg
            [large] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
            [post-thumbnail] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
            [large-feature] => http://localhost:8888/acf/wp-content/uploads/2012/05/up.jpg
            [small-feature] => http://localhost:8888/acf/wp-content/uploads/2012/05/up-500x199.jpg
        )

)

*/

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

So apparently the original image is not a size but the URL, therefore change:

['img_slide']['sizes']['large']

to

['img_slide']['url']

and you should be fine

Upvotes: 1

David Lamm
David Lamm

Reputation: 529

Im not sure how do it with return IDs but if you return URL instead you get the full image.

Edit: Ok I did some test with the Image ID instead, looks like you've confused your array handling somehow. This works for a single image: Should be easy to adapt to your repeater though.

$attachment_id = get_field('slide');
$size = "full";


$image = wp_get_attachment_image_src( $attachment_id, $size );
echo '<img src="' . $image[0] . '">';   

//OR

$image = wp_get_attachment_image( $attachment_id, $size );
echo $image[0];

Upvotes: 1

Related Questions