acf, getting thumbnail size image from field

2
votes

I'm using Advanced Custom Fields plugin on my wordpress website. I'm displaying on a page the first image ('photo') of a repeater field ('photos_presse') from children page. here is the php code I'm using.

        <?php

            $args = array(
            'post_type'      => 'page',     
            'post_parent'    => $post->ID,
            'order'          => 'ASC',
            'orderby'        => 'menu_order',
            'post_status'   => 'publish',
            'number'        => 'no limit',
            );

            $parent = new WP_Query( $args );

            if ( $parent->have_posts() ) : ?>

            <?php while ( $parent->have_posts() ) : $parent->the_post(); ?>

            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">


            <div id="parent-<?php the_ID(); ?>" class="parent-page">

            <div class="cartouche_crop">

            <?php 
                    $first_img = true; 
                        while($first_img && has_sub_field('photos_presse')): ?> 

                     <img src="<?php the_sub_field('photo'); ?>" class="artists_menu">
                    <?php $first_img = false; ?>

            <?php endwhile; ?>


            </div>

            <h1><?php the_title(); ?></h1>
            </div>          




            </a>

            <?php endwhile; ?>



            <?php endif; wp_reset_query(); ?>

this is the portion of code to get the first image :

<?php

    $first_img = true; 
    while($first_img && has_sub_field('photos_presse')): ?> 

    <img src="<?php the_sub_field('photo'); ?>" class="artists_menu">

    <?php $first_img = false; ?>

<?php endwhile; ?>

when loading an image in the repeater field, it creates thumbnails images, this can be set in my "media settings" menu in my wordpress admin. (small, medium & large).

It creates 4 files for each images, one small, one medium, one large and and the original siez.

what I would like to do is instead of getting the first original image of each repeater field, I would like to get the first medium size thumbnail of repeater field.

I can't find how to do this...

anybody can help me with this ?

thanks for your help

3
phpjqueryimagewordpressadvanced-custom-fields

3 Answers

11
votes

You will need to set up the acf field to return the Image Object (You can do this in the Custom Field panel).

Then the field will return an array and you will be able to get the size that you want like this:

$image = get_sub_field('photo');

$image_url = $image['sizes']['medium'];

or, for the thumbnail you will have:

$image = get_sub_field('photo');

$image_url = $image['sizes']['thumbnail'];

basicly you will have all the sizes that wordpress creates in the sizes array of the larger image array.

Edit requested by the OP to integrate the code

<?php

    $first_img = true; 
    while($first_img && has_sub_field('photos_presse')):

    $image = get_sub_field('photo');

    $image_url = $image['sizes']['medium'];
?> 

    <img src="<?php echo $image_url; ?>" class="artists_menu">

    <?php $first_img = false; ?>

<?php endwhile; ?>
0
votes

first change the "Return Value" to image object in ACF admin [ACF admin sample where you need to update the option first http://i.imgur.com/Uh1soEx.png ]

After updating the return value you need to update the code like below

<?php 
$first_img = true; 
while($first_img && has_sub_field('photos_presse')):
    $image =  get_sub_field('photo');
    $image_thumb = $image['sizes']['thumbnail'] // you can add any image size available in the wordpress admin, if you want to define new image size  refer this documentation http://codex.wordpress.org/Function_Reference/add_image_size  
    echo '<img src="'.$image_thumb.'" class="artists_menu">'; 
    $first_img = false; 
endwhile; 
?>
0
votes

It's easy and simple. First, set the image return value as "Image Object", then use this code

<?php $image = get_sub_field('NAMEOFYOURSUBIMAGEFIELD'); ?>
<?php if( $image ): ?>
    <img src="<?php echo $image['sizes']['YOURCUSTOMSIZE']; ?>" width="<?php echo $image['sizes']['YOURCUSTOMSIZE-width']; ?>" height="<?php echo $image['sizes']['YOURCUSTOMSIZE-height']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>