Randomized Banner

Plugin
1

Background

My forum is known for a rotating series of fun banners. Here’s a plugin I use to enable randomly showing different banners between visits or when the user performs a refresh.

How to install
:information_source: Summary Adds a banner that is randomly chosen from a list.
:hammer_and_wrench: Repository GitHub - ScottMastro/discourse-randomized-banner: Randomized Discourse Banner Plugin
:open_book: Install Guide How to install plugins in Discourse

image
image1920×767 66.4 KB

:arrow_down: REFRESH :arrow_down:
image
image1920×828 53.3 KB

Plugin options

image
image1676×1130 140 KB

Banner images to be randomized are included in the banner images setting. To show a guest (user not logged in) a unique static banner, add it to the guest banner setting. To show all users a static banner, use the override banner setting.

SEO implications

Since the random nature of this plugin making the banner dynamic, a naive implementation may stick the random banner in to late causing a high Largest Contentful Paint (LCP) measure and may cause a Content Layout Shift (CLS).

For LCP, the optimize lcp option preloads the guest banner and override banner (if they exist) so they are drawn faster. The randomized banners are not preloaded to minimize preloading assets that aren’t used. It is important to keep the file sizes of your banners smaller to minimize the time to download the banners.

NOTE
I have kept the LCP down to sufficient levels on my forum, but I try to use banners smaller than 2MB and I use a CDN. I also made my guest banner about 200KB. But I changed the implementation of the plugin right before typing this post. There should not be LCP issues however there’s no guarantee. I plan to monitor my LCP. Please use with caution.

For CLS, content shift is avoided by defining the image size in advance in the HTML. The banner aspect ratio is needed in advance to draw the div that holds the banner. Therefore, you want all your random banners to have roughly the same aspect ratio. Other ratios will be accommodated by may be stretched or shrunk.

11 Likes
2

This is great and might just do the trick for what I’ve been looking for!

I have a question - is there a particular image size requirement or recommendation for the banner? I think I’d want ours to be a little lower in height. Does that matter?

1 Like
3

It will fill the width 100% and the aspect ratio parameter determines the height. This is so the space where the banner will go can be allocated before the banner is downloaded so the page doesn’t suddenly shift.

So you can alter the aspect ratio parameter to make the height smaller.

2 Likes