Support

Account

Home Forums Add-ons Repeater Field Displaying Thumbnails with Repeater field

Solved

Displaying Thumbnails with Repeater field

  • 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.

    • Elliot

    • November 26, 2013 at 11:03 am

    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.

    • Elliot

    • November 27, 2013 at 4:06 pm

    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

  • It’s outputting this – http://vn.deckchairdesign.co.uk/wp-content/uploads/2013/10/weddingportfolio-182.jpg

    Thanks

  • 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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.