S O L V E D
For others, and for my own future reference:
Integrating Jetpack’s infinite scroll into X requires changes in three files:
style.css
functions.php
framework/views/ethos/wp-index.php
See: https://jetpack.com/support/infinite-scroll/
Another good tutorial: https://www.cssigniter.com/how-to-implement-jetpacks-infinite-scroll-on-your-blog/
FIRST:
Jetpack needs to know the ID of the div which contains all the posts. In X that div has a class of x-main but has no ID by default. Without an ID it won’t work. To fix it, name the ID content. In ethos/wp-index.php change this line:
<div class="<?php x_main_content_class(); ?>" role="main">
into this:
<div id="content" class="<?php x_main_content_class(); ?>" role="main">
SECOND:
Add this code to functions.php. If you have a footer you’ll need to change those options. If you want a Show More button you’ll also need to change the options. See the first link above.
// Add theme support for Jetpack infinite scroll
// =======================
add_action( 'after_setup_theme', 'jetpack_infinite_scroll_init' );
function jetpack_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'content',
'render' => 'jetpack_infinite_scroll_render',
'posts_per_page' => get_option( 'posts_per_page' ),
'footer' => false,
'footer_widgets' => false,
'footer_callback' => 'no_jetpack_footer',
) );
}
// Render the posts
function jetpack_infinite_scroll_render() {
$is_filterable_index = is_home() && x_get_option( 'x_ethos_filterable_index_enable' ) == '1';
if ( $is_filterable_index ) :
x_get_view( 'ethos', '_index' );
else :
x_get_view( 'global', '_index' );
endif;
}
// (remove Jetpack's annoying popup footer)
function no_jetpack_footer() { ?>
<div id="infinite-footer"></div>
<?php }
// =======================
THIRD:
Add this code to style.css to hide the pagination controls since we no longer need them.
/* Hide pagination when Jetpack's infinite scroll is in use */
.infinite-scroll .x-pagination {
display: none;
}
FOURTH:
Go to Admin > Settings > Reading and select “Load posts as you scroll”
Go to Admin > Jetpack > Settings and select “Load more posts as the reader scrolls down”
If you have footers that you care about, select “Load more posts in page with a button” instead
If it’s still not working the way you would like, one of the two links at the top of this post will help you sort it out.
As I mentioned in the post just above this one, Jetpack’s infinite scroll can work with Masonry layout, but only with some additional Javascript modifications. I didn’t bother because The Grid looks much nicer.
I hope this helps somebody…