Documentation

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
   
   • Take the tour for an overview of the CMS and have a look at our tips for using IO200 CMS. Our tutorial guides you through the steps of creating a portfolio website with IO200 CMS.
   • Upload photos and create content (albums, sets, articles, pages, ...) for your website using the CMS. Create your website's navigation menu (CMS » Menu) to show content on your website.

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, mysqli, date, fileinfo, hash, json, gd, imagick (JPEG and optional WebP support). It also requires a working PHP mail configuration and a MySQL or MariaDB database. Make sure to check for valid 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. Execute 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.
4. Install Website and CMS
   Extract and upload all files and folders of dist.zip to your webspace's website base directory (file permissions: chmod 755 for folders and chmod 644 for files).
   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. "https://www.yourwebsite.com"). Generate a random string with at least 32 characters for CMS_SECRETKEY and a random string with exactly 16 characters for WEBSITE_SECRETKEY.
   Specify your email in the user file ("/storage/system/user.json"). If your server does not support WebP, you have to create a sitesettings.json file in "/storage/system/" with the following content: {"WEBSITE_TITLE":"New Website","WEBSITE_CACHE_THUMBS":{"mimetype":"image\/jpeg","sizes":[48,192,624,912,1296,1680,2016,2832],"quality":75}}
   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.
5. Get started
   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 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 www.yoursite.com/listener/FixOriginalPhotos.php 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.

Troubleshooting

500 Internal Server Error

