Extension: AJAX "read more"

[shazahm1]

Extension: AJAX "read more"

[billerickson]

Yes, we could add an additional filter, but I don't see how it is used in this specific instance.

If I were to build the AJAX read more feature, I would add a data attribute to the article with the post ID ( data-id="123" ). Then I'd have a JS file with something like (more info):

jQuery(function($){

	$('.display-posts-listing .excerpt-more').click(function(e){
		e.preventDefault();
		var container = $(this).closest('.display-posts-listing'),
			article = $(this).closest('.listing-item'),
			data = {
			action: 'be_dps_load_more',
			post_id = article.data('id')
		};
		$.post(dps_load_more.url, data, function(res) {
			if( res.success ) {
				article.find('.excerpt').html( res.data );
		}
	});
});

Or an even simpler approach would be to include_excerpt="true" and include_content="true", use CSS to hide .listing-item .content, then when they click the read more link show the content and hide the excerpt:

jQuery(function($){
	$('.listing-item .excerpt-more').click(function(e){
		e.preventDefault();
		$(this).closest('.listing-item').toggleClass('read-more');
	});
});

.listing-item .content,
.listing-item.read-more .excerpt { 
	display: none; 
}

.listing-item.read-more .content { 
	display: block;
}

[shazahm1]

I was planning on using the filter to add a post id as a data attribute to the read more link and use the REST API to load in place the post content.

I did not want to load both the excerpt and post content because loading the post content can be "heavy" (resource intensive) due to having to run the_content filter, shortcodes and such.

Adding a data attribute to the listing-item would be fine too, but it looks like I would still need a filter to add it. Maybe I'm missing something, how would you add it?

My backup plan is to hook into the display_posts_shortcode_output filter and wrap the container in a new div with the data attribute, but I do not like that method either because it'll break the li wrapper if used. I can work around that too if I put a little more though into it.

[billerickson]

Personally I'd use the output filter since it includes $inner_wrapper as a parameter.

/**
 * Display Posts Data Attribute
 * @see https://displayposts.com/docs/the-output-filter/
 *
 */
function be_dps_data_attribute( $output, $original_atts, $image, $title, $date, $excerpt, $inner_wrapper, $content, $class, $author, $category_display_text ) {
	return str_replace( '<' . $inner_wrapper, '<' . $inner_wrapper . ' data-id="' . get_the_ID() . '"', $output );
}
add_filter( 'display_posts_shortcode_output', 'be_dps_data_attribute', 10, 11 );

Do you think that would work for you?

[billerickson]

Actually, that might not work if you're using div as the wrapper. It would add the attribute to every div.

Assuming you are not customizing the wrapping element in any other filters, this would work:

/**
 * Display Posts Data Attribute
 * @see https://displayposts.com/docs/the-output-filter/
 *
 */
function be_dps_data_attribute( $output, $original_atts, $image, $title, $date, $excerpt, $inner_wrapper, $content, $class, $author, $category_display_text ) {
	$open = '<' . $inner_wrapper . ' class="' . implode( ' ', $class ) . '"';
	return str_replace( $open, $open . ' data-id="' . get_the_ID() . '"', $output );
}
add_filter( 'display_posts_shortcode_output', 'be_dps_data_attribute', 10, 11 );

[shazahm1]

Taking a closer look, I can just use the output filter and add a div around the content with the post id which should work fine with both list and div layout wrappers. If it does not work out and need something else, I'll loop back.

[shazahm1]

You know it did not occur to me that was was in "the loop" using the output filter, lol. Reading you lost comment again reminded me.

So, I just did this to add the post ID with a hidden span which should not negatively affect layout. I also added to the $class because, why not ;)

function be_dps_add_post_id( $output, $original_atts, $image, $title, $date, $excerpt, $inner_wrapper, $content, $class, $author, $category_display_text ) {

	$id           = get_the_ID();
	$post_id      = "post-{$id}";
	$class[]      = $post_id;
	$post_id_span = "<span id='{$post_id}' style='display: none;' data-post-id='{$id}'></span>";

	$output = '<' . $inner_wrapper . ' class="' . implode( ' ', $class ) . '">' . $post_id_span . $image . $title . $date . $author . $category_display_text . $excerpt . $content . '</' . $inner_wrapper . '>';

	return $output;
}
add_filter( 'display_posts_shortcode_output', 'be_dps_add_post_id', 10, 11 );

Thanks for your input yesterday. It helped. Now on to added a bit of jQuery to pull in the post content. Should be easy :)

[shazahm1]

Here's my first draft, working :)

https://github.com/shazahm1/Display-Posts-Shortcode-AJAX-Read-More

Think I'll just add a little loading spanning and call it done.