Tokyo Theme Portfolio Configuration

The portfolio section is one of the most important features of the Tokyo theme. This guide explains how to configure and customize your portfolio to showcase your work effectively.

Portfolio Data File

All portfolio items are managed in _data/portfolio.yml. This YAML file contains information about each project you want to display.

Basic Portfolio Structure

Each portfolio item in _data/portfolio.yml has the following structure:

- name: Project Name
  img_src: /path/to/thumbnail.jpg
  project_url: https://project-url.com
  filter_classes: 'category'
  cat: Display Category Name

Portfolio Item Properties

name: The title of your project
img_src: Path to the thumbnail image
project_url: Link to the full project (video URL, image path, or website)
filter_classes: Category for filtering (used by JavaScript)
cat: Display name for the category

Supported Media Types

The Tokyo theme supports multiple media types for portfolio items:

1. Vimeo Videos

Display Vimeo videos in a popup:

- name: Project Title
  img_src: /assets/img/portfolio/1.jpg
  project_url: https://vimeo.com/312334044
  filter_classes: 'vimeo'
  cat: Vimeo

Requirements:

Use the full Vimeo URL
filter_classes must be ‘vimeo’
Thumbnail image is required

2. YouTube Videos

Display YouTube videos in a popup:

- name: Project Title
  img_src: /assets/img/portfolio/2.jpg
  project_url: https://www.youtube.com/watch?v=Amq-qlqbjYA
  filter_classes: 'youtube'
  cat: YouTube

Requirements:

Use the full YouTube watch URL
filter_classes must be ‘youtube’
Thumbnail image is required

3. SoundCloud Audio

Display SoundCloud audio tracks:

- name: Project Title
  img_src: /assets/img/portfolio/3.jpg
  project_url: https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/252739311&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true
  filter_classes: 'soundcloud'
  cat: SoundCloud

Requirements:

Use the SoundCloud embed URL
filter_classes must be ‘soundcloud’
Thumbnail image is required

Getting SoundCloud Embed URL:

Go to your track on SoundCloud
Click “Share” → “Embed”
Copy the URL from the embed code
URL encode special characters if needed

4. Images

Display full-size images in a lightbox:

- name: Project Title
  img_src: /assets/img/portfolio/4.jpg
  project_url: /assets/img/portfolio/4-full.jpg
  filter_classes: 'image'
  cat: Image

Requirements:

filter_classes must be ‘image’
project_url can be the same as img_src or a larger version
Supports JPG, PNG, WebP formats

5. External Websites

Link to external websites:

- name: Project Title
  img_src: /assets/img/portfolio/5.jpg
  project_url: https://example-project.com
  filter_classes: 'image'
  cat: Website

Note: External websites will open in a new tab/window.

Adding Portfolio Items

Step 1: Prepare Your Images

Create thumbnail images:
- Recommended size: 600x400px or similar aspect ratio
- Format: JPG, PNG, or WebP
- Optimize for web (compress before uploading)

Place images in the correct folder:

assets/img/portfolio/
├── 1.jpg
├── 2.jpg
├── 3.jpg
└── 4.jpg

Step 2: Add Portfolio Item to YAML

Open _data/portfolio.yml and add your item:

- name: My Awesome Project
  img_src: /assets/img/portfolio/my-project.jpg
  project_url: https://myproject.com
  filter_classes: 'image'
  cat: Web Design

Step 3: Save and Test

Save the file
Refresh your browser
Navigate to the portfolio section
Verify the item appears correctly

Portfolio Filtering

The portfolio includes a filtering system that allows visitors to filter items by category.

Default Filter Categories

The theme includes these default filters:

All
Vimeo
YouTube
SoundCloud
Image

Customizing Filters

To add custom filter categories:

Add filter button in _includes/right-parts/tk-portfolio.html:

<div class="portfolio_filter">
    <ul>
        <li><a href="#" class="current" data-filter="*">All</a></li>
        <li><a href="#" data-filter=".web-design">Web Design</a></li>
        <li><a href="#" data-filter=".branding">Branding</a></li>
        <li><a href="#" data-filter=".photography">Photography</a></li>
        <li><a href="#" data-filter=".video">Video</a></li>
    </ul>
