Adding infinite scroll to Isotope grid with several post types

HI tobbger,
You can build a custom shortcode to include post types of your choosing. You are not limited to standard Posts.
https://connekthq.com/plugins/ajax-load-more/docs/shortcode-builder/

Cheers,

Where do I put the short code?

Likely directly in your page template, but it sounds like your listing is rather complicated and likely will need some custom development to get it fully working.

Yeah, there’s one class on the figure for each post-type. Do you have any idea, looking at my code above, what I likely have to do in order to get it working?

You can get the current post type in a repeater template like so.

global $post;
$type = get_post_type($post->ID);

How that helps.

How would I use that in the snippet I provided?

I’m sorry. I’m aware that it’s a bit annoying to ask for quick fix and I should definitely have done my research on this and WordPress in general before asking anything. The thing is, I’m doing this site for a client and I’m supposed to deliver the site by this week. Everything basic is working, but the fact that I’m a complete beginner at WordPress makes it very hard for me to work this infinite scroll functionality out by my own. And it’s the only missing piece from getting this done. I’m not expecting anyone to do all of the work for me, but that’s the reason why I’m asking so much in detail – being in a bit of panic and at the same time trying to figure out something I should’ve much more knowledge about before starting. ??

Yea, I totally get that.

Your page template:

<div class="isotope-container">
<?php echo do_shortcode('[ajax_load_more post_type="projekt, post, instagram, medarbetare"]'); ?>
</div>

Your Repeater Template:

<?php 
   global $post;
   $type = get_post_type($post->ID);   
   if ($type == 'projekt') { ?>
   <figure class="item item-w2 item-h3 project">
       <h3>Projekt</h3><br />
       <h2><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h2>
       <div class="bg-img">
           <div class="overlay"></div>
           <a href="<?php echo get_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
       </div>
   </figure>
<!-- Regular post loop -->
 <?php  }else if($type == 'post') { ?>
   <figure class="item item-h2 news">
       <h3>Nyhet</h3>
       <h2><a href="<?php bloginfo('siteurl'); ?>/nyheter/#<?php the_slug();?>"><?php the_title(); ?></a></h2>
       <h3 class="date"><?php the_time( 'Y-m-d' ); ?></h3>
   </figure>
<!-- Instagram post loop -->
 <?php   } else if($type == 'instagram') { ?>
   <figure class="item item-h2 instagram">
       <h3>Instagram</h3>
       <div class="bg-img">
           <div class="overlay"></div>
           <?php the_content(); ?>
       </div>
   </figure>
<!-- Medarbetare post loop -->
 <?php   } else if( $type == 'medarbetare') { ?>
   <figure class="item item-h2 about">
       <h3><a href="<?php bloginfo('template_directory'); ?>/om-oss"><?php the_title(); ?></a></h3>
       <div class="bg-img">
           <div class="overlay"></div>
           <img class="portrait" src="<?php the_post_thumbnail_url(); ?>" />
       </div>
   </figure>
 <?php   } ?>

Thank you so much for your help, dcooney! I really, really appreciate it!

However, the code doesn’t seem to work with the Isotope container. Maybe I need a way to call the event that arranges the figure elements. It works perfectly if I delete the <div class="isotope-container">, but that looks strange ofcourse.

• This reply was modified 7 years, 10 months ago by tobbger.

ALM is not going to work out of the box with Isotope, it will take some JaveScript work with Callbacks. Masonry is supported as you see from the examples on the site.

Good luck.