A few years ago, I created a small lightweight web application that allows you to make an advent calendar by revealing a new image each day before Christmas.
This PHP application is simple, light and fast. All you have to do is copy the downloaded files to your web server folder, and place the images or photos in the right directory. It is also possible to configure the application into a countdown to an event.
The following is a simplified installation and configuration guide, based on the more detailed documentation.
Installation of Advent Calendar
Download the latest version from GitHub. (You can also clone the repository to more easily retrieve updates.)
Unzip the downloaded file to your web server directory, and navigate to the folder you created. (You can change the name of the folder, it has no impact).
Now go to the private folder. This contains the configuration, and this is where we will store the files.
Duplicate the settings.example.json file to settings.json. Edit this new file to replace the title with the one you want, and set the correct calendar year.
Store the images or pictures in this folder. They should be named from 1 to 24, and be in JPEG, PNG or GIF format.
For example 1.jpeg, 2.jpg, 3.png, etc.
Let’s have a look at three options that may be useful.
Add a password
To protect access to your calendar, for example so that only your family or friends can access it, you can add a password.
Private advent calendar: login with a password.
You need to add the following line to the settings.json configuration file:
"passkey": "My top secret password!"
Countdown
By specifying in the settings.json configuration file the start day, end day and month, in addition to the year, the advent calendar becomes a countdown.
For now, it’s not possible to make a countdown between two different calendar months.
Add title, caption and description
You can customise the title of each day, as well as add a caption under each photo and a description. It’s also possible to add a link to which the image and the caption redirect.
You need to create a new file called calendar.json which has the following structure for each day to be customised:
{
"6": {
"title": "Saint Nicolas",
"legend": "Strasbourg, Dec. 2008",
"text": "Lorem ipsum dolor sit amet, […].",
"link": "https://www.devenet.eu/advent/demo"
},
"8": {
"legend": "Paris, July 2021",
}
}
