Easy Web Things

Activity Pub

This post is a test post.

Testing ActivityPub. Does editing here change the post when viewed elsewhere?

Yes it does, the answer is yes when the post is on this server, but it seems other servers may show an older copy of this post.

Well, this seems to be working. Good.

If you’re wondering what on earth I’m on about, I’m setting up this blog with Activity Pub, so it can be followed within the Fediverse.

If you have heard of the Fediverse, and are reading this blog on something like the Mastodon social media… Yay! You can see it! That’s great, it works! And also I’m really excited that replies via other clients seem to show up as comments on this blog.

If you have never heard of the Fediverse, well that’s ok. Please read this article that Douglas Adams wrote about the internet in 1999, to emotionally prepare you for new things. https://douglasadams.com/dna/19990901-00-a.html Then, read about what the Fediverse is on Wikipedia here: https://en.wikipedia.org/wiki/Fediverse

Read More

How do I add a Read More button for WordPress Elementor Post Pages?

Read More button to Expand Post in Archives.

Add the following CSS to your sites global CSS or on the Loop Grid Widgets Advanced page if you prefer.

I’ve had a couple of questions recently about ‘read more’ buttons. Usually a Read More button in the WordPress archive takes you to the relevant post page, but what if it just revealed the full content on the archive page instead?

WordPress by default has two kinds of content that can appear in the Archives, or Post List. The Page Content, or an Extract. WordPress can also automatically create an extract from your content, but often the automatic extract will have no formatting, making the extract preview hard to read.

A solution I’ve occasionally used, is an Archives page using Elementor Loop Grid, set to display the whole post content. A ‘read more’ button is added, where clicking the button expands to display the full post. The post can be contracted to a preview.

To do this you will need to use CSS for the box, and some Javascript to control the box size and change the ‘read more’ button to a ‘read less’ button.

Start by creating your Elementor Loop Grid. This will display your post name, featured image, post meta, and use Post Content rather than extract. Add a button with ‘Read More’ text below the Post Content Widget (or text widget populated by dynamic content).

The Read More button and the Post Content Container, will need a custom class, which you can add on the ‘advanced’ tab of each widgets settings.

I have given the Read More button a custom class of .read-more-btn and the Post Content container is .readmorecontainer

 

 

				
					

/* Container for the post content */
.readmorecontainer {
    overflow: hidden;
    max-height: 24em; 
    transition: max-height 1s ease-in-out;
}

/* Expanded state of the post content */
.readmorecontainer.expanded {
   max-height: none; 
}

.read-more-btn {
    cursor: pointer;
    display: block;
    margin-top: 2%;
}

Now add the following Javascript to Elementor’s custom code section.

				
					

    document.addEventListener('DOMContentLoaded', function() {
        const readMoreButtons = document.querySelectorAll('.read-more-btn');

        readMoreButtons.forEach(button => {
            const postContent = button.previousElementSibling;

            if (postContent.scrollHeight <= postContent.clientHeight) {
                button.style.display = 'none';
            }

            button.addEventListener('click', function(event) {
                event.preventDefault();

                if (postContent.classList.contains('expanded')) {
                    postContent.style.maxHeight = postContent.scrollHeight + 'px';
                    postContent.offsetHeight;
                    postContent.style.maxHeight = '24em';
                    postContent.classList.remove('expanded');
                    this.textContent = 'Read More';
                    postContent.scrollIntoView({ behavior: 'smooth', block: 'start' });
                } else {
                    postContent.style.maxHeight = postContent.scrollHeight + 'px';
                    postContent.addEventListener('transitionend', function handler() {
                        postContent.style.maxHeight = 'none';
                        postContent.removeEventListener('transitionend', handler);
                    });
                    postContent.classList.add('expanded');
                    this.textContent = 'Read Less';
                }
            });
        });
    });

To see a preview of how the code below works, visit my news pages where it is currently in use.  https://easywebthings.co.nz/category/faq/

Want me to implement this or something similar on your site?  Contact Easy Web Things

If you’ve added a read more button like this to Elementor, or something similar, I’d love to hear how it went. 

(Post 3:50pm 24 June 2024)

Update: Elementor Read More Widget

Elementor has now released a widget called the ‘Read More Widget’ that does a similar thing to the code I’ve mentioned.  However, it’s implementation is a little different, and it appears it needs to be added to each post, and from what I’ve seen it doesn’t have an expansion effect to view the full post within the archives window.

If you want to use the Elementor Read More widget, add it partway down a post.  Then, when the post appears on an archive page, the Read More button should also appear.  When I tested this, the read more button took me through to a post page rather than expanding the post within the archives page.  

At the time of writing this update, I am still using the code from my original post to implement ‘read more’ in a loop grid, as this enables me to apply it to all posts, rather than adding it manually to each, and I like the post expanding within the archive page.  

You can read more about the Elementor ‘Read More’ widget here: https://elementor.com/help/read-more-widget/

 

Read More