Update banner image

[jillpe]

Summary

reference: https://docs.google.com/spreadsheets/d/1xRLL5b7Gs8ZrhH2K2QTP7oKBpKJjPTlcoh16tb1uj8Q/edit?gid=0#gid=0

Image cycles through a curated list.

Acceptance

• [ ] Admin users have the ability to upload more than one banner image
• [ ] The banner image displayed on the home page is randomly picked from the list of images.

Testing instructions

• [ ] Go to the admin dashboard
• [ ] Choose Settings -> Appearance -> Banner Image
• [ ] Click Choose Files and upload a few banner images and click Save changes
• [ ] Go to the homepage and observe that the banner images show
• [ ] Refresh the page to get a random banner image
• [ ] Waiting about 7 secs and watch the banner images cycle
• [ ] Go back to the admin dashboard Settings -> Appearance -> Banner Image
• [ ] Click Remove all banner images
• [ ] Go back to the homepage
• [ ] Observe that the default banner image now shows

[kirkkwang]

Possible implementation

• have the admin upload a zip of images, the images will then replace all previous images

[josh-morgan117]

@kirkkwang How would the alt text work for these?

[kirkkwang]

@josh-morgan117 So the form field on the banner is a bit of a misnomer I feel. It actually doesn't add an alt-text attribute to the img tag because technically this is a background image of a div tag so there isn't an alt-text. What the field fills out is the title attribute which appears when you hover over the text. The way this is implemented is that all the images have the same title attribute.

[jillpe]

SoftServ QA: Pass ✅

• [x] Go to the admin dashboard
• [x] Choose Settings -> Appearance -> Banner Image
• [x] Click Choose Files and upload a few banner images and click Save changes
• [x] Go to the homepage and observe that the banner images show
• [x] Refresh the page to get a random banner image
• [x] Waiting about 7 secs and watch the banner images cycle
• [x] Go back to the admin dashboard Settings -> Appearance -> Banner Image
• [x] Click Remove all banner images
• [x] Go back to the homepage
• [x] Observe that the default banner image now shows

Screenshots/Videos

 https://github.com/user-attachments/assets/a6adec89-6108-441c-99f0-5e93649b780f