Installation

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: www.yourwebsite.com/install.php. 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 www.yourwebsite.com/admin.
  2. Getting started

Manual Installation

  1. Download
    Download IO200 Distribution.
  2. 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 (dist.zip) on your database in order to create the CMS tables.
  3. Website and CMS Installation
    Extract and upload all files and folders of dist.zip 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. 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. www.yourwebsite.com/photos/), you have to replace "RewriteBase /" in /.htaccess with "RewriteBase /photos/". Furthermore, WEBSITE_URL in /storage/system/config.php must be specified as "https://www.yourwebsite.com/photos" in our example.
  4. Finishing
    Your installation is completed. The CMS admin panel is available at /admin (e.g. www.yourwebsite.com/admin). 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 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. After the migration, you can call www.yoursite.com/listener/FixOriginalPhotos.php in order to check your photo files.

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.

Troubleshooting
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.

Portfolio is not loading or showing any photos after logging in your CMS

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. Please follow the installation instructions, 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 (www.yoursite.com/listener/FixOriginalPhotos.php) 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".

Licensing

The free license of IO200 has certain limitations with respect to 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 edit and delete your photos but you cannot upload any new photos. Of course, your website will still function normaly after exceeding the limitations.

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

Overview

The CMS admin panel will be available at www.yourwebsite.com/admin. The admin panel is divided into the following sections:

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

Tipps

  • 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
    • Portfolio » Collections Sidebar: Order your sets and albums by dragging and dropping. Create nested collections by dragging a collection into another collection.
    • Portfolio » All: Delete photos by dragging the photo to the "delete dropzone" (appears at bottom after dragging).
    • Portfolio » All: Add photos to albums by dragging the photo and dropping it to an album in the sidebar navigation.
    • Portfolio» All/Album: Publish/Unpublish photos by dragging the photo to the "publish/unpublish dropzone" (appears at bottom after dragging).
    • Portfolio » Album: Remove photos from the album by dragging the photo to the "remove from album dropzone" (appears at bottom after dragging).
    • Portfolio » Album: Order your photos by dragging and dropping (only available, if album sort is manual).
    • Portfolio » Set: Order the sorting of all collections in the current set by dragging and dropping.
    • Portfolio » 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 (⌘), Strg, Shift or Alt (Strg+Click/Str+⌘ 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).

  • 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.

Assets

  • 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.

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).

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

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

  1. Got to Portfolio and 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 the actions for the bulk update: [x] reupload photo files, [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 like Adobe Lightroom allow to save IPTC metadata during export.

WYSIWYG Editor

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. 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.

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. "www.yoursite.com/photo/venice-sunset").

  • ...

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 www.portfolio-site-aspect-theme.io200.com/forests?theme=classic previews the "classic" theme and www.portfolio-site-aspect-theme.io200.com/forests?theme=minimal 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.


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.

Custom CSS/HTML

You can set custom CSS/HTML in CMS » Website Settings » Custom CSS/HTML.


Custom CSS example 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;}

Custom CSS example for a lightbox with white background:
.gcontainer{background:#fff;}
#glightbox-slider .gslide-media{box-shadow:none;}
#glightbox-slider .gslide-title{color:#000;}

Further

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 theme. 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.

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 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 "https://www.yourwebsite.com". 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 "https://www.yourwebsite.com" with "https://www.yourwebsite.com/sub".
Top