[Resolved] Image Gallery shortcode not resizing/cropping images correctly

[Author]

Posts

[kristofG]

I have used this shortcode when looping over a repeatable image field

[types field='image-gallery' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='690px' height='400px' resize='crop' separator=', '][/types]

But it does not crop as requested as you can see in this flexslider hidden link
One of the images is in portrait and stretches the entire slider.

[Waqar]

Hi Kristof,

Thank you for contacting us and I'll be happy to assist.

When the "resize" attribute is set to "crop", it tries to get the images in the set width and height (proportionally), but doesn't actually resizes them, if they're smaller than that requested size.

Since your images in the slider are smaller than the requested size too and you'd like them all to fit to a uniform size, you can change the "resize" attribute to "stretch":

[types field='image-gallery' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='690px' height='400px' resize='stretch' separator=', '][/types]

I hope this helps and let me know how it goes.

regards,
Waqar

[kristofG]

Hi Waqar,

I have set the size of the images in the slider to 690x400 because at some point in the responsive design, every slider becomes full width and then the slider is 551px wide.

I have changed resize to stretch, but as you can see in the screenshot, the images still do not crop.

[Waqar]

Hi Kristof,

Thanks for writing back.

I performed few tests and couldn't reproduce this behavior on my test website.

To troubleshoot further, I'll recommend the following steps:

1. Please remove size='custom' attribute from the shortcode, since you're already specifying the width and height, manually.

2. Temporarily disable all plugins other than Toolset and then check the images again.

3. To make sure all image thumbnails are up-to-date, you can regenerate them using a plugin like "Regenerate Thumbnails":
https://wordpress.org/plugins/regenerate-thumbnails/

4. In case the issue still persists, I'll need temporary access to the website's admin area for further troubleshooting.

I've set your next reply as private so that only you and our support team will have access to it.

Important note: Please make a complete backup copy of the website, before sharing the access details.

regards,
Waqar

[Waqar]

Hi Kristof,

Thank you for sharing the update and the access details.

During testing, I noticed that some of the images in the slider are too small originally to be resized and stretched to fit the specified width and height.

To make a mixed sized image slider work, I'll recommend a different approach:

1. Please update your markup in the view's content template form:

<div class="flexslider" style="margin-bottom:20px">
	<ul class="slides">
		[wpv-for-each field="wpcf-image-gallery"]
			<li>[types field='image-gallery' title='%%TITLE%%' alt='%%ALT%%' width='690px' height='400px' resize='stretch' separator=', '][/types]</li>
		[/wpv-for-each]
	</ul>
</div>

To:

<div class="flexslider" style="margin-bottom:20px">
	<ul class="slides">
		[wpv-for-each field="wpcf-image-gallery"]
			<li style="background-image: url('[types field='image-gallery' output='raw' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types]');"></li>
		[/wpv-for-each]
	</ul>
</div>

The above markup will call each image, as a background image of the slider and not as an img tag.

2. To make sure all slides have a proportional width and height, you can include following script in the "JS editor" tab, under the "Loop Editor" section:

jQuery(document).ready(myfunction);
jQuery(window).on('resize',myfunction);

function myfunction() {
	jQuery( ".flexslider .slides" ).each(function(i, li) {
		var contWidth = jQuery(li).width();
		var contHeight = Math.round(contWidth / 1.725);
		jQuery( li ).height(contHeight);
		jQuery(li).children("li").height(contHeight);
	});
}

3. As the last step, you can include the following CSS code in the "CSS editor" tab, under the same "Loop Editor" section:

.flexslider .slides {
overflow: hidden;  
}

.flexslider .slides li {
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}

This will make sure all images are shown center aligned and without exceeding the set slider area width.

Note: you can replace "background-size: contain;" with "background-size: cover;", if you'd like the images to always fill the slider area completely, but some part of images will not show in that case.

I hope this helps and please let me know how it goes.

regards,
Waqar

[kristofG]

Hi Waqar,

Thank you for your time, expert advice and your code.
I also continued to search for a solution on my own and instead of the Avada Image Gallery, I tried to customise the Avada Image Carousel.
I combined this Avada shortcode

  	[fusion_images picture_size="auto" hover_type="none" autoplay="no" columns="1" column_spacing="0" scroll_items="" show_nav="yes" mouse_scroll="no" border="no" lightbox="no" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="search-results" id=""]
  		[wpv-for-each field="wpcf-image-gallery"]
  			[fusion_image image="[types field='image-gallery' output='raw' resize='proportional' separator=', '][/types]" image_id="[types field='image-gallery' output='raw' ][/types]|full" /]
  		[/wpv-for-each]
	[/fusion_images]

with an earlier Toolset solution to get the image/attachment ID from the image url.

// Add Shortcode - Get Image ID
function get_image_id( $atts ) {
    // Attributes
    $atts = shortcode_atts(
        array(
            'url' => '',
        ),
        $atts
    );
	$attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url )); 
return $attachment[0]; 
}
add_shortcode( 'get_image_id', 'get_image_id' );