This error might occur due to .htaccess redirections from the old Koken installation which may not immediately 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 (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 regarding the maximum number of photos and articles. 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 your storage folder ("/storage/system/license.json").

Content Management System

Overview

Admin Panel

The CMS admin panel will be available at www.yourwebsite.com/admin. 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.
• Menu - Set up your website's navigation menu.
• 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.

Tips

• Light/Dark Mode - Toggle between light and dark mode at any time by clicking on the sun symbol (light_mode) in the navigation.
• Photos
  • Select multiple photos for bulk or drag and drop actions by clicking on a photo while pressing the command key (⌘), CTRL, Shift or ALT (⌥):
    • CTRL+Click (⌘+Click) adds/removes the photo to/from the selection,
    • Shift+Click selects a range of photos beginning with the previous selected photo,
    • ALT+Click resets the selection to the current photo.
    Pressing the delete key, deletes the selected photo(s).
  • Search photos by different attributes by selecting the corresponding sort attribute. Filter photos by tags, year, featured, unpublished, and unlisted. Photos that are not assigned to any album are unlisted.
  • Photo Upload: Select an album before opening the upload modal. After that, you can choose to automatically add the new photos to this album.
• Drag and Drop
  • Photos » Collections Navigation: Organize your collections (sets and albums) by dragging and dropping them onto other sets in the collections navigation. Create nested collections by dragging a collection into another collection.
  • Photos » All: Delete photos by dragging and dropping them to the "delete dropzone" (appears at bottom after dragging).
  • Photos » All: Add photos to albums by dragging and dropping them onto an album in the collections navigation. Photos can be added to multiple albums.
  • Photos » Album: Remove photos from the album by dragging and dropping them 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. Drag links into other sections.
  • WYSIWYG Editor » Gallery media tag: Order selected gallery photos by dragging and dropping.

  All drag and drop operations for photos are supported for multiple selected photos.

• Photo Edit - Save changes by pressing CTRL+S. Move to previous/next photo using arrow keys.
• Article Edit - Save changes by pressing CTRL+S.

Photo Publishing Workflow

Most photographers have a certain workflow for editing their photos. With IO200, you can easily extend this workflow to publish photos on your portfolio website. Photos can be uploaded directly into the CMS, either via Bulk Photo Upload/Update or alternatively via FTP Folder Synchronization. With either option, you can also update your photos later.

Publishing photos using Bulk Photo Upload/Update

1. Select and edit your photos in your favorite image organization and image processing software (e.g. Adobe Lightroom).
2. Export photos to a folder on your PC.
3. Upload these photos directly into the CMS using Bulk Photo Upload/Update.

Publishing photos using FTP Folder Synchronization Workflow

1. Select and edit your photos in your favorite image organization and image processing software (e.g. Adobe Lightroom).
2. Export photos to the FTP synchronization folder of your IO200 installation ("/storage/sync" on your webspace). Some image organization and image processing software like Adobe Lightroom offer plugins to directly export photos and albums (folders) to an FTP server. Otherwise, you can first export photos to a folder on your PC, and then upload them to the FTP synchronization folder.
3. Import these photos directly into the CMS using FTP Folder Synchronization. Thereby, albums are automatically created for subfolders.

Assets

The following assets can be managed using the content management system:

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

WYSIWYG Editor

Write articles and design pages using the full featured WYSIWYG-Editor.

WYSIWYG and HTML mode

You can either work in full WYSIWYG mode or in raw HTML mode (code). It is possible to 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 full screen mode (fullscreen) and light/dark mode (light_mode) at any time.

Including media (photos, albums, slideshows, ...)

Media tags are a convenient way for inserting media such as images, photos, albums, slideshows, or custom galleries consisting of your portfolio photos. You can add media in your articles and pages by clicking on MEDIA in the editor toolbar. Media tags can be edited by clicking into the media tag text and then by clicking on the edit icon (edit) in the editor toolbar. Embed videos in raw HTML Mode.

Hint: You can add any valid HTML in raw HTML mode including Javascript and CSS sections.

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 separating 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 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 from your PC.
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. 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 from your PC. These photos are automatically matched with photos in your CMS by their filename. 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 (copies) photos, collections, and album photo relations from the FTP synchronization folder ("/storage/sync") to the CMS (not vice versa). Synchronization will not modify or delete any photos or folders within the FTP synchronization folder.
• 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" => "set-1-subset-1b-album-1", "/storage/sync/Folder 1/Ä-2" => "folder-1-ae-2").
• The (nested) FTP folder structure is stored within a top set named "Sync Collection" with slug "sync-collection". 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).
• After importing, you can edit your imported photos and collections as you wish. However, you may not change the filename of imported photos and the slug of imported collections in the CMS. Otherwise, the synchronization will no longer be able to identify the associated assets within the FTP synchronization folder.

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

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. If not stated otherwise, a system update replaces all IO200 files of your installation, except custom files (like custom templates), files in the storage folder ("/storage"), "/.htaccess" file, "/robots.txt" file, and "/res/style/custom.css" file. However, an update may adapt any file of your installation. Recent updates are indicated in the changelog.

Semi-automatic update

The automatic update is only possible, if your webhosting's PHP version includes the curl extension. Otherwise, you can perform the update as follows:

1. Download the IO200 Distribution and the IO200 Updater.
2. Upload both files to the base directory of your IO200 installation. Usually, this folder contains files and folders like "/admin", "/storage", "/templates", "index.php", and "serve.php".
3. Start the update by opening the following URL in your browser: www.yourwebsite.com/update.php.
4. Log in at your CMS and check if you are on the latest version.

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 a set containing this album, (iii) created a link offering access to all your albums, or (iv) created a link to a page containing an album media tag for this album. However, unpublished assets are not shown on your website by default.
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.

Most templates offer Template Settings to further customize the link (e.g. gallery layout for albums). Only a selection of those settings is shown in standard mode. All Template Settings are available by editing the link after creation or by creating the link in expert mode.

Hint: Hide links in the website navigation menu by chosing "none (hidden link)" as section for the link.

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.
• Template - Multiple templates are available for displaying assets like photos, sets, albums, pages, and articles. The table below provides an overview of all available templates and their related asset types. You can also display a raw link or text, if no template is chosen (none). However, links without a template do not offer access to any assets. 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 front page (default page) for visitors. If no front page is defined, it will be the first link in your primary navigation.
• Template Settings - Template Settings define the look and behavior of templates (i.e. template links). For example, you can select a gallery layout (Grid, Masonry, Wall, Mosaic, or Slideshow) for album and set links or the blog style (modern, visual, grid, or classic) for a blog link. If you do not provide any Template Settings, the default Template Settings (as defined in CMS » Settings » Templates) are used.
• 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

