Ajax Portfolio images overlapping each other

Hey flylanddesigns,

Thank you for the inquiry.

This issue usually happens when there are numerous portfolio images on a single page. It occurs due to slower image loading, leading to mispositioning of the portfolio items by the “isotope” script. To avoid the issue, it is recommended to reduce the number of items on the same page and make use of pagination effectively. Additionally, you can include the following script to trigger a “resize” event during image loading, ensuring proper alignment:

add_action('wp_footer', 'ava_auto_resize');
function ava_auto_resize(){
?>
<script>
(function($){	
	var int = window.setInterval(function(){
		$(window).trigger('resize');
	}, 1500);
	
	$(window).on("load", function () {	
		setTimeout(function() {
			clearInterval(int);
		}, 500);
	});
})(jQuery);
</script>
<?php
}

Best regards,
Ismael

Hi,

Did you copy the code from your email? Please ensure that you copy it directly from the forum to prevent characters from being converted to their HTML entity format.

Best regards,
Ismael

Hi,
On my server when I try to edit the functions.php I see the error:

Unable to communicate back with site to check for fatal errors, so the PHP change was reverted. You will need to upload your PHP file change by some other means, such as by using SFTP.

But this is a not and error from the snippet, these typically a server configuration that prevents the WordPress loopback check to properly check for potential errors.
This just means that for your site you should update your file via FTP or use a plugin like WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets.
I checked the code above in my WPcode plugin and it returned no errors, please give this a try.

Best regards,
Mike

Hi,

Based on previous threads, we have observed that enabling lazy loading typically does not improve the situation and instead, it often makes it worse. This issue should not occur if the images are properly compressed and the site is hosted on a reliable server. And again it could be beneficial using the pagination and reducing the number of images displayed on a single page, perhaps to half of the current number on your site. If you can provide the FTP login details in the private field, we will try to add the script for you.

Thank you for your patience.

Best regards,
Ismael

Hi,

Pagination is not an option for me – so if I can’t get this to work, I’ll probably have to find a different theme.

I apologize for the inconvenience. We hope that the image compression will help resolve the issue and improve the performance of your website. To further optimize the loading speed of the site, please check the following articles.

// https://gtmetrix.com/wordpress-optimization-guide.html

Best regards,
Ismael

Hi,

Here’s what’s confusing to me:
My Shop gallery sometimes has 100 products on one page. When the images load, they don’t overlap each other the way the Portfolio does.

The product grid is not using the “isotope” script, so it lacks some layout and filtering capabilities but it does display more consistently compare to grids using the script such as the Portfolio Grid element. You can find more info about the isotope script in the following link.

// https://isotope.metafizzy.co/

Best regards,
Ismael