How to create a Portfolio Website with IO200 CMS

IO200 is a powerful CMS and website publishing system specifically crafted for photographers and artists. This tutorial describes step by step how to create a portfolio website with IO200 CMS. Before starting to create your own personal portfolio site, you need to install IO200 on your webspace.

IO200 CMS Admin Panel - Photos and Portfolio IO200 CMS Admin Panel - Add link

1. Create Albums and Upload Photos

First you need some content for your website. For a photo website this are, of course, photos and albums. Start by creating one or multiple albums in Portfolio by clicking on "New Collection". Now, it's time to upload your first photos by clicking on "New Photos". After uploading the photos, you can drag and drop them into your albums (drag a photo onto the albums name in the navigation). You can select multiple photos by clicking on a photo while pressing the command key (⌘), Strg, Shift or Alt (as in your OS explorer).

You have created some content (in this case photos) for your website. Please note, that none of your content (photos, albums, sets, articles, pages) is accessible for visitors until you have created a link that displays this content. We will create links in the following sections of this tutorial.

Hint: You can also automatically add photos to an album after uploading them. In this case you have to select an album in the portfolio navigation first, before clicking on "New Photos". A checkbox in the upload photos modal appears, allowing you to automatically add the new photos to this album after import.

2. Create a Start Page

A start page (i.e. front page) is the first page your visitors will see after opening your website. IO200 offers two special templates as start page: "Start Showcase" and "Start Landing". The former displays a random photo on your site while the latter displays a full-size landing page. In this tutorial we are going to use the Start Showcase template. Go to the Menu and click on the "New Link" button. Choose the "Start Showcase" template and select “show a single photo” as showcase style.

You want to add a personal message to the start page? Edit the link by clicking on the link, go to the "Custom HTML" tab and enter something like:
<h3>Welcome to my homepage</h3>
<p>Hi, I'm a freelance photographer based in ...</p>

Hint: Besides the two mentioned templates, you can choose any template as start page. How about displaying an album or a custom page? You can assign a link as default start page by editing the link and activating the checkbox “assign as front page”. If you don't want a link to appear in the navigation menu of your website, you can add the link in the hidden link section.

3. Create a Portfolio Page

The portfolio page is the heart of every photographer's website featuring his best work. Depending on the number of photos, you may want to show your photos in a single gallery or sorted in multiple albums. Add a new link and choose either the "Album" template (one gallery) or the "Set" template (multiple galleries). Choose an album or set (containing your albums) that should be displayed by the link (template). Furthermore, you can choose a layout (grid, masronry, wall, or mosaic) for your photo gallery. You can change the title of this link by editing the link or in "Expert Mode".

Next, you have to decide how the photos should be opened after a user clicks on them:

  1. open in lightbox
  2. open in lightbox with a link to a site displaying the photo
  3. directly open a site displaying the photo

In this tutorial we will go with the second option. Edit the new album/set link, and adapt the “Photo linking” setting in the Template Settings tab. You can also set this setting globally in Settings » Templates » General Settings. The photo site option requires a specific template. Therefore, you have to create a new link using the "Photo Access" template. This link makes all your published photos accessible via /{link-path}/{photo-slug}.

Hint: You can define the sorting of photos in an album (or sorting of albums in a set) by editing the album/set in Portfolio. Select the album/set in the navigation and change the sorting in the header bar.

4. Create an About You Page

The about you page tells your visitors more about yourself, your projects, your motivation, and your passion about photography. You can easily create a new page in Pages by clicking on "New Page". Enter a title and some text about yourself in the content editor. You can use headings to structure the text using the WYSIWYG editor. Images can be added via TAGS » Image. The raw HTML mode gives you more control for formatting the text.

As with all content in IO2000 CMS, the page is not accessible to visitors until you have created a link to this page. Go to the Menu and create a link with the "Page" template in order to publish the page.

5. Create an Imprint and Privacy Policy Page

In most countries you have to provide some legal information, when you are publishing a website that is publicly accessible. Go to the Pages section and create an imprint page and a privacy policy page. Again, you have to create two links in order to publish the pages. This time you want to add those links in the footer section of your website (secondary navigation).

Disclaimer: Please note, that we cannot give any legal advice. Please inform yourself about regulations and requirements for website publishers in your country.

6. Adapt Website Settings

All relevant website settings like website title, website date/time format, social media links, or image watermarks can be edited in the Settings section.

Congratulations, you have created your first portfolio website. Of course, IO200 offers much more features and templates for displaying content like nested sets and albums. Take some time to get familiar with the system and try out the numerous features.

« back to IO200 Blog