</div>

Update portfolio items with new categories:

- name: Website Project
  img_src: /assets/img/portfolio/web.jpg
  project_url: https://example.com
  filter_classes: 'web-design'
  cat: Web Design

- name: Brand Identity
  img_src: /assets/img/portfolio/branding.jpg
  project_url: /assets/img/portfolio/branding-full.jpg
  filter_classes: 'branding'
  cat: Branding

Filter Class Rules

Use lowercase with hyphens: web-design, branding, photography
No spaces or special characters
Must match the data-filter attribute in the filter button
Can use multiple classes: filter_classes: 'web-design responsive'

Portfolio Title Configuration

The portfolio section title is configured in _data/site_data.yml:

portfolio:
  title: Creative Portfolio

To change the title:

portfolio:
  title: My Portfolio

Portfolio Layout Customization

Changing Grid Columns

The portfolio uses a responsive grid. To modify the number of columns:

In assets/css/style.css:

/* Desktop - 3 columns */
.portfolio_list li {
    width: 33.33%;
}

/* Tablet - 2 columns */
@media (max-width: 1024px) {
    .portfolio_list li {
        width: 50%;
    }
}

/* Mobile - 1 column */
@media (max-width: 768px) {
    .portfolio_list li {
        width: 100%;
    }
}

Changing Grid Gaps

.portfolio_list {
    display: grid;
    gap: 30px; /* Adjust spacing between items */
}

Hover Effects

Customize portfolio item hover effects:

.portfolio_list li .inner .entry:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

Portfolio Item Examples

Example 1: Web Design Portfolio

- name: E-Commerce Platform
  img_src: /assets/img/portfolio/ecommerce.jpg
  project_url: https://myshop.com
  filter_classes: 'web-design'
  cat: Web Design

- name: Corporate Website
  img_src: /assets/img/portfolio/corporate.jpg
  project_url: https://corporate-site.com
  filter_classes: 'web-design'
  cat: Web Design

- name: Landing Page
  img_src: /assets/img/portfolio/landing.jpg
  project_url: /assets/img/portfolio/landing-full.jpg
  filter_classes: 'web-design'
  cat: Web Design

Example 2: Photography Portfolio

- name: Wedding Photography
  img_src: /assets/img/portfolio/wedding.jpg
  project_url: /assets/img/portfolio/wedding-full.jpg
  filter_classes: 'photography'
  cat: Photography

- name: Portrait Session
  img_src: /assets/img/portfolio/portrait.jpg
  project_url: /assets/img/portfolio/portrait-full.jpg
  filter_classes: 'photography'
  cat: Photography

- name: Landscape Shot
  img_src: /assets/img/portfolio/landscape.jpg
  project_url: /assets/img/portfolio/landscape-full.jpg
  filter_classes: 'photography'
  cat: Photography

Example 3: Video Portfolio

- name: Brand Video
  img_src: /assets/img/portfolio/brand-video.jpg
  project_url: https://vimeo.com/123456789
  filter_classes: 'vimeo'
  cat: Video

- name: Product Demo
  img_src: /assets/img/portfolio/demo.jpg
  project_url: https://www.youtube.com/watch?v=dQw4w9WgXcQ
  filter_classes: 'youtube'
  cat: Video

Example 4: Mixed Media Portfolio

- name: Website Redesign
  img_src: /assets/img/portfolio/redesign.jpg
  project_url: https://redesigned-site.com
  filter_classes: 'web-design'
  cat: Web Design

- name: Brand Video
  img_src: /assets/img/portfolio/video.jpg
  project_url: https://vimeo.com/987654321
  filter_classes: 'video'
  cat: Video

- name: Product Photography
  img_src: /assets/img/portfolio/product.jpg
  project_url: /assets/img/portfolio/product-full.jpg
  filter_classes: 'photography'
  cat: Photography

