[OzzModz] Read More Buttons - Expandable Content for Mobile

[OzzModz] Read More Buttons - Expandable Content for Mobile 2.0.0

No permission to download
Overview FAQ Updates (4) History Discussion
Nulumia

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...
Click to expand...

Read more about this resource...
 
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.
 
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.
 
mkucuksari said:
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.
Click to expand...
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 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...
Click to expand...

Read the rest of this update entry...
 
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 😇
 
Hey thanks for the comments,
Did you try editing this style property?

1653104370201.webp

The "Expand button" should directly affect what you're trying to edit. Please let me know if it still doesn't work for you.
 
Yes, that was set, thank you.
But it only affects the button styling and the length of the fading block, not the color :)
 
This resource has been taken over by OzzModz. It will be going through a couple of possible updates.

1) Rebranding of the addon to reflect the new owner.
2) Any bug fixes. Paid addons will take priority.
 
You must log in or register to reply here.
Back
Top Bottom