AILab-RITEH Website

Official website for the Artificial Intelligence Laboratory @ RITEH

🌐 Live Site: https://ailab.riteh.uniri.hr/

Website Overview

This is a Jekyll-based static website using the Minimal Mistakes theme, and the site is automatically built and deployed to GitHub Pages at this link.

File Structure:

├── _config.yml              # Main site configuration
├── _data/
│   └── navigation.yml       # Navigation menu
├── index.md                 # Homepage
├── people.md                # Team members page
├── projects.md              # Projects page
├── publications.md          # Publications page
└── assets/
    └── images/
        ├── people/          # Team member photos
        ├── projects/        # Project images
        └── equipment/       # Equipment photos

Quick Start

Option 1: Edit on GitHub (Easiest)

Navigate to the file you want to edit on GitHub
Click the pencil icon (✏️) to edit
Make your changes
Scroll down and click "Commit changes"
Wait 1-2 minutes for the site to rebuild

Option 2: Edit Locally

Clone the repository (git clone https://github.com/AIlab-RITEH/ailab-riteh.github.io.git)
- Switch into the cloned repository cd ailab-riteh.github.io/
Make your changes
Test locally (see Local Development)
Push to GitHub
- . $\rightarrow$ stage the changes you want to publish
- git commit -m "[commit message]" $\rightarrow$ add a description of the staged changes
- git push $\rightarrow$ will publish the changes, wait 1-2 minutes for site to rebuild

Markdown/Jekyll/YAML Symbols and Tips

Each Markdown file is organised into two important parts:

front matter, i.e., the configuration part of the page. This is written in YAML. The Front matter is separated by --- symbols in each Markdown file.
- the front matter can contain things such as the overall webpage layout (e.g., single, splash, more on layouts), a header photo, a header excerpt...
- to easily spot the end of the YAML section, a [YAML END] marker has been added (by hand) to the markdown files.
After the YAML front matter, the Markdown section begins and everything following the [YAML END]--- marker is written in Markdown/HTML.

You will often see a few special symbols in the Markdown files. They are normal and expected:

{% ... %} is a Jekyll/Liquid tag used for logic or includes.
- Example: {% include feature_row id="featured_ongoing" %} inserts a predefined layout block.
 is an HTML comment.
- It is hidden on the final website and used for notes/instructions in source files.
# is used to create headings in Markdown. However, when used in Jekyll front matter (which is YAML), then it is a comment!

Tip: If you are only editing content (names, text, links), keep these symbols as they are unless you intentionally want to change layout/behavior.

Important YAML Tips:

Indentation matters! Use exactly 2 spaces per level
The | character after excerpt: allows multi-line text
Links use Markdown format: [Text](URL)
Each entry starts with - (2 spaces, dash, space)

Editing Guide

1. Adding/Editing Team Members (`people.md`)

Team members are organized into sections in the front matter (YAML section between --- at the top of the file). Each section represents a different role.

Available Sections:

faculty: - Professors and lab heads
postdocs: - Postdoctoral researchers
associates: - PhD students and research associates

Adding a New Team Member

Step 1: Open people.md

Step 2: Find the appropriate section (e.g., associates: for PhD students)

Step 3: Copy an existing entry and modify it:

associates:
  - image_path: /assets/images/people/lastname.png
    alt: "Full Name"
    title: "Full Name"
    excerpt: "PhD Student"

Step 4: For faculty or postdocs with more details, use this format:

faculty:
  - image_path: /assets/images/people/lastname.jpg
    alt: "Prof. Full Name"
    title: "Prof. Full Name, Ph.D."
    excerpt: |
      **Position Title**
      
      Research: Research Areas, Separated by Commas

      [Scholar](https://scholar.google.com/link)

      [Email](mailto:email@uniri.hr) • [Website](https://example.com/) • [+385 51 XXX XXX](tel:+38551XXXXXX)

Step 5: Don't forget to reference the right photo and upload it to assets/images/people!

Removing a Team Member

To remove someone, either:

Delete their entire entry (from - image_path: to the end of their excerpt:)
Comment out their entry by adding # at the start of each line:

  # - image_path: /assets/images/people/name.jpg
  #   alt: "Name"
  #   title: "Name"
  #   excerpt: "Role"

Updating Team Member Information

Simply find their entry and edit the relevant fields:

title: - Person's name and title
excerpt: - Description, research areas, links
image_path: - Photo location

2. Adding/Editing Projects

File to edit: projects.md

Projects are divided into featured and regular projects.

Featured Projects

Featured projects appear in cards with images at the top of the page. They're defined in two sections:

featured_ongoing: - Current projects
featured_completed: - Finished projects

Adding a Featured Project:

featured_ongoing:
  - image_path: /assets/images/projects/project-acronym.png
    alt: "Project Acronym"
    title: "Project Acronym"
    excerpt: |
      Full Project Name or Description
      
      **Duration**: 2024-2027  
      **Funding**: Funding Agency Name (Grant Number)
      
      [Click here to learn more](https://project-website.com/){: .btn .btn--info}

Editing Project Details:

title: - Project acronym or short name
excerpt: - Full description (use | for multi-line)
Duration and Funding - Add as bold text in the description
Add a button link using [Text](URL){: .btn .btn--info}

Regular Projects (List Format)

Below the featured projects, you can add simple list items:

## Ongoing Projects

<div class="projects-featured">
{% include feature_row id="featured_ongoing" %}
</div>

- **Project Name** (2024-2027)  
  Brief description of the project  
  *Funding*: Funding source

To add a new project to the list:

Find the appropriate section (Ongoing or Completed)
Add a new bullet point after the </div> tag:

- **YOUR PROJECT NAME** (Year-Year)  
  Brief description  
  *Funding*: Source
  [Website](https://link.com/)

3. Adding/Editing Publications

File to edit: publications.md

Publications are added directly in the Markdown content (not in front matter).

Adding a Featured Publication

Featured publications appear at the top with full formatting:

## Featured Publications

**Paper Title Goes Here**  
Authors, Separated, By, Commas  
*Journal Name* Volume (Issue), Pages (Year)

---

**Another Paper Title**  
Author List  
*Journal Name* Details

---

Template for a new publication:

**Full Title of Your Paper**  
First Author, Second Author, ..., Last Author  
*Journal or Conference Name* Volume Number (Issue Number), Page Range (Year)

---

To add:

Open publications.md
Find the ## Featured Publications section
Add your publication using the template above
Place it where you want it to appear (top = first listed)

Updating Scholar Links

At the bottom of the page, maintain links to Google Scholar profiles:

- **Prof. Ivan Štajduhar**: [Google Scholar](URL)
- **Dr. New Person**: [Google Scholar](URL)

Adding Datasets

In the ## Open Datasets section:

## Open Datasets

We contribute to open science by sharing datasets and code:

- **[Dataset Name](https://link.com/)**: Description of the dataset
- **[Another Dataset](https://link.com/)**: Description here

4. Editing the Homepage

File to edit: index.md

The homepage has several editable sections:

Header/Hero Section

header:
  overlay_color: "#5e616c"
  overlay_filter: "0.5"
  overlay_image: /assets/images/ai-bg.jpg
  actions:
    - label: "Learn More"
      url: "#about-our-research"
excerpt: "Artificial Intelligence Laboratory @ Department of Computer Engineering..."

To change:

overlay_image: - Background image
excerpt: - Subtitle text

Featured Projects on Homepage

The homepage displays 3 featured projects in cards:

feature_row:
  - image_path: /assets/images/projects/project1.png
    alt: "Project Name"
    title: "Project Name"
    excerpt: "Brief description"
    url: "https://project-link.com/"
    btn_label: "Learn More"
    btn_class: "btn--primary"

To add/edit featured projects:

Find the feature_row: section
Modify existing entries or add new ones
Keep exactly 3 entries for best layout!

Main Content Sections

Below the YAML front matter, you can edit the Markdown content:

## About Our Research

The Artificial Intelligence Laboratory at RITEH focuses on cutting-edge research in artificial intelligence with emphasis on:

- **Medical Image Analysis**: Description
- **Computer Vision**: Description
- **Deep Learning Applications**: Description

To edit:

Change section headings (lines starting with ##)
Modify bullet points
Update text content
Add/remove sections as needed

Contact Information

At the bottom:

## Contact

**Artificial Intelligence Laboratory**  
Department of Computer Engineering  
Faculty of Engineering, University of Rijeka  
Vukovarska 58, 51000 Rijeka, Croatia

**Lab Head**: Prof. Ivan Štajduhar, Ph.D.  
**Email**: [ivan.stajduhar@uniri.hr](mailto:ivan.stajduhar@uniri.hr)  
**Phone**: +385 51 651 448

Update this with current contact details.

5. Adding Images

Preparing Images

Recommended image sizes:

Team member photos: 500x500px (square, portrait)
Project images: 1200x630px (landscape)
Homepage hero: 1920x1080px (landscape)

File formats: JPG, PNG, or SVG

Naming convention: Use lowercase with hyphens (e.g., project-name.jpg, john-doe.png)

Uploading Images

Method 1: GitHub Web Interface

Navigate to assets/images/people/ (or projects/, equipment/)
Click "Add file" $\rightarrow$ "Upload files"
Drag and drop your images
Click "Commit changes"

Method 2: Local Git

Place image files in the appropriate folder:
- assets/images/people/ - Team photos
- assets/images/projects/ - Project images
- assets/images/equipment/ - Equipment photos
Commit and push to GitHub

Using Images in Content

In YAML front matter:

image_path: /assets/images/people/filename.jpg

In Markdown content:

![Alt text](/assets/images/projects/filename.jpg)

With custom sizing:

![Logo](/assets/images/logo.png){: style="height: 50px; width: auto;"}
{: .text-center}

6. Editing Navigation Menu

File to edit: _data/navigation.yml

The top navigation menu is defined here:

main:
  - title: "People"
    url: /people/
  - title: "Projects"
    url: /projects/
  - title: "Publications"
    url: /publications/

Adding a Menu Item

main:
  - title: "People"
    url: /people/
  - title: "Projects"
    url: /projects/
  - title: "Publications"
    url: /publications/
  - title: "News"          # New item
    url: /news/

Removing a Menu Item

Simply delete the corresponding lines or comment them out:

  # - title: "Publications"
  #   url: /publications/

7. Site Configuration

File to edit: _config.yml

This file controls global site settings.

Basic Site Information

title: "AILab-RITEH"
description: "Artificial Intelligence Laboratory @ RITEH"
url: "https://ailab-riteh.github.io"

Site Author (appears in sidebar/footer)

author:
  name: "AILab-RITEH"
  avatar: "/assets/images/ai_lab.png"
  bio: "Artificial Intelligence Laboratory @ RITEH"
  location: "Rijeka, Croatia"
  links:
    - label: "Email"
      icon: "fas fa-fw fa-envelope-square"
      url: "mailto:ivan.stajduhar@uniri.hr"
    - label: "GitHub"
      icon: "fab fa-fw fa-github"
      url: "https://github.com/AIlab-RITEH"

To update:

Change name:, bio:, location: as needed
Update links (Email, GitHub, etc.)
Add new social links using the same format

Theme Skin

Change the color scheme:

minimal_mistakes_skin: "default"

Available skins: "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"

⚠️ Note if editing locally: After editing _config.yml, you must restart the local Jekyll server for changes to take effect.

Local Development

Prerequisites

Ruby (2.7 or higher)
Bundler gem

Setup

Clone the repository:

git clone https://github.com/AIlab-RITEH/ailab-riteh.github.io.git
cd ailab-riteh.github.io

Install dependencies:
```
bundle install
```
Run the local server:
```
bundle exec jekyll serve
```
View the site: Open your browser to: http://localhost:4000

Making Changes Locally

Edit files in your text editor
Save changes
The site will auto-rebuild (watch the terminal for errors)
Refresh your browser to see changes

When satisfied, commit and push:

git add .
git commit -m "Description of changes"
git push

Deployment

The site uses GitHub Pages for automatic deployment.

How it Works

You push changes to the main branch
GitHub automatically builds the Jekyll site
The site is published to https://ailab-riteh.github.io/ (but a DNS record is set up to redirect to https://ailab.riteh.uniri.hr/)
Build time: 1-3 minutes (be patient, wait for changes to take effect!)

File Organization

Keep all team photos in assets/images/people/
Keep all project images in assets/images/projects/
Use descriptive filenames (e.g., radiologynet-logo.png not img1.png)
Optimize images before uploading (compress large files)

Writing Commit Messages

Good examples: Add new team member: John Doe, Update OPTIDERM project duration, Fix broken link in publications

Bad examples: Update, Changes, asdf

Troubleshooting

If you have any issues or want to change the layout/add new items to the website, feel free to consult the Minimal Mistakes Docs.

Quick Reference

File Purposes

File	Purpose
`index.md`	Homepage content
`people.md`	Team members page
`projects.md`	Projects showcase
`publications.md`	Publications list
`_config.yml`	Site-wide settings
`_data/navigation.yml`	Top menu

Image Paths

Content Type	Folder
Team photos	`assets/images/people/`
Project images	`assets/images/projects/`
Equipment	`assets/images/equipment/`
General images	`assets/images/`

Last Updated: 2026
Maintained by: AILab-RITEH Team

Name		Name	Last commit message	Last commit date
Latest commit History 32 Commits
_data		_data
_includes/head		_includes/head
_site		_site
assets		assets
.gitignore		.gitignore
CNAME		CNAME
Gemfile		Gemfile
Gemfile.lock		Gemfile.lock
README.md		README.md
_config.yml		_config.yml
favicon.png		favicon.png
index.md		index.md
people.md		people.md
projects.md		projects.md
publications.md		publications.md

Folders and files

Latest commit

History

Repository files navigation

AILab-RITEH Website

Table of Contents

Website Overview

Quick Start

Option 1: Edit on GitHub (Easiest)

Option 2: Edit Locally

Markdown/Jekyll/YAML Symbols and Tips

Editing Guide

1. Adding/Editing Team Members (people.md)

Available Sections:

Adding a New Team Member

Removing a Team Member

Updating Team Member Information

2. Adding/Editing Projects

Featured Projects

Regular Projects (List Format)

3. Adding/Editing Publications

Adding a Featured Publication

Updating Scholar Links

Adding Datasets

4. Editing the Homepage

Header/Hero Section

Featured Projects on Homepage

Main Content Sections

Contact Information

5. Adding Images

Preparing Images

Uploading Images

Using Images in Content

6. Editing Navigation Menu

Adding a Menu Item

Removing a Menu Item

7. Site Configuration

Basic Site Information

Site Author (appears in sidebar/footer)

Theme Skin

Local Development

Prerequisites

Setup

Making Changes Locally

Deployment

How it Works

File Organization

Writing Commit Messages

Troubleshooting

Quick Reference

File Purposes

Image Paths

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

1. Adding/Editing Team Members (`people.md`)

Packages