- name: Audio Project
  img_src: /assets/img/portfolio/audio.jpg
  project_url: https://w.soundcloud.com/player/?url=TRACK_URL
  filter_classes: 'soundcloud'
  cat: Audio

Organizing Portfolio Items

Sorting by Category

Group similar projects together:

# Web Design Projects
- name: Project 1
  filter_classes: 'web-design'
  cat: Web Design
- name: Project 2
  filter_classes: 'web-design'
  cat: Web Design

# Photography Projects
- name: Photo 1
  filter_classes: 'photography'
  cat: Photography
- name: Photo 2
  filter_classes: 'photography'
  cat: Photography

Using Multiple Categories

Assign items to multiple categories:

- name: Responsive Website
  img_src: /assets/img/portfolio/responsive.jpg
  project_url: https://responsive-site.com
  filter_classes: 'web-design responsive'
  cat: Web Design

This item will appear in both “Web Design” and “Responsive” filters.

Best Practices

Use high-quality images: Ensure thumbnails are clear and professional
Optimize image size: Compress images for faster loading
Consistent naming: Use descriptive, consistent names for projects
Relevant categories: Choose categories that make sense for your work
Test all links: Verify all project URLs work correctly
Mobile-friendly: Test portfolio on mobile devices
Regular updates: Add new projects regularly to keep portfolio fresh
Backup data: Keep a backup of _data/portfolio.yml

Troubleshooting

Portfolio items not displaying

Solution:

Check YAML syntax in _data/portfolio.yml
Verify image paths are correct
Ensure images exist in the specified folders
Check for typos in field names

Filtering not working

Solution:

Verify filter_classes values match filter buttons
Check JavaScript is loading properly
Ensure jQuery is included
Test in different browsers

Videos not playing

Solution:

Verify video URLs are correct
Check if videos are public/accessible
Test URLs directly in browser
Ensure proper embed URLs are used

Images not loading

Solution:

Check image paths are correct
Verify images exist in assets/img/portfolio/
Check file permissions
Ensure image formats are supported

Solution:

Check if Magnific Popup library is loaded
Verify JavaScript files are included
Check browser console for errors
Ensure no JavaScript conflicts

Advanced Customization

Adding Custom Metadata

Add custom fields to portfolio items:

- name: Project Name
  img_src: /assets/img/portfolio/project.jpg
  project_url: https://project.com
  filter_classes: 'web-design'
  cat: Web Design
  client: Client Name
  year: 2026
  tools: [React, Node.js, MongoDB]
  description: Brief project description

Then modify the portfolio template to display this metadata.

Lazy Loading Images

Implement lazy loading for better performance:

<img src="" 
     alt="" 
     loading="lazy" />

Add captions to image lightboxes:

<a class="zoom" 
   href=""
   title="">
    <img src="" alt="" />
</a>

The Tokyo theme’s portfolio system is flexible and powerful. Experiment with different configurations to create a portfolio that perfectly showcases your work.

Search Documentation

Tokyo Theme Portfolio Configuration

Table of Contents

Portfolio Data File

Basic Portfolio Structure

Portfolio Item Properties

Supported Media Types

1. Vimeo Videos

2. YouTube Videos

3. SoundCloud Audio

4. Images

5. External Websites

Adding Portfolio Items

Step 1: Prepare Your Images

Step 2: Add Portfolio Item to YAML

Step 3: Save and Test

Portfolio Filtering

Default Filter Categories

Customizing Filters

Filter Class Rules

Portfolio Title Configuration

Portfolio Layout Customization

Changing Grid Columns

Changing Grid Gaps

Hover Effects

Portfolio Item Examples

Example 1: Web Design Portfolio

Example 2: Photography Portfolio

Example 3: Video Portfolio

Example 4: Mixed Media Portfolio

Organizing Portfolio Items

Sorting by Category

Using Multiple Categories

Best Practices

Troubleshooting

Portfolio items not displaying

Filtering not working

Videos not playing

Images not loading

Popup not working

Advanced Customization

Adding Custom Metadata

Lazy Loading Images

Adding Lightbox Captions