Packery.js and Custom Fields Trouble

Hi stewart,
Sounds like the ajax load more js is not being added to your page.

Did you add the shortcode to your homepage @ https://sa.isca.ox.ac.uk/?

Hi,

Thanks for getting back to me so quickly.
It is now I’ve included this shortcode on line 600
<?php echo do_shortcode(‘[ajax_load_more post_type=”post” pause=”true”]’); ?>

and still had no luck.

Thanks so much for the help,

Stew

Yea looks like the js is not in your theme.

You need to have wp_footer() in your footer.php file to load the theme JS.

Also, you have many errors in your html – you might want to check that out.

Okay thanks for pointing those out I’ll sort those also.
So adding wp_footer() seems to be doing the trick in terms of loading in the plugin.
I now just need to get it to work with the packery.js plugin. Is this something you could help out with?

Thanks again,
Stew

I haven’t worked with Packary before, sorry.
When I get some time I may put together a new example for the website.

Okay no problem buddy, really appreciate your time. Just so you know, Packery.js is made by the same developers of masonry so can imagine it would be a too dissimilar to that process.

Hi,

I’ve switched over to using masonry and got your plugin working well. All i need to do is to get it to work with masonry. I’ve used the example code on your site but still can’t get it to work.

Is you okay to have a look for me see where I’m going wrong?
The domain is https://stewartkarldavies-dev.co.uk/

Really appreciate the help.
Thanks,
Stew

Looks like masonry is not firing on your content.
Did you initiate it?

ah okay. I’ve re-uploaded using this to initiate masonry
still ain’t firing up

$(function() {
var masonryInit = true; // set Masonry init flag

var $container = $(‘.post-list’).masonry({
itemSelector: ‘.item’,
columnWidth: ‘.grid-sizer’,
percentPosition: true
});

$container.imagesLoaded().progress( function() {
$container.masonry(‘reloadItems’);
});

$.fn.almComplete = function(alm){ // Ajax Load More callback function
if($(‘.post-list’).length){

if(masonryInit){
// initialize Masonry only once
masonryInit = false;
$container.masonry(‘reloadItems’);
}else{
$container.masonry(‘reloadItems’); // Reload masonry items oafter callback
}
$container.imagesLoaded( function() { // When images are loaded, fire masonry again.
$container.masonry();
});
}
};
});

You also need Masonry CSS to size and transition the items.

Could you point me in the direction of what your referring to please buddy?

Sorry just looking at your masonry code and it is not correct.

You are not applying masonry to your ALM items.
You need a class of item on your anchor tags and you need to set a width on those items as well.