I’m creating a wordpress site using my own custom templates and I’m having trouble getting the Repeater field to display thumbnails of images in my Masonry gallery, here is the code I have for my masonry page template.
<?php /*
Template Name: Masonry page
*/
?>
<?php get_header(); ?>
<!-- Masonry Images -->
<div class="masonry">
<?php if(get_field('images')): ?>
<?php $size = "thumbnail";?>
<?php while(the_repeater_field('images')): ?>
<?php $image = wp_get_attachment_image_src(get_sub_field('image'), 'full'); ?>
<?php $thumb = wp_get_attachment_image_src(get_sub_field('image'), 'thumbnail' ); ?>
<div class="item">
<!-- Lightbox Image's -->
<a href="<?php the_sub_field('image');?>" class="fancybox" rel="gallery_group">
<!-- Thumbnail Image's -->
<img src="<?php the_sub_field('image');?>">
</a>
</div> <!-- End item -->
<?php endwhile; ?>
<?php endif; ?>
</div><!-- End Masonry -->
<?php get_footer(); ?>
Thanks for reading and heres the page of the site if it helps – http://vn.deckchairdesign.co.uk/wedding/weddings/ (I want the lightboxes to display full images and the masonry blocks to display thumbnails if possible).
It’s quiet slow at loading due to the images being around 2000×4000 pixels each! (Which is why I want them to display as thumbnails.
Thanks again.
Hi @harryadf
Your code has a few issues, but the main one is that you are not using the $thumb variable after you populate it with a value!
Within your loop, you have code which finds the thumb:
<?php $thumb = wp_get_attachment_image_src(get_sub_field('image'), 'thumbnail' ); ?>
But then you ignore that value and just echo out the image like so:
<img src="<?php the_sub_field('image');?>">
For your thumbnail to show, you need to echo out the $thumb like this:
<img src="<?php echo $thumb;?>">
However, I have a feeling that your $thumb will not contain the correct value. Please make sure the return value for your field is set to ‘Image ID’ and that you are confident with the code examples on the image documentation.
Thanks
E
OK I have set the return value to Image ID and changed the code to
<!-- Thumbnail Image's -->
<img src="<?php echo $thumb;?>">
It’s now outputting this – 
for the thumbnails, do you know where I can go from here?
Thanks
I also noticed this in the repeater field Documentation –
Overview
This function has been deprecated. That means it has been replaced by a new function or is no longer supported, and may be removed from future versions. All code that uses this function should be converted to use its replacement if one exists.
Description
Deprecated in v3.3.4 – please replace with has_sub_field
Added in v2.0.3
Do I need to change
<?php while( the_repeater_field(‘images’)): ?>
to
<?php while( Has_sub_field(‘images’)): ?>
Thanks.
Hi @harryadf
Yes, please change to the new has_sub_field function for you repeater loop.
Your previous comment doesn’t show what you code is producing.
Perhaps you need to take a step back and debug your code line by line to make sure your variables are as expected. You can debug like so:
<?php
echo '<pre>';
print_r( get_sub_field('image') );
echo '</pre>';
die; ?>
Thanks
E
This is now my current code –
<?php if(get_field('images')): ?>
<?php $size = "thumbnail";?>
<?php while( has_sub_field('images')): ?>
<?php $image = wp_get_attachment_image_src(get_sub_field('image'), 'full'); ?>
<?php $thumb = wp_get_attachment_image_src(get_sub_field('image'), 'thumbnail' ); ?>
<div class="item">
<!-- Lightbox Image's -->
<a href="<?php the_sub_field('image');?>" class="fancybox" rel="gallery_group">
<!-- Thumbnail Image's -->
<img src="<?php echo $thumb;?>">
</a>
</div> <!-- End item -->
<?php endwhile; ?>
<?php endif; ?>
And outputs this –
<div class="item">
<!-- Lightbox Image's -->
<a href="359" class="fancybox" rel="gallery_group">
<!-- Thumbnail Image's -->
<img src="Array">
</a>
</div> <!-- End item -->
<div class="item">
<!-- Lightbox Image's -->
<a href="358" class="fancybox" rel="gallery_group">
<!-- Thumbnail Image's -->
<img src="Array">
</a>
</div> <!-- End item -->
<div class="item">
<!-- Lightbox Image's -->
<a href="357" class="fancybox" rel="gallery_group">
<!-- Thumbnail Image's -->
<img src="Array">
</a>
</div> <!-- End item -->
Hi Elliot! After looking and playing around for a few hours I managed to make this work.
Ill post how for anyone that may be looking at this in the future.
I re-uploaded all my images to WP and into my page and changed my code to –
<!-- Masonry Images -->
<div class="masonry">
<?php if(get_field('images')): ?>
<?php while(has_sub_field('images')): ?>
<?php $image = wp_get_attachment_image_src(get_sub_field('image'), 'full'); ?>
<?php $thumb = wp_get_attachment_image_src(get_sub_field('image'), 'thumbnail'); ?>
<div class="item">
<a href="<?php echo $image[0]; ?>" class="fancybox" rel="gallery_group"><img src="<?php echo $thumb[0]; ?>" /></a>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div><!-- End Masonry -->
I then used Elliots advice of change the output to Image ID and the thumbnails then displayed!
I’d like to thank Elliot for all his help and hope anyone else with this issue found this useful.
Thanks, Harry.
