Back to Activities

January 1, 0001

Activities Module Usage Guide

Creating a New Activity

To add a new activity to the website, create a new markdown file in the content/activities/ directory.

File Format

content/activities/YYYY-MM-DD-activity-name.md

Required Front Matter

Option 1: Specify Individual Images

---
title: "Activity Title"
date: YYYY-MM-DD
images:
  - "/images/activities/image1.jpg"
  - "/images/activities/image2.jpg"
  - "/images/activities/image3.jpg"
draft: false
---

---
title: "Activity Title"
date: YYYY-MM-DD
images_folder: "images/activities/folder-name"
draft: false
---

Content

After the front matter, you can add optional content describing the activity in Markdown format.

Image Management

Image Storage

Store activity images in: static/images/activities/

  1. Create a folder for each activity: static/images/activities/activity-name/
  2. Place all images in the folder
  3. Use images_folder in front matter to auto-load all images
  4. Supported formats: .jpg, .jpeg, .png, .webp, .gif

Image Guidelines

  • Support for various aspect ratios (handled automatically)
  • Recommended formats: JPG, PNG, WebP
  • Compress images before upload (< 1MB per image recommended)
  • Use descriptive filenames
  • When using images_folder, images are loaded in alphabetical order

Features

List View

  • Displays activities in reverse chronological order (newest first)
  • Each activity shows an infinite horizontal scroll carousel
  • Smooth animations and touch/mouse support
  • Progress indicator showing current image

Single Activity View

  • Grid layout for all images
  • Click any image to open in lightbox
  • Keyboard navigation (arrow keys, ESC)
  • Optional activity description

Example Activity

---
title: "2024 Team Building Event"
date: 2024-10-15
images_folder: "images/activities/2024-team-building"
draft: false
---

Our research group enjoyed a wonderful team building day at the Shenzhen Bay Park. 

## Highlights
- Morning hiking
- Team games
- BBQ dinner

Using Individual Images

---
title: "2024 Conference Trip"
date: 2024-07-20
images:
  - "/images/activities/conference/photo1.jpg"
  - "/images/activities/conference/photo2.jpg"
  - "/images/activities/conference/photo3.jpg"
draft: false
---

Conference highlights and experiences...