Jump to content


  • Posts

  • Joined

  • Last visited

Reputation Activity

  1. Like
    Ch3f got a reaction from paul2009 in Time-based headings   
    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.
  2. Like
    Ch3f reacted to paul2009 in Time-based headings   
    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  ⬇️
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.