Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 29, 2019 at 3:39 pm #1122772
    Monique

    Hi,

    On the website of one of my clients we notice some strange behaviour with the layout of the ‘portfolio’ pages. There are several portfolio pages (see links below) all made up using the Avia Layout Builder and the same masonry settings:

    • Masonry content: Portfolio Entries > single category > Display all entries > no filteroptions > All (Posts) > 3 columns > sorted on Date > Descending > Flexible masonry > Large Gap > No effect > Animation activated.
    • Element captions: Display Title > Default Display > Always Display.
    • Element colors: Default.
    • Screen options: Default.

    Sometimes when a page is loaded, the images of each item are shown on top of each other and the titel is not shown underneath. Sometimes part of the page is shown correctly and part not. Please see screenshots below of what it should be and what it then looks like.

    My client came up with the issues and she uses different Apple devices. I checked different browsers in Windows and the results are:

    • Mostly I am using FF Developer Edition (69 64-bit) on Windows and found the issue on several occassions but not each time and not on each page. Refreshing the page partially seems to solve the issue, but not in the same way every time.
    • FF Quantum 68: no issues.
    • Chrome 75 (64-bits): issues on all pages > when I refresh the page, the issue is solved > when I load the page again (new) the issue is there again.
    • IE 11: no issues.
    • Edge 44: issues on all pages > refreshing the page does not solve the issue.15:30 29-7-2019
    • Opera 62: issues on all pages > when I refresh the page, the issue is solved > when I load the page again (new) the issue is there again.

    I hope you can reproduce the issue.

    Have you ever heard of this before? What could cause these problems and (most important) what can be done to solve them?

    Looking forward to your reply.

    Kind regards,
    Monique

    July 31, 2019 at 7:43 am #1123413
    Ismael

    Hey Monique,

    Thank you for using Enfold.

    This is a known issue with the isotope script. It automatically calculates the position of the items within the grid without waiting for the images to fully load. You can either enable the pagination to decrease the size of the page so that it loads quickly, or use the following script to adjust the position of the items.

    add_action('wp_footer', 'ava_auto_resize');
function ava_auto_resize(){
?>
<script>
(function($){	
	var int = window.setInterval(function(){
		console.log('tick');
		$(window).trigger('resize');
		$(window).trigger('av-content-el-height-changed');
	}, 1000);
	
	$(window).on('load', function() {
		setTimeout(clearInterval(int), 1000);
	});
})(jQuery);
</script>
<?php
}

    Best regards,
    Ismael

    July 31, 2019 at 8:43 am #1123442
    Monique

    Thanks you for your reply Ismael!

    I understand what you’re saying. The strange thing is that this also happens with pages that only have a few portfolio items. Will pagination in those cases help? Will it help that much if we would set pagination to 10 items when the page only has three or four items?

    Best regards,
    Monique

    August 1, 2019 at 10:42 am #1123833
    Ismael

    Hi,

    Thank you for the update.

    Yes, limiting the items or enabling the pagination will definitely help because the page will load faster. And consider optimizing the images to further decrease the load time.

    // https://kriesi.at/archives/4-key-wordpress-image-optimization-tips
    // https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow

    Best regards,
    Ismael

    August 7, 2019 at 3:35 pm #1125569
    Monique

    Hi Ismael,

    Pagination
    I’d like to remind you that there are pages with only a few items, Also on these pages it doesn’t work properly. See (1) below.

    I just tried to change one of the pages to pagination with 9 items per page (that should be ok, or?). That doesn’t solve the issue. See (2) below.

    Optimizing images
    My client optimizes all images before she loads them in WordPress. She reduces them in size and quality so that each image stays under max. approx. 100-150KB. Most of the time she is far under.

    What happens when she loads the images in WordPress is that Enfold creates 17 different images for each original images. Most of the images Enfold creates are far bigger than the ones my client uploads. I don’t understand that. See two examples below (3).

    This can’t be right, can it?

    Best regards,
    Monique

    August 8, 2019 at 10:19 am #1125860
    Ismael

    Hi,

    Thank you for the update.

    Have you tried using the script above? That should re-adjust the position of the items while the images are loading.

    Best regards,
    Ismael

    August 12, 2019 at 6:20 pm #1126891
    Monique

    Hi Ismael,

    My client’s site was hacked and caused Enfold files to be corrupted. After a big clean and re-installation of WordPress and Enfold, this issue as well as the issue in topic #1125899 were solved.

    Sorry to have bothered you and thanks for your help.

    Can you please flag this topic as solved?

    Regards,
    Monique

    August 12, 2019 at 9:02 pm #1126990
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Strange behaviour when loading pages with masonry grid’ is closed to new replies.