Combining shortcode, infinite scroll & masonry

This topic has 12 replies, 3 voices, and was last updated 5 years, 8 months ago by Ross.

Viewing 10 posts - 1 through 10 (of 13 total)

1 2 →

Anonymous

(Private) March 4, 2019 at 5:18 pm #203865

Hi there,

I’d like to use the infinite scroll mechanism in combination with masonry and the shortcode function.

The results url points definitely pointed to the write page. And the following settings should be correct either.

Post / Result Selector: article
Infinite Scroll Container: .archive-query__inner

And this is my custom results template.

<?php if ( $query->have_posts() ): ?>
		<div class="masonry archive-query__inner entry-content">
			<?php while ($query->have_posts()) : $query->the_post(); $kategorie_term = get_field( 'kategorie' ); ?>
			<article class="object <?php if ( $kategorie_term && $kategorie_term->name !== 'Fact' ) { echo 'object--blue tagged'; } elseif ( $kategorie_term->name == 'Fact' ) { echo 'object--yellow tagged'; } else { echo 'object--blue'; } ?>" id="post-<?php the_ID(); ?>">
				<a href="<?php the_permalink(); ?>">
					<div class="lazyload object__inner" data-bg="<?php if ( $kategorie_term->name == 'Fact' ) { echo the_field( 'factbild' ); } else { echo get_the_post_thumbnail_url(); } ?>" id="post-<?php the_ID(); ?>">
						<?php if ( $kategorie_term ): ?>
						<div class="overline">
							<h6><?php echo $kategorie_term ->name; ?></h6>
						</div>
						<?php endif; ?>

						<div class="object__inner__text content-no-margin">
							<?php if ( $kategorie_term && $kategorie_term->name !== 'Fact' ) { echo '<h3>' . get_the_title() . '</h3>'; } elseif ( $kategorie_term->name == 'Fact' ) { echo '<h3>' . get_field( 'facttext' ) . '</h3>'; } else { echo '<h4>' . get_the_title() . '</h4>'; } ?>
							<p class="textlink" href="<?php the_permalink(); ?>">Mehr erfahren</p>
						</div>
					</div>
				</a>
			</article>
			<?php endwhile; ?>
		</div>
		<?php else: ?>
		<div class="search-filter-results-list" data-search-filter-action="infinite-scroll-end">
			<span>Keine Einträge gefunden...</span>
		</div>
		<?php endif; ?>

Thank you in advance for your help!

Trevor

(Private) March 5, 2019 at 9:34 am #203910

You are using our Shortcode Display Results method, and the code you sent is the modified results.php template file you have edited? How do you apply the masonry javascript to that? Does masonry work on the initial page load, but not when more posts are loaded?

Anonymous

(Private) March 5, 2019 at 9:44 am #203920