# Randomized Banner

**URL:** https://meta.discourse.org/t/randomized-banner/290989
**Category:** Plugin
**Created:** [January 9, 2024, 10:20am UTC](https://meta.discourse.org/t/randomized-banner/290989 "2024-01-09T10:20:44Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [January 9, 2024, 10:20am UTC](https://meta.discourse.org/t/randomized-banner/290989/1 "2024-01-09T10:20:45Z")

</div>

## Background

My forum is known for a [rotating series of fun banners](https://www.elitefourum.com/t/e4-banners-archive/19945). Here’s a plugin I use to enable randomly showing different banners between visits or when the user performs a refresh.

## How to install

| | | |
| --- | --- | --- |
| ℹ | **Summary** | Adds a banner that is randomly chosen from a list. |
| 🛠 | **Repository** | [GitHub - ScottMastro/discourse-randomized-banner: Randomized Discourse Banner Plugin · GitHub](https://github.com/ScottMastro/discourse-randomized-banner) |
| 📖 | **Install Guide** | [How to install plugins in Discourse](https://meta.discourse.org/t/install-plugins-in-discourse/19157) |

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/f/2/8f216a0bc3f6b4dfdf644d40f24dfcd6b80fbb44.jpeg)  
⬇ REFRESH ⬇  
 ![image](https://global.discourse-cdn.com/meta/original/4X/6/5/8/65840b9b97bd8a92827057ff0cd62cf4c7ba1f4d.jpeg)

* * *

## Plugin options

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/8/5/68582c27fe67d4365473c4a485890446191af0b1.png)

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.

---

<div class="post-metadata">

### Author: ![jenmck](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jenmck/32/332487_2.png) [@jenmck](https://meta.discourse.org/u/jenmck)
#### Post date: [March 5, 2024, 9:09pm UTC](https://meta.discourse.org/t/randomized-banner/290989/2 "2024-03-05T21:09:11Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![piffy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/piffy/32/254198_2.png) [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [March 5, 2024, 10:12pm UTC](https://meta.discourse.org/t/randomized-banner/290989/3 "2024-03-05T22:12:33Z")

</div>

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.
