Advanced Custom Fields Gallery Thumbnail Sizes - thumbnails

Question

I have created a gallery using the acf pro plugin for WordPress. It all works perfectly with images that are in a landscape format. However, because the thumbnail images are a set width and portrait images are different proportions they have a much greater height than the landscape ones when scaled down which obviously looks very wrong.
What I am trying to work out is if there is a way to crop the image for the thumbnail, but still use the original for the lightbox.
You can view the gallery here:
The code is as follows:
<?php
$gallery = get_field('gallery');
$images = array();
$items_per_page = 12;
$total_items = count($gallery);
$size = 'full';
$total_pages = ceil($total_items / $items_per_page);
if(get_query_var('paged')){
$current_page = get_query_var('paged');
}
elseif (get_query_var('page')) {
$current_page = get_query_var('page');
}
else{
$current_page = 1;
}
$starting_point = (($current_page-1)*$items_per_page);
if($gallery){
$images = array_slice($gallery,$starting_point,$items_per_page);
}
if(!empty($images)){
?> <div id="slider" class="flexslider">
<div class="gallery-div">
<?php foreach( $images as $image ): ?>
<a href="<?php echo $image['url']; ?>" data-fancybox="gallery" data-caption="<?php echo $image['alt']; ?>" ><img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" /></a>
<?php endforeach; ?>
</div>
</div>
<?php
}
?><div class="pagination-links">
<?php
$big = 999999999;
echo paginate_links(array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => $current_page,
'total' => $total_pages,
'before_page_number' => '<span class="screen-reader-text">'.$translated.' </span>'
));?>
</div>
<?Php
?>
Any help would be greatly appeciated.

Answer 1

Your Fancybox is on the link which will open the url in the href, but there's no reason you can't use a different image in your img tag. Why not try this:
<a href="<?php echo $image['url']; ?>" data-fancybox="gallery" data-caption="<?php echo $image['alt']; ?>" >
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
</a>
This should give you the full image in the lightbox, but show the thumbnail image on screen in your gallery.