Read More Buttons - Expandable Content for Mobile

Read More Buttons - Expandable Content for Mobile 1.0.3

No permission to download

Nulumia

Well-known member
Nulumia submitted a new resource:

Read More Buttons - Expandable Content for Mobile - Make long areas of content expandable on mobile with a Read More button

View attachment 260552

This simple addon collapses long areas of content on mobile devices into an expandable block and "Read more..." button. This feature is very similar to the widely seen "Read more" links on Wordpress blogs and many articles on the web.

How else is this addon useful?
Very long posts or articles can actually actually cause what is known as CLS (Content Layout Shift) and LCP (Largest Contentful Paint) issues in page performance tools...

Read more about this resource...
 

Nulumia

Well-known member
I'd like to share some input on using this addon to fix Lighthouse/Web Vitals issues.

This addon was developed with a client site that had many thousands of long articles, resource pages and posts. When these posts were condensed to a mobile screen, it created extremely long on-page elements.. easily a few thousand pixels of scrolling. These type of long elements are the first to get hit with CLS or LCP (Largest contentful paint) errors.

We had 10's of thousands of failing URLs in Google Search Console simply because of this. With this addon, those large areas were collapsed down with the "Read more" button, and solved ALL failing URLs with one single step.

Also to keep in mind, when does the collapsible area get triggered?

The minimum height is set in Admin -> Appearance -> Style Properties -> [Nulumia] Read More Buttons. By default, this is set to 650px. Any content higher than this value will show the collapsible block, so very short posts or replies are not affected.

You can tweak this setting to be shorter (for more aggressive use of the Read More button) or higher (for less frequent use). Even setting to a high value in the 1000-1200px range is not unreasonable.
 

mkucuksari

Well-known member
Again a great addon from @Nulumia (y) and it is free👏

A question, while collapsing long content into collapsible blocks, how does it work ? I mean does it count character ? If yes, may be it will be nice if we can have change this character limit as setting.
 

Nulumia

Well-known member
Again a great addon from @Nulumia (y) and it is free👏

A question, while collapsing long content into collapsible blocks, how does it work ? I mean does it count character ? If yes, may be it will be nice if we can have change this character limit as setting.
Thank you! Well this feature actually uses the native collapsible function in Xenforo, such as for Quotes. So it really works according to whether the containing element holding the text is longer than a given value, such as 500px. In the case of quotes it's quite small. But yea it does not do any calculating of character count, as that adds a little extra overhead.

However, you can get an accurate idea of character count and the size required to set for this addon, by throwing some sample content in a thread already cut down to the length you want via a character count website, then going in mobile view with the addon enabled. If you always want X characters allowed to start open, just keep increasing the minimum height value in the addon until there's no more collapsible block.

Hope this helps!
 

Nulumia

Well-known member
Nulumia updated Read More Buttons - Expandable Content for Mobile with a new update entry:

AMS Article & UBS Blog Entry Compatibility

Changelog​

Addon related
  • Added compatibility for [XenAddons] Article Management System (AMS)
  • Added compatibility for [XenAddons] User Blog System (UBS)

To update your theme, please download the latest version at:
https://www.nulumia.com/shop/my-downloads/

You must select "Overwrite files during install/upgrade" when upgrading to this version.

Overview

This update adds compatibility for AMS...

Read the rest of this update entry...
 

El Porcharo

Well-known member
Hello there!
Very nice free add-on thank you!

I was wondering... is there any chance that we could change the gradient color in readmore-expandLink element?

In my case, it's a light gray, but I'd like to turn it into the Content Background Color set in my current style.
I tried adding .readmore-expandLink {background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 80%)!IMPORTANT;} to extra.less without success. Anyway, it would be awesome to see an option in the settings page to set the color like it is already for the button 😇
 

Nulumia

Well-known member
Hey thanks for the comments,
Did you try editing this style property?

1653104370201.png

The "Expand button" should directly affect what you're trying to edit. Please let me know if it still doesn't work for you.
 

El Porcharo

Well-known member
Yes, that was set, thank you.
But it only affects the button styling and the length of the fading block, not the color :)
 
Top