acf, getting thumbnail size image from field

17,905

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; ?>
Share:
17,905
mmdwc
Author by

mmdwc

Updated on June 14, 2022

Comments

  • mmdwc
    mmdwc almost 2 years

    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

  • mmdwc
    mmdwc over 10 years
    thanks @Ovidiu Iacomi for your answer... I don't know how to change my code with your code... can you please help me ? I'm not really familiar with php... thanks a lot
  • mmdwc
    mmdwc over 10 years
    thanks a lot ! that's basically what I achivied to do when waiting for your answer ! thanks a lot for your help @Ovidiu lacomi
  • David A. French
    David A. French over 6 years
    Hey I've been having trouble with this. I've been trying to do this exact thing but it's just returning full size images. I have return value set to image array (which seems to have replaced image object.) my code looks identical to what you're posting though. Has something changed in the program?
  • Ovidiu Iacomi
    Ovidiu Iacomi over 6 years
    If the image size is less then the custom size you set or less then the size of the default wordpress image sizes, then you get the full image url.