Perfect, I'll try all of that. Hopefully I can figure out the additional CSS needed to ensure the images look as they should. Thank you so much for your reply.
You can use the same principle. As you're using images, you'll want to add the images to Squarespace first and make a note of the URL of each one, for example //images.squarespace-cdn.com/content/v1/5e4d0893227ba62de80e9e46/f97f7574-05a2-417d-b98e-23b6f29241a3/Tuesday.jpg. You can then insert these URLs into the code below in place of Tuesday.jpg and so on.
Here's a simplified example:
<div class="sqs-image">
<img id="ImageOfTheDay" src="" alt="Image of the Day">
</div>
<script>
// Get the current day of the week (0 for Sunday)
const dayOfWeek = (new Date()).getDay();
// Image URLs for each day
const imageUrls = [
'Sunday.jpg', // Sunday
'Monday.jpg', // Monday
'Tuesday.jpg', // Tuesday
'Wednesday.jpg', // Wednesday
'Thursday.jpg', // Thursday
'Friday.jpg', // Friday
'Saturday.jpg' // Saturday
];
// Get the image container and image element
const imageElement = document.getElementById('ImageOfTheDay');
// Set the image source based on the day of the week
imageElement.src = imageUrls[dayOfWeek];
</script>
The first section creates a div element containing an image placeholder where the image will appear.
Below this is the script, which gets the day of the week using getDay(). This returns a day from 0 to 6 and this is used to determine which image to show.
As I say, this is a simplified example. You may need additional CSS to style/size the image to meet your needs.
Did this help? Please give feedback by clicking an icon below ⬇️