Some templates offer additional functionality. For example, tags on photo sites are automatically linked when a link (resource) with "Tags" template is available. Albums on photo sites are linkend when a link (resource) with "Albums" template is available.

Website XML-Sitemap

Your website's sitemap is available at www.yourwebsite.com/sitemap.xml. Canonical links for photos are automatically created if you add a link with the "Photo" template to your menu (this template can only be selected in Expert Mode).

Website Theme

You can change the website theme in CMS » Settings » Website Theme. Just select a theme and click on the button "Change Theme". Additionally, you can define custom CSS, allowing you to customize the website theme (e.g. changing the font family or the website title color). However, if you are planning major CSS adaptions, you may want to create a custom theme instead. Furthermore, you can upload a favicon icon and replace the website title with a custom logo.

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" (relevant for Contact Template), "Website Meta Description" can be edited in CMS » Settings » Website Publishing. Social media links can be defined in CMS » Settings » Social Media Links.

Template Settings

Template Settings define the look and behavior of templates used for links. Default Template Settings can be defined in CMS » Settings » Templates. However, these default settings can be overridden for each specific link in the "Template Settings" tab by editing the link. Some selected Template Settings for album and set templates (galleries) are indicated below:

• Set Layout: Grid, Masonry, Wall, or Mosaic | number columns (1 to 6)
• Album Layout: Grid, Masonry, Wall, Mosaic, or Sliddeshow | number columns (1 to 6)
• Pagination: number of photos per page in albums
• Collection Summary: show/hide (displayed below collections in sets)
• Photo Title: none, ID, Title, Title otherwise Slug, Title otherwise Filename, Slug, Filename, EXIF (displayed below photos in albums)
• Photo Linking: Open lightbox, Open lightbox with link to photo site, Go to photo site, Link to custom URL, none
• Slideshow Navigation: none, dots, thumbs
• Slideshow Effect: slide, fade
• Lightbox Photo Title: none, ID, Title, Title otherwise Slug, Title otherwise Filename, Slug, Filename, EXIF
• Lightbox Photo Description: none, Caption, ID, Title, Title otherwise Slug, Title otherwise Filename, Slug, Filename, EXIF
• ...

Password Protection

You can password protect URLs of your website in CMS » Settings » Password Protection. For example to protect a certain photo gallery for your clients. Protected URLs are either recognized by a given string or a regex pattern. URLs can be protected multiple times using different passwords. In this case, access to the URL is granted if one of the passwords is matched.

Example: Protecting the entire website

Just enter the string "*" which matches all URLs protecting your entire website.

Example: Protecting client galleries

You have published a set containing multiple client albums by creating a link using the set template. Your goal is to protect each album with a specific client password. Furthermore, you want to add a master password for general access.

Let's assume the URLs are as follows: "/clients", "/clients/album1" and "/clients/album2". You can protect the albums as follows:

• String "/clients/album1" protects only album1 page (i.e. URL "/clients/album1").
• String "/clients/album2*" protects album2 and sublinks to photos in those album (i.e. URLs like "/clients/album2", "/clients/album2/photo1").
• Regex "/^\/clients\/.*$/i" protects all sub paths of the URL "/clients" (i.e. "/clients/xy", "/clients/album1", ...) with the same password (master password).

In this example, the URL "/clients/album1" is protected by two rules (string "/clients/album1" and regex "/^\/clients\/.*$/i"). Therefore, this URL can be accessed with both associated passwords.

Photo Download Protection

You can activate the download protection in CMS » 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 %{QUERY_STRING} path=/storage/cache/(.+)\.(jpg|jpeg|pjpeg|jfif|pjp|png|webp)
RewriteCond %{HTTP_HOST}@@%{HTTP_REFERER} !^([^@]*)@@https?:\/\/\1\/.*
RewriteRule ^(.*) error404 [L,F]

