Automatic Installation

  1. Installation
    Download IO200 Installer and upload the installation file (install.php) to your webspace's website base directory (usually by using an FTP program). Start the installation script in your browser by opening the following URL in your browser: Follow the steps during the installation. After a successful installation your website is up and running and you can manage your website using the CMS. The CMS admin panel will be available at
  2. Getting started

Please read further installation instructions for NGINX, if you are running IO200 CMS on a NGINX webserver.

Manual Installation

  1. Download IO200
    Download IO200 Distribution.
  2. Check Server Requirements
    Most web hosting providers meet the following requirements. However, you should check them, if you are using a custom server. IO200 requires PHP 7.4 or higher with the following extensions: mbstring, pcre, zip, curl, mysqli, date, fileinfo, hash, json, gd, imagick (JPEG and WebP support). It also requires a working PHP mail configuration and a MySQL or MariaDB database. Make sure to check PHP file upload settings and if STRICT_TRANS_TABLES mode is disabled on your database. Furthermore, Apache mod_rewrite module (rule-based rewriting engine) must be activated. Please read further installation instructions for NGINX, if you are running IO200 on a NGINX instead of an Apache webserver. Finally, we strongly recommend activating HTTPS on your website using an SSL certificate.
  3. Create Database Tables
    Log in at your web hosting provider and create a new database. Excecute the SQL commands in "/storage/temp/cms_db_schema.sql" from the downloaded file ( on your database in order to create the CMS tables.
  4. Install Website and CMS
    Extract and upload all files and folders of to your webspace's website base directory. Edit the configuration file ("/storage/system/config.php") and fill in your database settings (CMS_DB_HOSTNAME, CMS_DB_USERNAME, CMS_DB_PASSWORD, and CMS_DB_DATABASE) and WEBSITE_URL (e.g. ""). Generate a random string with at least 32 characters for CMS_SECRETKEY and a random string with 16 characters for WEBSITE_SECRETKEY. Specify your email in the user file ("/storage/system/user.json").
    If you install the system in a subfolder (e.g., you have to replace "RewriteBase /" in /.htaccess with "RewriteBase /photos/". Furthermore, WEBSITE_URL in /storage/system/config.php must be specified as "" in our example.
  5. Get started
    Your installation is completed. The CMS admin panel is available at /admin (e.g. Before login in the first time you have to reset the password (» Forgot password?).

Koken Migration

Automatic Koken Migration

Before you start the migration process, we highly recommend to create a backup both of your database and your whole Koken installation on your webspace (including all photo files).

During the automatic installation of IO200 you can choose to automatically migrate your Koken data as well. Thereby, the installation script must be in the same directory as your Koken installation. Usually, this folder contains files and folders like "/admin", "/app", "/storage", "a.php", "api.php", "dl.php", "i.php", "index.php", and "preview.php". Contact our support, if there should be any problem during migration. A paid license is not required to start the migration, even if your Koken installation exceeds the limits of the free version. After the migration, you can call in order to check your photo files. Of course, you can also migrate your Koken data manually.

Please note that the automatic migration does not delete any Koken files/folders or database tables. However, all Koken files/folders are moved in a subfolder called "_koken". After a succesful installation and migration you can delete this folder and your old Koken database tables.

The automatic migration transfers all Koken assets except the website's navigation menu (website links). Therefore, you have to add new links to your new website to show content.

500 Internal Server Error

This error might occur due to .htacess redirections from the old Koken installation which may not immediatly be updated in your browser. Try to close/reopen your browser, resetting your browser cache, or opening your website in another browser. Your browser should update the redirections soon.

Photos are not loading after logging in your admin panel

In this case the nested collection structure might be corrupt. Log in at your database (usually by using phpMyAdmin) and excecute the following SQL query in order to reset the nested collection structure:
UPDATE `cms_collections` SET `level`=1;
UPDATE `cms_collections` SET `total_count`=0 WHERE `type`=2;
SET @i:=-1;
SET @j:=0;
UPDATE `cms_collections` SET `left_id`= @i:=(@i+2), `right_id`= @j:=(@j+2);

Manual Koken Migration

Before you start the migration process, we highly recommend to create a backup both of your database and your whole Koken installation on your webspace (including all photo files).

  1. Follow the installation instructions of IO200, in order to set up a running portfolio website with IO200.
  2. Migrate your database and photos:
    • Database Migration - You can migrate your Koken database tables by excecuting the SQL commands in "/storage/temp/cms_koken_migration.sql". Thereby, your database must contain all IO200 CMS tables and Koken tables. If you have used a new database for IO200 you have to import the Koken tables to this database. Furthermore, all IO200 CMS tables must be empty before starting the migration.
    • Photo Migration - Copy the Koken originals photo folder (in "/storage/originals/" of your Koken installation) to "/storage/originals/" of the IO200 installation.
  3. Run the FixOriginalPhotos Script ( in order to to automatically fix problems with your photo files (i.e. duplicate photos, filename restrictions, ...) and to detect missing photos.
  4. The automatic migration transfers all Koken assets except the website's navigation menu (website links). Therefore, you have to add some links to your new website to show content. New links can be created in the admin panel at "Menu » New Link".


The free license of IO200 has certain limitations regarding the maximum number of photos, articles, and pages. Furthermore, a free license displays a link to IO200 in the website footer.

After exceeding the limits of your free license (for example of your photos), you can still delete photos but you cannot upload any new photos or edit photos. Of course, your website will still work normally even after the limits are exceeded.

You can upgrade your free license anytime by purchasing a paid license in your admin panel (CMS » Administration » License). After that, your paid license will be automatically downloaded to "/storage/system/license.json".

Content Management System


The CMS admin panel will be available at The admin panel is divided into the following sections:

  • Photos - Upload and manage your photos. Create albums and sets for organizing your photos.
  • Articles - Write and publish articles and manage comments.
  • Pages - Create and edit pages.
  • Classification - Create categories and tags for classifying photos and articles.
  • Website Menu - Set up your website's navigation menu.
  • Website Settings - Adapt your website settings (website title, website theme, watermarks, password protection, ...).
  • Website Preview - Check your portfolio website.
  • Administration - Manage your account, license, and system updates.


  • Light/Dark Mode - Toogle between light and dark mode at any time by clicking on the sun symbol (light_mode) in the navigation.
  • Drag and Drop
    • Photos » Collections Sidebar: Order your sets and albums by dragging and dropping. Create nested collections by dragging a collection into another collection.
    • Photos » All: Delete photos by dragging the photo to the "delete dropzone" (appears at bottom after dragging).
    • Photos » All: Add photos to albums by dragging the photo and dropping it to an album in the sidebar navigation.
    • Photos » All/Album: Publish/Unpublish photos by dragging the photo to the "publish/unpublish dropzone" (appears at bottom after dragging).
    • Photos » Album: Remove photos from the album by dragging the photo to the "remove from album dropzone" (appears at bottom after dragging).
    • Photos » Album: Order your photos by dragging and dropping (only available, if album sort is manual).
    • Photos » Set: Order the sorting of all collections in the current set by dragging and dropping.
    • Photos » Upload/Reupload/Update: Choose image files by dragging and dropping them to the form.
    • Menu: Order your menu links by dragging and dropping.
    • WYSIWYG Editor » Gallery Tag: Order selected gallery photos by dragging and dropping.

    All drag and drop operations for photos are supported for multiple selected photos. Multiple photos can be selected by clicking on a photo while pressing the command key (⌘), CTRL, Shift or ALT (CTRL+CLICK/CTRL+⌘ adds/removes the photo to/from the selection, Shift+CLICK selects a range of photos beginning with the previous selected photo, and ALT+CLICK resets the selection to the current photo). Pressing the delete key, deletes the selected photo(s).

  • Tags - Add multiple tags at the same time by dividing them by comma (e.g. 'tag1,tag2,tag,...').
  • Photo Upload - Select an album before opening the upload modal. After that, you can choose to automatically add the new photos to this album.
  • Photo Edit - Save changes by pressing CTRL+S. Move to previous/next photo using arrow keys.
  • Article Edit - Save changes by pressing CTRL+S.
  • Photos - Search photos by different attributes by selecting the corresponding sort attribute. Filter photos by year, featured, unpublished, and unlisted. Photos that are not assigned to any album are unlisted.


  • Collections (nested Albums and Sets)*
    Title, slug, summary, description, featured, published, sorting
  • Tags and Categories
    Title, slug, caption
  • Photos
    Filename, slug, title, caption, featured, published, aspect ratio, filesize, EXIF & IPTC data, albums, tags, category
  • Articles
    Title, slug, content, excerpt, featured, featured photo/custom image, published, published on, tags, category
  • Comments
    Name, website, content, related article
  • Links (Menu)
    Title, path, template, reference asset, section, custom settings, custom HTML/CSS
  • Pages
    Title, slug, content, meta description, meta keywords

*Albums are collections containing photos, whereas Sets are collections containing albums or sets itself.

Bulk Photo Upload/Update (Uploading/Updating multiple photos)

You can automatically upload/update multiple photos and import/update IPTC data like title, caption and tags. Multiple photos can be uploaded/updated as follows:

Upload multiple photos

  1. Open your CMS, go to Photos, and click on the button "+ New Photos".
  2. Choose one or multiple photo files.
  3. Select actions for the bulk upload:
    • [x] import IPTC data,
    • [x] assign new filenames, if already taken*,
    • [x] add to current album after import (only available, if you have selected an album before opening the upload modal).
  4. Click on the button "Upload Photos". During the bulk upload a progress bar informs you about the status of the ongoing process.

*New photos whose filenames already exist in the system will not be uploaded except you choose the "assign new filenames" option. This prevents (accidental) overwriting of existing photos. The files will be renamed as follows: new.jpg to new-2.jpg, if the filename new.jpg is already taken; new.jpg to new-3.jpg, if the filenames new.jpg and new-2.jpg are already taken, etc.

Update multiple photos

  1. Open your CMS, go to Photos, click on the button "+ New Photos", and then on "Update Photos".
  2. Choose one or multiple photo files. Photos are automatically matched by their filename. You will be informed which photo file corresponds to which photo in your portfolio. Furthermore, you can check the IPTC data of each photo file.
  3. Select actions for the bulk update:
    • [x] reupload photo files and update EXIF data,
    • [x] update photo title and caption from IPTC data,
    • [x] update photo tags from IPTC data.
  4. Click on the button "Update Photos". During the bulk update a progress bar informs you about the status of the ongoing process.

Hint: Most image editing programs allow to save IPTC metadata to files (e.g. Adobe Lightroom: Select one or more photos in the Grid view of the Library module and choose Metadata > Save Metadata To File(s), or press Ctrl+S (Windows) or Command+S (Mac OS). Make sure that metadata is kept when exporting.).

FTP Folder Synchronization

You can automatically synchronize photos (including IPTC title, caption, and tags), collections, and album photo relations from the FTP synchronization folder into your CMS.

  1. Upload photo files, folders, and subfolders to the FTP synchronization folder ("/storage/sync").
  2. Open your CMS, go to Photos, and click on the button "Sync".
  3. Select actions for synchronization:
    • [x] import new photos (x),
    • [x] update existing photos (x),
    • [x] update photo tag relations (x),
    • [x] delete missing photos (x),
    • [x] update (nested) collection structure (+x collections, -x collections),
    • [x] update album photo relations (x albums).
  4. Click on the button "Start Synchronization".

Synchronization Information:

  • The synchronization transfers photos, collections, and album photo relations from the FTP synchronization folder ("/storage/sync") to the CMS (not vice versa).
  • FTP folders can contain subfolders to represent a nested collection structure. There is no limit for depth of subfolders.
  • The same photo file may exist multiple times in "/storage/sync", if it should be added to multiple albums.
  • Photos are matched by filename. Collections are matched by folder name and collection slug.
  • File names (photos) and folder names (collections) are sanitized within the system (e.g. "blaue Häuser.jpg" => "blaue-haeuser.jpg"). Sanitized characters include "[a-z]", "[0-9]" and "-". Collection slugs are composed by their folder path (e.g. "/storage/sync/Set 1/Subset 1b/Album 1" => "set1-subset1b-album1", "/storage/sync/Folder 1/Ä-2" => "folder1-ae2").
  • The (nested) FTP folder structure is stored within a top set named "Sync Collection" with slug "sync-collection". Therefore, all other (local) sets and albums in the CMS that are not included in this set are not affected by the synchronization (except album photo relation updates).

Hint: Most image editing programs allow to save IPTC metadata to files (e.g. Adobe Lightroom: Select one or more photos in the Grid view of the Library module and choose Metadata > Save Metadata To File(s), or press Ctrl+S (Windows) or Command+S (Mac OS). Make sure that metadata is kept when exporting.).

Classification (tagging and categorizing photos and articles)

You can classify each photo and article using tags and categories. The classification is possible after opening the respective edit modal of the asset. A photo/article can have only one category, but multiple tags. Multiple tags can be added at once by seperating them with a comma (i.e. "tag1,tag2,tag3"). You can remove a tag by directly clicking on it. Categories can only be assigned, if they already have been created in CMS » Classification before.

All tags and categories can be managed in CMS » Classification, where you can add, edit and delete them. If you delete a tag or category, all relations to photos/articles are deleted automatically as well. The total number of current relations to photos/articles is shown directly after each tag/category (i.e. "#tag1 (6)" has 6 relations).


Write articles and design pages using the full featured WYSIWYG-Editor. You can either work in full WYSIWYG mode or in raw HTML mode (code). You can switch between both modes at any time during editing. Certain HTML elements like tables cannot be created in WYSIWYG mode, but in raw HTML mode. However, all HTML elements can be edited in WYSIWYG mode. Furthermore, you can toggle between fullscreen mode and light/dark mode (light_mode) at any time.
TAGS are a convienient way for inserting media such as images, photos from your portfolio, or galleries consisting of your portfolio photos. TAGS can be edited by clicking into the tag's text and then by clicking on the edit icon (edit) in the editor navigation.

Password Reset

If you have forgotten your password for the admin panel, you can reset it by visiting After submiting the form, you will receive an email with a link to change your passwort. Please check your email spam folder, if you have not received a password reset mail. The form does not inform you whether the email is correct or not, in order to avoid exposing your login (e.g. email address).

You can manually check or adapt the email in the system user file (/storage/system/user.json). Please note, that you cannot adapt your password in this file, since it is encrypted.

System Updates

Your current installed IO200 version is displayed in CMS » Administration » Info. A button for automatically updating your system is shown, if a new version is available.

Browser Support

If you see a blank white page after logging in, you are probably using an old browser (like Internet Explorer 11) that is not supported anymore due to security reasons.

We recommend using the latest version of Chrome, Edge, Firefox, or Safari.

Portfolio Website

Website Navigation Menu (Links)

Please note, that none of your assets (photos, sets, albums, pages, articles, etc.) is available for visitors of your website until you grant access to them using links. Hence, a link can also be interpreted as a resource that displays certain content. For example, no one can see a specific album until you have either (i) created a link pointing directly to that album, or (ii) created a link pointing to the set containing this album, or (iii) created a link offering access to all your albums via their slug.
The website navigation menu can be edited at CMS » Menu. New links can be created by clicking on the "New Link" button and links can be deleted in the edit link modal. You can order your links by dragging and dropping them.

Creating a new Link- Standard

You just have to choose the section (primary navigation, secondary navigation, or hidden link) and the template of the link. Depending on the template you may have to provide more information (e.g. you have to choose an album, if you have selected the album template). Hidden links are neither shown on your website header navigation (primary) nor on your website footer navigation (secondary), but are still accessible for visitors.

Creating a new Link - Expert

  • Section - First you have to decide, if you want to create a link for your primary navigation (usually in the header of your website), your secondary navigation (usually in the footer of your website), or a hidden link. A hidden link grants access to the resource, but the link is not shown in the navigation (templates "Photo Access", "Article Access", and "Album Access" are always hidden links).
  • Template - The template defines which asset type (photos, sets, albums, pages, articles, etc.) the link should display. A template may offer one or multiple URLs for the related assets. The table below provides an overview of all templates. You can also display a raw link or text, if no template is choosen (none). However, links without a template do not offer access to resources. For example a link [template="Album", path="/album-album1"] offers access to Album1, whereas a link [template="(none)", path="/album-album1"] is just a link pointing to that path.
  • Title - The title of the link.
  • URL/Path - The relative URL/path of your link ({LINK_URL}, {LINK_PATH}). Links without a template (none) can also have absolute URLs or no URL at all.
  • Configuration - Sub links are displayed below their previous non sub link (in most templates as dropdown menu). Certain links like Sets allow you to automatically show sublinks for nested albums and sets. Furthermore, one of your links can be defined as the front page (default page) for visitors. If no front page is defined, it will be the first link in your primary navigation.
  • Template Settings - Most templates offer settings for this resource. For example you can select a gallery layout (grid, masonry, wall, or mosaic) for each Album and Set link or the blog style (modern, visual, grid, or classic) for the blog link.
  • Custom CSS/HTML - All template links offer the possibility to specify custom HTML and CSS that will be injected to this resource.

Overview of Templates

Usually photos are opened in a lightbox when visitors click on them. However, your photos can also be linked to a a certain photo page instead opened in lightbox. You can change this behaviour by adding a Photo Access link/resource and changing the "Photo linking" template setting.

Template Settings

Depending on the choosen link template, different settings are available for customizing the link/ressource. You can edit the template settings by editing a link (click on a link in CMS » Menu) and then by clicking on the "Template Settings" tab. If you do not provide any tempalte settings, the default values of the theme are used. Some selected settings are described below:

  • Gallery Layout for Albums/Sets
    • Layout: grid, masonry, wall, or mosaic
    • Number columns: 1 to 5
    • Title/Summary: show/hide
    • Pagination: number of photos per page

  • Blog
    • Style: modern, visual, grid, or classic
    • Comments: activated/deactivated
    • Pagination: number of articles per page

  • Photo Showcase
    • Showcase Style: show a single photo or show last and random photos
    • Photo Source: optionaly provide an album source where photos are randomly drawn from
  • Photo Linking
    • Link to photo site*
    • Open in lightbox
    • Open in lightbox with link to photo site*

    *Linking to a photo site is only working, when you create a link with the "Photo Access" template in CMS » Menu. This link is a resource offering access to all your published photos with the following URL: "/{LINK_PATH}/{photo_slug}" (e.g. "").

  • ...

Website Theme

You can change the website theme in CMS » Website Settings. Just select another theme and click on the button "Change Theme". Furthermore, you can add custom CSS and custom HTML that is injected into each site.

Hint: You can preview a theme by adding ?theme={themename} to the URL of any page of your website. For example previews the "classic" theme and previews the "minimal" theme for a website using the aspect theme.

Website Settings

All relevant website settings like "Website Title", "Website Email", "Website Meta Description", and "Website Favicon"can be edited in CMS » Website Settings » Website Publishing and in CMS » Website Settings » Favicon.

URL Password Protection

You can password protect URLs of your website in CMS » Website Settings » Path Protection (for example to protect a certain photo gallery for your clients). Protected URLs are either recognized by a given string (i.e. "/set") or a regex pattern (i.e. "/^\\/(set|blog)(\\/.+)?$/i"). A string ending with "*" indicates that all sub paths are protected as well (i.e. "/set*" protects "/set" and "/set/album1"). The string "*" protects your entire website. URLs can be protected multiple times using different passwords.

Photo Download Protection

You can activate the download protection in CMS » Website Settings » Download Protection.

You can further protect your photos by forbidding offsite linking in your .htaccess file. Add the following lines in the images section of your .htaccess file to forbid offsite linking:
# cache image or serve image: forbid offsite linking (optional)
RewriteCond %{REQUEST_FILENAME} ^/storage/cache/(.+)\.(jpg|jpeg|pjpeg|jfif|pjp|png|webp)$ [OR]
RewriteCond %{REQUEST_URI} ^/serve.php$
RewriteCond %{HTTP_HOST}@@%{HTTP_REFERER} !^([^@]*)@@https?:\/\/\1\/.*
RewriteRule ^(.*) error404 [NC,F]

Image Watermarks

You can set a watermark for your photos in CMS » Website Settings » Image Publishing. The uploaded (transparent) png watermark file will be applied to all published photos that exceed a specified size. You can also customize the watermark position, size (absolute in px or relative in %), and opacity.
Please reset the website cache (CMS » Website Settings » Website Cache) and your browser cache after changing the watermark settings.


You can set custom CSS/HTML globally in CMS » Website Settings » Custom CSS/HTML. Additionally, custom CSS/HTML can be set locally for a particular link by editing the link.

Custom CSS for adapting the font size

body {font-size:14.5px;} /* whole site */
header {}, main {}, footer {} /* targets header, site content, and footer instead of whole site */

Custom CSS for adapting the font family

body, header span.title {font-family:courier;}

Custom CSS for adapting the website title color

header span.title a{color:#246dff;}

Custom CSS for adapting the navigation font

nav ul li a, nav ul li span{font-size:0.8em;font-weight:300;text-transform:uppercase;letter-spacing:0.1em;}
header nav ul, footer nav ul {}

Custom CSS for aligning photos on top/bottom in grid layout {align-items:self-start;} /* center, self-start, self-end */

Custom CSS for a lightbox with white background

#glightbox-slider .gslide-media img{box-shadow:none;}
#glightbox-slider .gslide-description {background:#fff;}
#glightbox-slider .gslide-title{color:#464646;}
#glightbox-slider .gslide-desc{color:#9d9d9d;}


Frequently Asked Questions

Photo thumbnails are not shown at my website

Each time a thumbnail is displayed for the first time on your website, it must be generated. Your server may not be fast enough to generate all photos at once when a site (e.g. album) with many new photos is displayed the first time. Normally, the remaining photos are generated after reloading the site. Subsequent visitors will not be affected by this issue because thumbnails need to be generated only once.

Running IO200 CMS on NGINX

While most web servers are running on Apache, NGINX is becoming an increasingly popular option for web hosting. Unlike Apache, the handling of access rules is different for NGINX. Therefore, all relevant .htaccess rules of the IO200 installation (/.htaccess) must be converted to NGINX directives (NGINX configuration file). Rules for Cache-Control, HTTP:Authorization, and optionally marked rules are not mandatory for running IO200. Several converters and numerous tutorials for converting .htaccess rules to NGINX directives are available online.

Website Statistics

Most website analytics like Google Analytics or Matomo can simply be included by adding a small HTML/Javascript snippet to your website. You can do this in CMS » Website Settings » Custom CSS/HTML.

Website Language

All installations contain a language file ("/storage/system/lang.php") allowing you to adapt the language of your website. The default shipped language file is english. You can customize the file according to your requirements or download anther language file and replace it on your webspace ("/storage/system/lang.php").
So far, the following translations are available as download: English, German

Multilingual Website

The themes and templates are unilingual. However, it is possible to support multiple languages with minor adjustments in the theme/templates. Please contact us, if you need support for a multilingual portfolio website.

Custom Theme

The look of themes is completely determined by their stylesheet files. Therefore, you can create a new theme by creating a new stylesheet:

1. Create a new stylesheet and insert the content in the custom stylesheet ("/res/style/custom.css") of your website. If you want to make major adaptions of an existing theme, we recommend to copy and paste the content of the theme's stylesheet to the new stylesheet file. Otherwise, you can create a new stylesheet from scratch.
2. Activate the stylesheet in your admin panel at CMS » Website Settings » Website Theme.

Hint: Minor adaptions of an existing theme can be done by adding new styles or overwriting styles of your current theme in your admin panel at CMS » Website Settings » Custom CSS/HTML.

Custom Templates

1. Create a new template php file and move it in your frontend templates folder (e.g. "/templates/newtemplate.php"). You can create new templates from scratch or by adapting existing templates.
2. Log in at IO200 CMS and go to CMS » Menu. Click on the button "New Link" to create a new link and choose "Expert Mode". Select "custom template" as template and enter your template name (in this case "newtemplate"). The (custom) link's template name ("newtemplate") directly corresponds to the loaded template file ("/templates/newtemplate.php"). Furthermore, you can provide an asset (collection, set, album, or page) which will be available in your template php file as reference_type and reference_id. For example you could pass the id of a set or an album if your template should display a certain set/album.

Move installation

Move installation from http to https

Edit the config file ("/storage/system/config.php") and adapt the WEBSITE_URL setting. Replace "http://" with "https://" (e.g. "" with "").

Move installation to another directory/domain

Let's assume you have installed the system in your webspace's website base directory and your website is available at "". You want to move the system to a subfolder called "/sub":

  1. Create the subfolder "/sub" on your webspace and move all system files and folders into this subfolder (usually by using an FTP program).
  2. Edit the .htaccess file and replace "RewriteBase /" with "RewriteBase /sub/".
    Edit the config file ("/storage/system/config.php") and adapt the WEBSITE_URL setting. Replace "" with "".