The issue shows up if you have masonry enable as a transition. We removed the following settings for the Load More button to work again.
transition=”masonry”
masonry_selector=”.experience-card”
masonry_animation=”slide-up”
masonry_horizontalorder=”false”
We think the issue is with the slide-up masonry animation. Setting the animation to default doesn’t break the Load More button. We haven’t tested other options though.
Hi @gourmetmktg yes I have a fix I’m working on for this and will hopefully get that released this morning.
The issue appears to be related to whitespace in Repeater Tenplates and the way the new plugin adds elements to the DOM.
Stay tuned.
New version release, please update and try this.
We updated to the newest version. Masonry layout no longer works.
You can check the issue here: https://insidethailand.wpengine.com/blog/
The shortcode we used looks like this [ajax_load_more post_type=”post” posts_per_page=”6″ scroll=”false” transition=”masonry” masonry_selector=”.entry-card” masonry_horizontalorder=”false” images_loaded=”true” button_label=”Load More” button_loading_label=”Loading”]
Also, it’s not related to the current bug. But did you drop support for IE 9?
@gourmetmktg Can you share your repeater template please?
Also, How can I confirm you are using ALM 5.0.1? When I inspect your source code, querystring value are removed from the script src URL.
@dcooney We have restored the querystring value. Here’s the code for the repeater template
<?php
$post_id = get_the_id();
$post_type = get_post_type( $post_id );
$title = get_the_title();
$thumb_id = get_post_thumbnail_id();
?>
<article id="<?php echo $post_type . '-' . $post_id; ?>" <?php post_class( 'entry-card' ); ?>>
<header class="entry-header">
<?php
echo '<a href="' . esc_url( get_permalink() ) . '" rel="bookmark" aria-label="Read more about ' . $title . '">';
if ( has_post_thumbnail() ) {
$featured_img_normal = wp_get_attachment_image_src( $thumb_id, 'featured-image-thumbnail' );
$featured_img_retina = wp_get_attachment_image_src( $thumb_id, 'featured-image-thumbnail-retina' );
$retina_width = get_image_width( 'featured-image-thumbnail-retina' );
$retina_height = get_image_height( 'featured-image-thumbnail-retina' );
$srcset = ( ( $retina_width === $featured_img_retina[1] ) && ( $retina_height === $featured_img_retina[2] ) ) ? ' srcset="' . $featured_img_retina[0] . ' 2x"' : '' ;
echo '<img src="' . $featured_img_normal[0] . '" alt="" width="' . $featured_img_normal[1] . '" height="' . $featured_img_normal[2] . '"' . $srcset . '>';
}
echo '<h2 class="entry-title">' . $title . '</h2>';
echo '</a>';
?>
</header><!-- .entry-header -->
<footer class="entry-footer">
<?php gmktg_entry_footer(); ?>
</footer><!-- .entry-footer -->
</article><!-- #post-## -->
Thanks.
Please remove the closing <!-- #post-## --> and it should fix it.
It’s working now again. Thanks @dcooney.
Regarding the IE 9 support. Did you no longer support the browser?
Oh great.
I’ll need to figure why that broke things.
I won’t be supporting IE9 going forward.
@dcooney It’s working now. I think it’s just a delay and probably the repeater template issue earlier as well. We are testing on Browserstack. Thanks again for your time.