Image Watermarks

You can set a watermark for your photos in CMS » 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.

Custom CSS/HTML

Custom CSS is a convenient way to adapt the website theme like changing the font family, website title color, or photo gallerie paddings. You can set custom CSS/HTML globally in CMS » Settings » Custom CSS/HTML or locally for a particular link by editing the link. In both cases, the custom CSS is injected into your website, allowing you to override or add style definitions. Below are examples of common custom CSS customizations.

Hint: You can also create completely new themes for your website.

Custom CSS for including Google Fonts

Select your favourite fonts at Google Fonts and use the "@import" option.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap'); /* example for including Open Sans font */

Need some ideas for fonts? Check out the following.
Website title: Inter (in black), Oswald, Courier, Crimson Text, Karla (in extra bold)
Website font: Merriweather, Space Mono, Lora, Courier, IBM Plex Mono, Quattrocento Sans + Ovo (headings)

Custom CSS for adapting the website

Website background color

:root{--website-background:#262525;} /* #f9f9f9, #f7f5f2, #2b2b2b */

Website font size

body{font-size:14.5px;}

Website font family

body{font-family:courier;}

Website headings font family

h1, h2, h3, h4, h5, h6{font-family:courier;}

Website title font family

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

Website title

header span.title a{color:#246dff;font-family:'Open Sans', sans-serif;font-weight:300;font-size:0.9em;text-transform:uppercase;letter-spacing:2px;}

Navigation

header nav ul li a, header nav ul li span{font-family:courier;font-size:0.9em;font-weight:300;text-transform:initial;letter-spacing:0.1em;border:0;}
header nav > ul > li > a:before{content:"/ "} /* slash before links */

Navigation hover/active

header nav > ul > li.active > a, header nav > ul > li.active > span{color:#ccc!important;} /* link active */
header nav > ul > li:hover > a, header nav > ul > li:hover > span{color:#ccc;} /* link hover */

Navigation align left below website title in Aspect/Contrast Theme:

@media (min-width:1000px){header nav {width:100%;}}

Show sublinks in primary navigation on mobile devices

@media screen and (max-width:999px){header nav > ul ul{display:block;}}

Custom CSS for adapting gallery layouts

Gallery layout paddings

:root{--gallery-layout-grid-padding:2.2em;}
:root{--gallery-layout-grid-padding-set:4.8em;}
:root{--gallery-layout-masonry-padding:0.5em;}
:root{--gallery-layout-masonry-padding-set:2.5em;}
:root{--gallery-layout-wall-padding:12px;}
:root{--gallery-layout-wall-padding-set:4px;}
:root{--gallery-layout-mosaic-padding:3px;}
@media (max-width:999px){
  :root{--gallery-layout-grid-padding:1.6em;}
  :root{--gallery-layout-grid-padding-set:3em;}
  :root{--gallery-layout-wall-padding:4px;}
}

Photo placing in grid layout

ul.gallery.layout-grid{align-items:self-start;} /* center, self-start, self-end */

Square photos in grid layout

ul.gallery.layout-grid li img{aspect-ratio:1/1;object-fit:cover;width:100%!important;}

Full width portrait photos in grid layout

ul.gallery.layout-grid li img.photo-portrait{width:100%;}

Photo frame/border

ul.gallery:not(.layout-slideshow):not(.photo-contextphotos) img.photo{border:2em solid #fff;}
p.photo-image img.photo{border:2.5em solid #fff;}

Custom CSS Targeting

header{}, main{}, footer{} /* targets header, site content, or footer */
header nav{}, footer nav{} /* targets header/footer nav */
@media screen and (min-width:1000px){} /* targets desktop */
@media screen and (max-width:999px){} /* targets mobile */

Custom CSS for adapting the lightbox

Hidden lightbox title/description on mobile devices

body.glightbox-mobile .gslide-title{display:none;}
body.glightbox-mobile .gslide-description{display:none;}

Lightbox with white background (desktop)

@media screen and (min-width:1000px){
  #glightbox-body .goverlay {background: rgb(255 255 255 / 100%);}
  #glightbox-slider .gslide-media img{box-shadow:none;}
  #glightbox-slider .gslide-description{background:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(rgba(255,255,255,.75))); background:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.75) 100%);}
  #glightbox-slider .gslide-title{color:#000;}
  #glightbox-slider .gslide-desc{color:#9d9d9d;}
}

Further

Frequently Asked Questions

• How to add website statistics?
• How to change/adapt the website language?
• How to link photo tags?
• How to embed videos on my website?
• How to create two or multiple separate blogs?
• How to reset the Admin Panel password?
• How to move the installation to another directory/domain?
• How to run IO200 CMS on NGINX?

How to add website statistics?

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

How to change/adapt the 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, French

How to link photo tags?

Create a link (resource) with "Tags" template. After that, all photo tags are automatically linked. The "Tags" link can also be created as hidden link, if you don't want to show it in your navigation.

How to embed videos on my website?

1. Create a page (or article) where you want to embed the video.
2. Find and copy the video's embed code.
   
   • Vimeo: Click on the "Share" button right next to the video and find the "Embed" section.
   • Youtube: Click on the "Share" button below the video and then on "Embed".
   • Facebook: Click on the three dots ("...") beside the video (browser) and select "Embed". Thereby, the video's audience must be set to public.
   • Instagram: Select the three dots ("...") on the videos's page (browser) and tap "Embed".
3. Switch to raw editor mode in your CMS by clicking on the code icon (code) in the editor's toolbar. Insert the HTML code you have just copied.
4. Save the page (or article). Create a link in your website's menu to show the new page.

How to create two or multiple separate blogs?

The default blog template always shows all articles. However, you can create two or multiple separate blogs on your website as follows:

1. Create two or more categories in your CMS. In our example we will create the categories "Trip Reports" and "Equipment".
2. Create some articles and assign categories to those articles.
3. Create a blog link. Choose a neutral name like "Blog", "Articles", "Essays", or "Journal".
4. Open your website and go to the blog site. In the sidebar or at the bottom you will find links to your blog categories. Visit those links and note down the URLs (e.g. "/blog/category/trip-reports/1" and "/blog/category/equipment/1").
5. Hide the Blog link in your CMS (edit the link and assign the section "none (hidden link)"). The blog is still accessible, but is no longer displayed in the navigation.
6. Create a raw link for each blog category with the respective category title and the URL's you have noted down (e.g. Title="Trip Reports" and URL="/blog/category/trip-reports/1").

You have successfully created separated blogs for your website. Another option for creating separate blogs is a custom template that filters all articles by a specific category.

How to reset the Admin Panel password?

If you have forgotten your password for the admin panel, you can reset it by visiting www.yourwebsite.com/admin/requestpassword. After submitting the form, you will receive an email with a link to change your password. 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 (i.e. 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.

How to move the installation to another directory/domain?

Move installation from http to https

After activating an SSL certificate for your domain, you have to adapt the WEBSITE_URL setting in the config file ("/storage/system/config.php"). Replace "http://" with "https://" (e.g. "http://www.yourwebsite.com" with "https://www.yourwebsite.com").

Move installation to another domain

Copy all files and folders of your current installation to your new webspace. Edit the config file ("/storage/system/config.php") and adapt the WEBSITE_URL setting to represent your new URL. Log in at your CMS and clear the website cache in CMS » Settings.

Move installation to another directory

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". Log in at your CMS and clear the website cache in CMS » Settings.

Move installation from www.yourwebsite.com/koken/ to www.yourwebsite.com

1. Move all files and folders of your IO200 installation on your webspace from the subfolder "/koken" to the parent folder (usually by using an FTP program).
2. Edit the .htaccess file and replace "RewriteBase /koken/" with "RewriteBase /".
   Edit the config file ("/storage/system/config.php") and adapt the WEBSITE_URL setting. Replace "https://www.yourwebsite.com/koken" with "https://www.yourwebsite.com". Log in at your CMS and clear the website cache in CMS » Settings.

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 (in /.htaccess file of your IO200 installation) must be converted to NGINX directives and added to the NGINX configuration file of your server. Rules for Cache-Control, HTTP:Authorization, and optionally marked rules are not mandatory for running IO200. The following NGINX directives (i.e. configuration options) are required for IO200:

error_page 404 /error404;
location / {
   rewrite ^/(.*/)?admin/api/(auth|cms|site|service)/([A-Za-z0-9_:/]+)$ /admin/api/$2.php?request=$3 break;
   rewrite ^/(.*/)?admin/?$ /admin/index.php break;
   rewrite ^/(.*/)?admin/([a-z]+)$ /admin/$2.php break;
   rewrite ^/$ /index.php break;
   if (!-e $request_filename){
      rewrite ^(.*)$ /index.php?path=$1 break;
   }
}

Troubleshooting

• Photos (thumbnails) are not shown on my website
• Sublinks in primary navigation are not shown on mobile devices
• System does not send emails

Photos (thumbnails) are not shown on my website

Each time a photo or 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. Therefore, it may take some time until all photos are displayed. Subsequent visitors will not be affected by this issue because thumbnails need to be generated only once.

Sometimes, large photos/thumbnails cannot be generated because your webhosting provider may restrict the performance (available memory/processing power) of your server. The required memory for generating a photo/thumbnail depends on the size of the input photo (original uploaded photo into the CMS) as well as on the size of the output photo displayed on your website (max size setting in image publishing). Try the following, if your server cannot handle large files:

• Upload photos in smaller resolution (less megapixel) into the CMS
• Upload photos in higher compression into the CMS
• Reduce the maximal image size for photos on your website (CMS » Settings » Image Publishing)

Another option might be to upgrade to a better webhosting package or to change your webhosting provider.

Sublinks in primary navigation are not shown on mobile devices

Often, there are many sublinks in the primary navigation, therefore we decided to hide them on mobile devices by default. However, you can easily show primary navigation sublinks on mobile devices by including a one line custom CSS snippet.

System does not send emails

First, check if you entered the correct email address and check your email's spam folder.

• Website forms like contact form: Check Website Email in CMS » Settings » Website Publishing (alternatively site settings file "/storage/system/sitesettings.json").
• Admin panel like password reset: Check your login email address (user file "/storage/system/user.json").

If you still don't receive any emails, you may have to configure email sending in your web hosting providers administration. Ask your web hosting provider ("Why don't my scripts send emails?"") or google "php mail {yourwebhostersname}".

Custom Theme

IO200 is a very flexible system giving you full control of your website. A custom theme allows you to completely change the look and feel of your website. You can create a custom theme as follows:

1. Create a new stylesheet and insert the content in the custom stylesheet file ("/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 completely new stylesheet from scratch.
2. Activate the stylesheet in your admin panel at CMS » 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 » Settings » Custom CSS/HTML.

Custom Templates (Plugins)

IO200 already offers several templates for displaying content such as sets, albums, photos, articles, timeline, and a blog. However, you can create new templates, if you want to further customize your website or add more functionality. Custom templates offer full flexibility to display any content on your website the way you want. How about an adapted album template, a list of all your photos, a custom landing page, a shop integration, or a custom contact form?

• Creating a link for a custom template within your website menu
• Developing a new custom template
• Customizing an existing template (header, footer, photo page ...)
• Tutorial: How to create and display a custom contact form

Creating a link for a custom template within your website menu

1. Create a new template php file and move it in the template folder (e.g. "/templates/newtemplate.php").
2. Log in at your 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 variables. For example you could pass the id of a set or an album, if your template should display a certain set/album.

Developing a new custom template

You can create new templates from scratch or by adapting existing templates. In the latter case, you can copy and paste the original template file and save it with a new name. Otherwise, the page template file ("/templates/page.php") is a great blueprint for new templates. You are free to include any HTML, JS, and PHP in a custom template.
Please note that IO200 uses caching to improve site performance. Therefore, you have to reset the cache in the admin panel (CMS » Settings) after adapting a (custom) template.

The following data and classes are available within each template file:

• Data
  • site information: $DATA['SITE'] (relevant information for the link/resource)
    Asset type and id if provided when creating a link in the admin panel:
    
    • $DATA['SITE']['reference_type']
    • $DATA['SITE']['reference_id']
  • website settings: $DATA['SETTINGS']
  • language file contents: $DATA['LANG']
• Classes
  • Functions related to photos and collections: $CmsPortfolioService
  • Functions related to articles and pages: $CmsTextService
  • Functions for output: $CmsOutputService
  • Functions for database access: $CmsDatabaseConnection
• Includes
  • Header: require('_header.php');
  • Footer: require('_footer.php');

Customizing an existing template (header, footer, photo page ...)

Sometimes you may want to customize one of the existing templates instead of creating a new one. For example, the header ("_header.php"), footer ("_footer.php") or photo page ("_photosite.php") templates which are itself are included by many other templates.

Updating your system to the latest IO200 version will overwrite these (adapted) template files. You can prevent this by saving the adapted template file with extension ".custom.php" instead of ".php" (e.g. "_header.custom.php"). These files will be included preferentially and will not be overwritten during updates.

Tutorial: How to create and display a custom contact form

In this tutorial we will create a custom form template (e.g. for booking requests) for your website. We will use the contact template as basis instead of creating a completely new template from scratch, since it already offers a good starting point for this purpose. This tutorial requires some basic HTML knowledge.

1. Download the contact template from your webspace ("/templates/contact.php") to your computer.
2. Rename the file to "myform.php".
3. Adapt the form of your new template. Let's delete the message form field and add some new form fields. Open the file and delete the "<!--- Field: message -- >" section. Add some custom form fields below the "<!--- Field: mail-- >" section. You can use any valid html form elements. However, all (new) form elements require an unique name attribute (name="xyz") and must be inserted within the <form> element. Otherwise the data is not collected and processed after submitting the form. Example:
   <!-- Field: date, time (time and date example) -->
   <p>
      <label for="date_time">Date & Time</label>
      <input type="date" name="date" id="date_time" value="" required>
      <input type="time" name="time" id="date_time" value="" required>
   </p>
   <!-- Field: duration (dropdown example) -->
   <p>
      <label for="duration">Duration</label>
      <select name="duration" id="duration">
         <option value="1">1 hr</option>
         <option value="2">2 hr</option>
         <option value="3">3 hr</option>
         <option value="4">more than 3 hr</option>
      </select>
   </p>
   <!-- Field: location (input example) -->
   <p>
      <label for="location">Location</label>
      <input type="text" name="location" id="location" value="" placeholder="your preferred location" style="width:100%;max-width:48em;">
   </p>
   <!-- Field: number photos (radio button example) -->
   <p>
      <label for="number_photos">Number Photos</label>
      <input type="radio" id="number_photos1" name="number_photos1" value="10-20">
      <label for="number_photos1" class="optionlabel">10 - 20 photos</label><br>
      <input type="radio" id="number_photos2" name="number_photos2" value="20-40">
      <label for="number_photos2" class="optionlabel">20 - 40 photos</label><br>
      <input type="radio" id="number_photos3" name="number_photos3" value="morethan40">
      <label for="number_photos3" class="optionlabel">more than 40 photos</label><br>
   </p>
   
4. Save the file and upload your new template to your webspace ("/templates/myform.php").
5. Log in at your CMS and go to CMS » Menu. Create a new link using "Expert Mode". Select "Custom Template" as template and type in "myform" as template name. Finally, you have to provide a title (e.g. "Booking Request") and a path (e.g. "/booking-request") for the link.