Wordpress page load tile image issue

March 7, 2017 5:25 AM

I have installed a new template and tweaked it to perfection. It uses the wordpress 'featured images' to display a tiled/tesselated grid of the posts on the front page. But it only tiles properly upon clicking a javascript link. Is there any way to get the tiles to work properly upon 1st page load?

You can find my website link in my profile if you wish to see the problem. You can see upon page load that the images are not tiled. If you click 'portfolio' they instantly jump into the right places.

In the PHP each category link has 'javascript:void(0)' as the <a href=. I was thinking that maybe loading the same javascript upon page load would autotile the images, but I can't figure out how to do this.

Thanks

posted by 0bvious to Computers & Internet (3 answers total)

Response by poster: I realise now that the theme designer is using this javascript package to do the tiling.
posted by 0bvious at 6:01 AM on March 7, 2017

This script, loaded at the bottom of the page should do it:

(function($) {

jQuery(".masonry").masonry('destroy');
jQuery('#portfolio-list').masonry({
// options
columnWidth: 0,
itemSelector: '.portfolio-item',
percentPosition: true,
//columnWidth: 200
});

})(jQuery);
posted by backwards guitar at 6:28 AM on March 7, 2017 [1 favorite]

Response by poster: That did it! Thanks so much.... I had to put it right before or it screwed up the footer.
posted by 0bvious at 6:35 AM on March 7, 2017