Using Advanced Custom Fields with WordPress and Lightbox

1 Views

I am using the ACF Plugin. I want to have a field where I can upload an image, and the result will display the full image in the Lightbox and then then full image will be resized into a thumbnail from that field (like a normal Lightbox).

So far I have the script here, and this is where I am at:

Read More
<div class="single last">
<a href="<?php echo the_field('image_gallery'); ?>" rel="lightbox" title="<?php the_title(); ?>">

<?php
$main_car_pic = addslashes(the_repeater_field('image_gallery'));
$reg_ext = "#.jpg#i";
$thumb_ext = "-150x150.jpg";
$car_thumb = preg_replace($reg_ext, $thumb_ext, $main_car_pic);

echo $car_thumb
?>

The ACF Repeater field isn’t working properly and I cannot work why, does anybody have any experience with ACF and resizing images for thumbnails.. Hope what code I have done helps and I’ll be really appreciate it, if nto comment and I can supply anything that might help.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. There’s a lot going on here. First off, you should store the repeater field image as an ID (that probably requires changing how the subfield’s setting and possibly re-uploading some of your images) and then use all the WordPress Core API functions to handle it. (You’ll probably cross paths with wp_get_attachment_image_src.) That gets rid of your regex-ing, makes your image sizing take advantage of add_image_size, etc.

    Second, you need to follow the repeater field’s code example on the page you linked to. get_repeater_field() returns an object you can iterate through with a loop-like while statement and get_sub_field(). (As an aside: get_field( 'a_repeater_field' ) returns an array you can iterate through with a foreach statement.)

    Your final code will look something like this:

    <?php if( get_field('image_gallery') ) {
    while( the_repeater_field('image_gallery') ) {
        $large_img_src = wp_get_attachment_image_src( get_subfield('an_image_subfield'), 'large' );
        echo '<a href="' . $large_img_src[0] . '">' . wp_get_attachment_image( get_sub_field('an_image_subfield'), 'thumbnail' ) . '</a>';
    }
} ?>

    You can replace ‘thumbnail’ and ‘large’ with an array or a custom image size.