Documentation

Installation

• Automatic Installation
• Manual Installation
• Koken Migration
• Licensing

Automatic Installation

Learn how to get web hosting for your IO200 website. Please read further installation instructions for NGINX, if you are running IO200 on a NGINX webserver.

Do you want to install IO200 but you cannot do it by yourself?
Just contact us. We are happy to make you an offer.

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 greater with the following extensions: date, fileinfo, hash, json, mbstring, mysqli, pcre and GD or Imagick (JPEG and optional WebP support) for image processing. It also requires a working PHP mail configuration and a MySQL or MariaDB database. Make sure to check for valid PHP file upload settings (file_uploads, upload_tmp_dir, upload_max_filesize, post_max_size) and if STRICT_TRANS_TABLES mode is disabled on your database. Furthermore, Apache mod_rewrite module (rule-based rewriting engine) must be activated. Make sure the virtual host configuration file has the directive AllowOverride All, when using a virtual host. 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 a 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 (usually by using an FTP program). Do not forget the ".htaccess" file, which may be hidden in some operating systems like macOS. File permissions: chmod 755 for folders and chmod 644 for files. You can change file and folder permission either through cPanel, FTP, or SSH. Sometimes, you also may have to change the owner:group to www-data:www-data or http.
   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"). WEBSITE_URL must include the protocol (e.g. http:// or https://). 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").
   {"mail":"mail@yourwebsite.com", "passwordhash":"", "locked":false, "resetpasswordhash":null, "autologinhash":null, "numberauthenticationattempts":0, "login_on":null}"
   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,288,432,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 the first time, you have to reset the admin password by clicking on "Forgot password?" and following the instructions.

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". Depending on the server and size of your website, the migration may take just a few seconds or up to 5 minutes. Please be patient and do not reload the browser window unless otherwise specified.

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/FixPhotos.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 recreate links for your new website to display content.

Do you want to migrate from Koken to IO200 but you cannot do it by yourself?
Just contact us. We are happy to make you an offer.

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. Edit the configuration file ("/storage/system/config.php") and set CMS_ORIGINAL_IMAGE_SUBFOLDERDEPTH to 2.
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" on your database. Thereby, your database must contain all IO200 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 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 FixPhotos Script (www.yoursite.com/listener/FixPhotos.php) in order to to automatically fix problems with your photo files (e.g. duplicate photos, filename restrictions, ...) and to detect missing photos. The script might find a lot of "unkown files" (old Koken cache files), which can be deleted.
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 display 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, articles, and links. Furthermore, a free license displays a IO200 branding in the website footer.

After exceeding the limits of your free license (for example of your photos), you can still edit and delete photos but you cannot upload any new 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"). We are offering several payment like Credit or Debit Card, Bancontact, iDEAL, EPS, giropay, Przelewy24, SEPA debit, Sofort, and iDEAL. Payments by credit card are ussually processed within seconds/minutes, while SEPA credit transfers take up to eight days on average.

Admin Panel (CMS)

• Overview
• Photo Publishing Workflow
• FTP Folder Synchronization
• Bulk Photo Actions
• WYSIWYG Editor
• Classification (tagging and categorizing)
• System Updates
• Browser Support

Overview

Introduction to IO200

» Take the Quickstart Tutorial to create a portfolio website with IO200 in eight simple steps.

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 to publish content on your website.
• Settings - Adapt your website settings (website title, website theme, watermarks, password protection, ...).
• Inspect - View your portfolio website and edit assets directly in-page.
• Administration - Manage your account, license, and system updates.

Photos, Articles, Pages, and Classification let you manage your assets (e.g. photos and albums). Create links with different templates in the Menu to publish assets on your website.

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 Command / ⌘, 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/ ⌥+Click resets the selection to the current photo,
    • CTRL+A / ⌘+A selects all photos,
    • ESC removes the selection.
    Pressing the DEL key, deletes the selected photo(s).
  • Dragging photos into application automatically opens photo upload modal (with file dropzone).
  • Search photos by different attributes by selecting the corresponding sort attribute. Filter photos by tags, year, featured, unlisted, unpublished, video linked.
  • Photo Edit: Click on the photo to set a focal point. A small circle will appear indicating the position of the focal point. Click on the circle again to remove the focal point or on another position in the photo to move the focal point.
  • Photo Upload: Select an album before opening the upload modal. After that, you can choose to automatically add the new photos to this album.
  • Collection Navigation Width: Drag the triangle at the right bottom corner or the right border of the collections navigation to resize the width.
• 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 » Album: Set a new album cover by dragging and dropping a photo to the album cover icon left next to the album title.
  • Photos » Set: Order the sorting of all collections in the current set by dragging and dropping.
  • Photos » Set: Delete collections by dragging and dropping them to the "delete dropzone" (appears at bottom after dragging).
  • 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.

• Modals/Prompts
  • All - Press ESC to close a modal/prompt. Press ENTER to submit the form/execute the action.
  • Photo/Article/Pages/Link Edit - Save changes by pressing CTRL+S / ⌘+S.
  • Article/Pages - Preview changes by pressing CTRL+P / ⌘+P. Exit preview view with ESC.
  • Photo Edit - View fullsize photo by pressing CTRL+P / ⌘+P. Exit fullsize view with ESC. Move to previous/next photo using arrow keys (⇦, ⇨, ⇧, ⇩).

Assets

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

• Collections (nested Albums and Sets)*
  Title, slug, summary, description, featured, listed, published, sorting
• Tags and Categories
  Title, slug, caption
• Photos
  Filename, slug, title, caption, featured, listed, published, aspect ratio, filesize, EXIF & IPTC data, link 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, custum CSS
• Pages
  Title, slug, content, meta description, meta keywords

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

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 into the CMS, 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 [pc]

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 [pc]

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 manually to the FTP synchronization folder.
3. Import these photos directly into the CMS using FTP Folder Synchronization. Thereby, albums are automatically created for subfolders.
   Optional: Use Webhooks to automatically trigger FTP folder synchronization.

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 (macOS). Make sure that metadata is kept when exporting.). IO200 allows you to automatically import this data.

Publishing photos using FTP Folder Synchronization [smartphone, camera]

1. Configure your camera/smartphone to automatically upload (new) photos to the FTP synchronization folder of your IO200 installation ("/storage/sync" on your webspace). Both, Android and iOS offer apps for this purpose.
2. Create a Webhook as described in FTP Folder Synchronization that automatically and regularly triggers FTP folder synchronization. You can also bookmark this link in your browser to start FTP folder synchronisation manually.

Hint: Create a subfolder in your FTP synchronization folder (i.e. "/storage/sync/cameraphotos") and upload your camera/smartphone photos into this folder instead of the main sync folder ("/storage/sync"). Activate both collection sync settings for the webhook to automatically add those photos to an album. Create a link in your menu to display the album on your website.

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 to the FTP synchronization folder ("/storage/sync"). You may organize photos files in folders and subfolders. Folders and their photos can be automatically imported as nested sets and albums.
2. Open your CMS, go to Photos, and click on the button "Sync", and then on "FTP Folder Synchronization".
3. Select actions for synchronization:
   • [x] Import new photos (x),
   • [x] Update existing photos (x),
   • [x] Delete missing photos (x),
   • [x] Sync FTP folders as (nested) collections (+x collections, -x collections).
4. Click on the button "Start".

Automatic FTP Folder Synchronization using Webhooks

You can use webhooks to trigger FTP folder synchronisation automatically without having to log into your Admin Panel.

1. Open the "FTP Folder Synchronization" modal in the Admin Panel, select your preferred synchronization settings, and finally click on "Webhook". Copy the displayed URL. Opening this webhook URL in a browser will start the synchronization.
2. Create a service that calls this webhook URL automatically and regularly (i.e. by using CronJobs at your web hosting account).

Hint: FTP Folder Synchronization Webhooks do not allow to delete missing photos.

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.
• The (nested) FTP folder structure is stored within a top set named "Sync Collection". All other (existing) sets and albums in the CMS that are not included in this set are not affected by the synchronization.
• 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").
• Slugs of imported sets/albums contain the full path to differentiate same subfolder names (e.g. 2025-summer for "/2025/summer/", 2024-summer for "/2024/summer/").
• After importing, you can edit your imported photos and collections as you wish. However, you may not change the filename of imported photos or the slug of imported collections in the CMS. Otherwise, the synchronization will no longer be able to identify the associated assets within the FTP 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 (macOS). Make sure that metadata is kept when exporting.). IO200 allows you to automatically import this data.

Bulk Photo Actions

You can automatically upload or update multiple photos and import or modify IPTC data like including titles, captions, and tags. Additionally, you can edit or merge multiple photos simultaneously.

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] Assign new filenames, if already taken*,
   • [x] Set unlisted.
4. Click on the button "Upload". A progress bar informs you about the status of the ongoing process.

Photos will be added to the current album (if you are not within the "All Photos" view). Furthermore, EXIF and IPTC data (title, caption, and tags) will be automatically imported.

*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: photo.jpg to photo-2.jpg, if the filename photo.jpg is already taken; photo.jpg to photo-3.jpg, if the filenames photo.jpg and photo-2.jpg are already taken.

Update multiple photos

1. Open your CMS, go to Photos, click on the button "Sync", 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 (macOS). Make sure that metadata is kept when exporting.).

Edit/Merge multiple photos

1. Open your CMS, go to Photos, and select multiple photos.
2. A photo selection bar appears at the top. Select "Edit", "Merge", "Tags", "Albums", "Publish/Unpublish", "List/Unlist", "Feature/Uneature", or "Delete" in the "Actions" menu.

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) at any time.

If you hover over elements like paragraphs in WYSIWYG mode, an icon bar will appear at the top right corner of the element allowing you to move the element up or down or to delete the element.

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. In WYSIWYG mode, media tags can be edited or removed by clicking on the media tag. In HTML mode, 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.

The following media tags are available:

• local_police Hero Banner - prominent web banner with title, text, link and photo
• photo Photo - photo from your portfolio
• photo_album Album - gallery with photos from an album (grid, masonry, wall, mosaic, slideshow layout)
• photo_library Gallery - gallery with manually selected photos (grid, masonry, wall, mosaic, slideshow layout)
• smart_display Video - public video from YouTube or Vimeo
• view_module Asset Links - latest/featured/random photos/albums/articles
• image Custom Image - custom image from your FTP or external URL

Tip: You can add any valid HTML in raw HTML mode including Javascript and CSS sections.
Tip: Sometimes you might want to upload photos or create albums just for blog articles or pages. Photos are not shown in Timeline, Photos and Tags templates when marked as unlisted. Correspondingly, unlisted albums do not appear in Albums template.

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 (e.g. "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 (e.g. "#tag1 (6)" has 6 relations).

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 and zip extension. Otherwise, you can perform the update as follows:

1. Download the IO200 Updater.
2. Upload the file (update.php) to the base directory of your IO200 installation (usually by using an FTP program). 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. Edit any asset to reset the site cache.

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

• Quickstart Tutorial
• Website Navigation Menu
• Website Theme and Settings
• Template Settings
• Album/Photo Downloads
• Image Watermarks
• Password Protection
• Photo Download Protection
• Photo Media Linking
• Custom CSS

Quickstart Tutorial

Website Navigation Menu (Links)

Please note, that none of your published 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 (publishes) 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.

Two types of templates are available: Templates that automatically grant access to all assets of a certain type (Photos, Albums, Tags, Timeline, and Blog) and templates that only grant access to a specific selected asset (e.g. Set, Album, Page, ...). In a table below, you will find an overview of all templates and their related assets.

Unpublished assets are never shown on your website. Published assets only appear on your website, if there is a link that displays them. Either a link with a template for that specific asset (i.e. Album template) or a link with a template that displays all assets of this type (i.e. Albums template). In the latter case, all new assets of this type (in this example albums) are automatically displayed (published) on your website without the need to create new links for new assets. Unlisted assets are semi-private. Unlisted photos are not shown in Timeline, Photos, and Tag templates and unlisted albums are not shown in Albums template. However, an unlisted photo is shown if used within an album, as album cover, as article cover or within a PHOTO, GALLERY or ALBUM media tag. Unlisted albums are shown, if used within another set (Set link), via a direct Album link or as ALBUM media tag. You can adapt the published/listed status for each asset by editing the asset (configuration tab or multi select for photos).

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/type (primary navigation, secondary navigation, or share link/hidden secret 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). Most templates offer Template Settings to further customize the link (e.g. gallery layout for albums).

Share Links (hidden secret links) are not shown in your website navigation and do not appear in your sitemap, but are still accessible for visitors. They will be automatically placed in the Hidden Links section with a long random URL (e.g. "/album-t8vwxr84i59bxcq3oggbfbzu"). Hence, only someone who knows the URL of the link will be able to access it.

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 neither shown in the navigation nor in the sitemap. However, published and listed resources in Photos, Albums, Tags, Timeline, and Blog links are shown in the sitemap.
• 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 choosen (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) may have an absolute URL (starting with "www" or "http"), relative URL (starting with "/") or no URL at all. Links with an absolute URL will be opened in a new browser tab.
• 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 display 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) 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 HTML and CSS - All template links offer the possibility to specify custom HTML and CSS that will be injected to this resource.

Overview of Templates

Hint: Unpublished assets are never shown on your website.

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 linked 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 Photos template to your menu. You can override the automatically generated sitemap by creating a sitemap.xml file in the base directory of your IO200 installation.

Website Theme and Settings

You can change the website theme in CMS » Settings » Inspect Theme. Select one of our Prebuild Themes and click on update. Alternatively, you can use the Theme Builder to create your own theme by combining different layout options (centered, full-width, sidebar, …), mode (light, dark) and fonts.

Themes can be customized using Custom CSS (e.g. changing the font family or the website title appearance). However, if you are planning major CSS adaptions, you may want to create a custom theme instead. You can inject code into the <header> section and at the end of the <body> section to insert useful things like custom HTML, meta tags, statistic snippets, tracking codes, or other custom scripts. Furthermore, you can upload a favicon icon and replace the website title with a custom logo.

All relevant website settings like "Website Title", "Website Email" (relevant for Contact Template), and "Website Meta Description" can be edited in CMS » Settings » Inspect & SEO. Social media links can be defined in CMS » Settings » Social Media.

Template Settings define the design, behavior, and content of templates on your website.

Template Settings

Template Settings define the look and behavior of templates used for links. Default Template Settings can be defined globally in CMS » Settings » Templates. However, these default settings can be overridden locally for each specific link in the "Template Settings" tab by editing the link. Alternatively, Local Template Settings for links can be edited in CMS » Inspect (Actions » Edit Settings). Certain templates offer special settings (e.g. the Posts Style setting is only available for links using the Blog template). Some selected Template Settings are indicated below:

• Collection Gallery Layout: Grid, Masonry, Wall, or Mosaic | number columns (1 to 6)
• Photo Gallery Layout: Grid, Mosaic, Masonry, Wall, Dynamic Wall, or Slideshow | number columns (1 to 6)
• Photo Linking: Go to photo site, Open lightbox, Open lightbox (with link to photo site), Go to URL (photo media link), None
• Lightbox Title: ID, Title, Title otherwise Slug, Title otherwise Filename, Slug, Filename, EXIF, None
• Slideshow Navigation: Dots, Thumbs, None
• Slideshow Transition Effect: Slide, Fade
• Page Layout: Standard (header footer navigation), Standalone (no header footer navigation)
• Page Heading Appearance: Desktop and Mobile, Desktop, Mobile, None
• ...

Album/Photo Downloads

You can activate photo downloads in albums in CMS » Settings » Album and photo downloads on photo sites in CMS » Settings » Photo. Like all Template Settings, these settings can be overwritten for each individual link allowing you to activate downloads only for certain parts of your website. In this case, edit the link and go to the "Template Settings" tab to customise the download settings.

Albums downloads allows visitors/clients to select specific photos before starting the download or download the whole album at once. The downloaded file name is based on the website title, which, in turn, is determined by the link title and/or asset title (depending on the template). Of course, you can combine photo downloads with password protection, if you only want to allow downloads for certain clients.

Hint: Photo sites can only be reached by visitors, if the link's album "Photo Linking" setting is set to "Open lightbox with link to photo site" or "Go to photo site".

Image Watermarks

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

Password Protection

You can password protect URLs of your website in CMS » Menu » Password Areas (e.g. to protect certain photo galleries 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.

  » FAQ: How to protect the entire website with a password?
  » FAQ: How to protect client galleries with passwords?

Another way to protect content (e.g. albums) are Share Links (hidden secret links). Share links do not appear in your website navigation or in your sitemap and have a long random URL (e.g. "/album-t8vwxr84i59bxcq3oggbfbzu"). Therefore, only someone who knows the URL of the link can access it. Create share links by creating a new link in CMS » Menu and choose "Share Link (hidden secret link)" as section/type. You can automatically create share links for albums by hovering over "Share" (album edit bar at the top of the album in CMS » Photos) and clicking on "Create Share Link".

  » FAQ: How to share private albums with friends/clients?

Hint: Make sure that private assets are not displayed by other links (resources) if you intend to keep them private. Timeline, Photos, and Tags templates display all your photos and Albums template displays all your albums. Therefore, you want to set the private albums (password protected or accessible via a share link) as well as all photos in these albums to unlisted, which prevents these assets from appearing in the mentioned templates. However, if you do not use these templates (i.e. create no links for them), you are good without using unlisted. Photos that are uploaded to unlisted albums are automatically set to unlisted.

Photo Download Protection

You can activate photo download protection in CMS » Settings » Images & Protection. You can further protect your photos by forbidding offsite linking in your .htaccess file [Show Code].

Add the following lines before the site section of your .htaccess file to forbid offsite linking:
# cache image: forbid offsite linking
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]
# original image: forbid offsite linking
RewriteCond %{REQUEST_FILENAME} /storage/originals/(.+)\.(jpg|jpeg|pjpeg|jfif|pjp|png|webp)$ [OR]
RewriteCond %{QUERY_STRING} path=/storage/originals/(.+)\.(jpg|jpeg|pjpeg|jfif|pjp|png|webp)
RewriteCond %{HTTP_HOST}@@%{HTTP_REFERER} !^([^@]*)@@https?:\/\/\1\/.*
RewriteRule ^(.*) error404 [L,F]
# original image: always forward to serve
#RewriteCond %{REQUEST_FILENAME} /storage/originals/(.+)\.(jpg|jpeg|pjpeg|jfif|pjp|png|webp)$
#RewriteRule ^(.*)$ serve.php?path=$1 [L,QSA]

Note: By default, original and cache images are stored in random subfolders such as "/e9/1c/49db-30ef-43db-9db1-230a". Thereby, the same photo has different random subfolders for original and cache images. The default folder length of 24 characters results in 16^24 = 79.228.162.514.264.300.000.000.000.000 (79 octillion) combinations just to guess the path of an image. Therefore, it is almost impossible for someone to access an image, if the path and filename is not known. In addition, the system will automatically stop serving new images for some time, if there are too many unauthorized requests within a short time. IO200 installation before version 2.18 (end of 2024) have default folder lengths of 4 (or 6) characters resulting in 16^4=65.536 (or 16^6=16.777.216) combinations.

Note: The folder length for original and cache images can be adapted in the configuration file ("/storage/system/config.php") by changing CMS_ORIGINAL_IMAGE_SUBFOLDERDEPTH, CMS_ORIGINAL_IMAGE_SECRETFOLDERLENGTH, WEBSITE_CACHE_IMAGE_SUBFOLDERDEPTH, and WEBSITE_CACHE_IMAGE_SECRETFOLDERLENGTH settings. You may only change the original image settings for new installations or if there are no photos uploaded in the system.

Photo Media Linking

Photos can be linked to media such as videos or URLs (edit the photo and go to the "Media Link" tab). If a photo is linked to an URL, an iframe with the URL will open in the lightbox. If a photo is linked to a video (public YouTube or Vimeo video), the corresponding video is embedded instead of showing the photo in the following cases:

• Lightbox
• Photosite
• PHOTO media tag (articles and pages)

Hint: You can directly embed videos in pages and articles using the video media tag in the WYSIWYG editor.

Custom CSS

Custom CSS is a convenient way to adapt the website theme like changing the font family, website title, or photo gallerie spacings. You can set custom CSS globally in CMS » Settings » Custom CSS 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.

Usually, only small adjustments such as changing the website title font are required to give your website a unique look and feel. Below are examples of common CSS customizations.

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

Do you want to customize CSS but you cannot do it by yourself?
Just contact us. We are happy to make you an offer.

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 website

Website background color

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

Website font size and font family

body{font-size:14.5px;} body{font-family:courier;}

Custom CSS for adapting the header (title and navigation)

Website title

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

Website title font family

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

Navigation

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

Navigation hover/active

header nav > ul > li.active > .nav-item-title{color:#ccc!important;} /* link active */
header nav > ul > li:hover > .nav-item-title{color:#ccc;} /* link hover */

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

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

Hide Sublinks in mobile navigation:

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

Custom CSS for adapting the content

Website headings font family

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

Rounded buttons:

.button{border-radius:0.2em;} /*padding:0.6em 1em;font-weight:500;text-transform:uppercase;border-width:1px;*/

Rounded boxes:

main form, main form input, main form textarea, div.infobox, main.template-blog aside.sectionaside{border-radius:0.2em;}

Hide lightbox title/description on mobile devices

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

Custom CSS for adapting gallery layouts

Gallery thumbnail spacing

:root{--gallery-grid-spacing:1rem;}
:root{--gallery-masonry-spacing:1rem;}
:root{--gallery-wall-spacing:1rem;}
:root{--gallery-mosaic-spacing:1rem;}
:root{--gallery-card-spacing:1rem;}
:root{--gallery-timeline-spacing:1rem;}
@media (min-width:1000px){
  ul.gallery{--gallery-grid-spacing:2rem;}
  ul.gallery{--gallery-mosaic-spacing:1.5rem;--gallery-masonry-spacing:1.5rem;--gallery-wall-spacing:1.5rem;}
  ul.gallery.gallery-set{--gallery-grid-spacing:3rem;--gallery-masonry-spacing:3rem;}
}
@media (max-width:999px){
  ul.gallery.gallery-set{--gallery-grid-spacing:calc(2rem / 1.5);--gallery-masonry-spacing:2rem;}
}

Photo aligning in grid layout

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

Full width portrait photos in grid layout

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

Square photos in grid layout

ul.gallery.layout-grid li img.photo{aspect-ratio:1/1;object-fit:cover;} /*aspect-ratio:3/2;*/
ul.gallery.layout-grid li div.photo-wrapper.photo-portrait{width:100%;}

Photo frame/border

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

Disable photo zoom

#container ul.gallery.layout-mosaic li:hover a img,
#container ul.gallery.layout-wall li:hover a img,
#container ul.gallery.gallery-album.layout-masonry li:hover a img{transform:none;}

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: Atkinson, Crimson Text, Inter (in black), Oswald, Karla (in extra bold), Courier New
Website font: Lora, Quattrocento Sans + Ovo (headings), Raleway (as thin font), Courier New, IBM Plex Mono, Space Mono, Montserrat, Merriweather, Roboto Slab, Nunito Sans, Raleway

Frequently Asked Questions

• How to get web hosting for my IO200 website?

• How to share private albums with friends/clients?
• How to protect client galleries with passwords?
• How to protect the entire website with a password?
• How to implement a client photo proofing workflow?

• How to create a blog?
• How to create two or multiple separate blogs?
• How to create a photo stream (timeline)?
• How to add a basket (lightbox)?
• How to link photo tags and albums on photo sites?

• How to add website statistics?
• How to change/adapt the website language?

• How to reset the Admin Panel password?
• How to move the installation to another directory/domain?
• How to create a backup of my IO200 installation?
• How to run IO200 on NGINX?

• Where can I submit feature requests?

How to get web hosting for my IO200 website?

TL,DR: Sign up a shared hosting plan that meets IO200's requirements with a web hosting provider. Follow provider instructions to set up your account and register a domain (URL). Learn how to upload files to your webspace and create a database via your control panel.

A web server and a domain name (URL) is required in order to create and publish a website with IO200. Here is a general guide to help you through the process:

1. Choose a Hosting Type - There are several types of hosting available, including shared hosting, dedicated hosting, VPS hosting, cloud hosting, or even your own server. For most users "Shared Hosting" is the best option, because it is cheap, easy to set up, and offers sufficient performance.
2. Select a Hosting Provider - Research different hosting providers and compare their features, prices, reliability, and customer support. Some popular hosting providers include IONOS, Strato, All-inkl, Hetzner, Hostgator, and Bluehost.
3. Sign Up for a Hosting Plan and Register a Domain Name - Select a hosting plan that meets IO200's requirements (domain name, PHP version 7.4 or greater, MySQL or MariaDB database, optional: HTTPS). Most providers offer various plans with different levels of features and resources. Usually, simple plans starting around 2-5€ per month are sufficient for IO200. You are welcome to contact us, if you are not sure whether a particular plan fulfils the requirements.
4. Set Up Your Hosting Account - Follow the instructions provided by your hosting provider to set up your hosting account. This typically involves creating an account, choosing your domain name, and configuring your hosting settings.
   • Webspace - You have to upload the installer to your webspace in order to start the installation. Usually, this is done by using an FTP program. Find more information in your web hosting control panel on how to upload files to your webspace.
   • Database - IO200 requires a database for storing data. In most cases you can create a database after logging into your web hosting account (control panel). Make sure to note down the database credentials, since you need them during the installation (the host is "localhost" in most cases). Sometimes you also have to create a database user and connect them to your database.

Congratulations, after you have set up your web hosting account, you are ready to install IO200.

How to share private albums with friends/clients?

Sometimes you want to share an album (photos) with friends or clients, but the photos should not appear on your website. In this case, you can create a Share Link (hidden secret link), which is a private standalone page not accessible for regular visitors.

Instructions

1. Create a new album in CMS » Photos and upload photos into it.
2. Create a share link for the new album by hovering over "Share" (album edit bar at the top of the album in CMS » Photos) and clicking on "Create Share Link".
3. Share the secret link to the album with your friends. Copy or open the link by hovering over "Shared" in the album edit bar.

Share Links can be adapted by inspecting the link in the website preview or by editing the respective link in CMS » Menu » Hidden Links. The link's template settings allow you to choose a gallery layout, activate/deactivate album downloads, basket (lightbox), and much more. Adapt default template settings for all links on your website in CMS » Settings » Templates.

Hint: Share links can also be created for sets or any other asset. You can also create share links in CMS » Menu. Click on "+ New Link" and select "Share Link (hidden secret link)" as section/type and choose any template to display any asset as share link.

Note: Make sure that the album and photos are not shown by other links (resources) on your website. Set the album to unlisted (Edit Album » Configuration tab), if you have created a link using the Albums template. Set photos in this album to unlisted, if you have created a link with Timeline, Photos, or Tags template.

How to protect client galleries with passwords?

In IO200, albums are not protected by assigning a password to that album but rather by password protecting the link (i.e. the URL) through which that album is published. This enables much more flexible protection scenarios.

Let's assume you have a set containing multiple (client) albums. Your goal is to protect each album in this set with a specific client password. Furthermore, you want to add a master password for general access.

Instructions

1. Publish the set containing (client) albums on your website
   Create a link for the set containing the client albums in CMS » Menu using the Set template. (The published URLs might be as follows: "/clients", "/clients/album1" and "/clients/album2")
2. Create a master password for the set
   Hover over the set link in CMS » Menu and click on the password protection icon (lock). A prompt for creating a password protection appears. Leave the website path input as is (in our example "/clients/*") and choose a password.
3. Protect each (client) album within the set with a password
   Hover over the set link in CMS » Menu and click on the password protection icon again. Select one of your album links from the website path input dropdown (in our example "/clients/album1*") and choose a password in the password protection prompt. Repeat the step for the other albums and for new albums.

The master password ensures that new (client) albums in this set are automatically protected, even if no individual password protection has been created for this album so far. You can manage password protections in CMS » Menu » Password Areas.

Tip: Create sub sets for clients with multiple projects/jobs. Use "/clients/*" instead of "/clients*" for your master protection, if the set overview site with client albums should be visible for all visitors. You can also hide the cover photos of the client albums on the set overview site (set Cover Photo to "none" and choose "grid" as Collection Gallery Layout via template settings).

Hint: If you intend to display both public and password protected (private) albums on your website, we recommend to create at least two sets for your albums. One for all public albums and another for all private albums. You can create links for each set in the menu using the Set template. Subsequently, password protection is used only to protected albums in one set.

Hint: Timeline, Photos, and Tags templates display all your photos and Albums template shows all your albums. Therefore, you want to set password protected album as well as all photos in these album to unlisted, which prevents these assets from appearing on other areas of your website (published by the mentioned templates). However, if you do not use these templates (i.e. create no links for them in the website menu), you are good without using unlisted. Photos that are uploaded to unlisted albums are automatically set to unlisted. For large websites, a second IO200 installation on a subdomain (e.g. www.clients.yourwebsite.com) dedicated to client galleries might be a good option.

How to protect the entire website with a password?

Go to CMS » Menu » Password Areas and create a password protection entry with website path "*" which matches all URLs protecting your entire website.

How to implement a client photo proofing workflow?

This guide explains how to set up a client photo proofing workflow, allowing clients to select their favorite images from a gallery. Once selections are made, the chosen images are reviewed and provided for download.

Prerequisites

Ensure that you have created a website menu link using the "Basket" template in CMS » Menu to enable the basket (lightbox). Tipp: Add the basket link as hidden link and set the page layout to standalone, if you intend to use IO200 solely for photo sharing.

Client Photo Proofing Workflow

1. Photo Proofing Gallery
   
   • Create a new album in CMS » Photos and upload images.
   • Add a share link for this album: Hover over "Share" in the album edit bar. Click "Create Share Link" and activate "Basket" while deactivating "Downloads".
   • Send the share link to your client.
2. Client Selection
   
   • The client reviews the photos and adds their favorites to the basket (lightbox).
   • They submit their selection: Using the basket form to send their chosen images or by sending you the basket link directly.
3. Delivery & Download
   
   • Open the client's email and click "[Select Basket Photos in Admin Panel]" to automatically open the album and select the images in your Admin Panel. Alternatively, paste the basket link into the top search bar in CMS » Photos.
   • Create a downloadable album for the selected photos: Review the client's selection and click "Reverse" to select all but their chosen images. Remove or unpublish the unselected images by hovering over "Actions". Activate downloads for the share link and notify your client. Alternatively, create a new album with the selected images and share a download-enabled link with your client.

Hints: Limit photo preview and photo download sizes or add watermarks in CMS » Settings » Images & Protection. You can reupload multiple photos at once in high resolution by clicking on "Sync" in CMS » Photos. Organize your share albums in sets like "Photo Proofing Albums" and "Download Albums", or arrange them in a nested set hierarchy.

Info: Share links are hidden secret links with a long randomly generated URL that are not displayed in your website's navigation. They can therefore only be accessed by those who have the exact link. For added security, you can protect the link with a password in CMS » Menu » Password Areas.

How to create a blog?

Creating a blog with IO200 is easy:

1. Write one or more articles in CMS » Articles.
2. Create a link in CMS » Menu using the "Blog" template to publish the articles in a blog on your website.

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", "Journal", or "Stories".
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. In some themes the sidebar is hidden. You can also find the link to blog articles at the bottom of respective articles. 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 by edit the link and assigning the section "Hidden link". The blog is still accessible, but is no longer displayed in the navigation.
6. Create a raw link for each blog category by selecting "none (raw link)" as template in the create link modal. Enter the respective category titles and 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 create a photo stream (timeline)

IO200 offers a special template to display a stream of your latest photos (i.e. photo timeline). Just create a link using the Timeline template in CMS » Menu. This template automatically displays all your listed photos sorted by days. Furthermore, the template provides a monthly archive. Another option is the Photos template, which displays all photos in a paged gallery sorted by captured on.

Hint: Photos that are not published or not listed are not shown on your photo timeline. Setting photos as unlisted might be handy, if you do not want photos in password-protected galleries to appear in the photo timeline.

How to add a basket (lightbox)?

You can add a basket (lightbox) to your website simply by creating a link in CMS » Menu with the Basket template.

By default, "Add to basket" buttons will appear on all photo sites (deactivate in CMS » Settings » Photo). You can activate "Add to basket" buttons on photos in albums in CMS » Settings » Album ("Basket Actions"). As with all Template Settings, you can adapt these settings for each link locally: Edit the link and go to the "Template Settings" tab or edit the link template settings in CMS » Inspect (Actions » Edit Settings).

By editing the basket link you can further adjust the appearance of basket icons on photos in albums (e.g. symbol type) and the basket link appearance in the navigation of your website (display icon instead of link title, adapt counter, ...).

How to link photo tags and albums on photo sites?

Create a link (resource) with "Tags" template. After that, all photo tags on photo sites are automatically linked. The "Tags" link can also be created as hidden link, if you don't want to display it in your navigation menu. The same applies for listed albums on photo sites using the "Albums" template.

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 » Code Injection.

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 another language file and replace it on your webspace.
So far, the following translations are available as download: English, German, French

1. Download the language file ("/storage/system/lang.php") from your FTP.
2. Open the file in an editor such as Notepad and edit it. For example search for "basket_addtobasket" and replace "Add to basket" with "Add to lightbox".
3. Save the file and reupload it to your FTP ("/storage/system/").
4. Perform an action in the admin (e.g. editing a photo) to reset the website cache.

Hint: System updates may add new content to the language file.

Hint: The language file does not change the translation of the Admin Panel but the website. However, you can use your browser to automatically translate the admin interface. Input and text fields within the admin interface will not be affected.

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 credentials (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 a SSL certificate for your domain, you have to adapt the WEBSITE_URL setting in the config file ("/storage/system/config.php").

1. Download the config file ("/storage/system/config.php") from your FTP.
2. Edit the file and replace "http://" with "https://" (e.g. "http://www.yourwebsite.com" with "https://www.yourwebsite.com").
3. Reupload the config file to your FTP.

Move installation to another domain

Copy all files and folders of your current installation to your new webspace. Check file and folder permission (chmod 755 for folders and chmod 644 for files).

Edit the config file ("/storage/system/config.php") and adapt the WEBSITE_URL setting to represent your new URL. You also have to adapt the database settings in the config file, if you are using another database.

Log in at your CMS and clear the website cache in Administration » Info.

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 Administration » Info.

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 Administration » Info.

How to create a backup of my IO200 installation?

You can easily create a backup of your IO200 installation as follows:

• Database Backup - Login at your database administration (usually phpMyAdmin) and create a backup of all database tables (phpMyAdmin: select database and then click on “Export” tab).
• Webspace Backup - Login to your webspace via FTP and download all IO200 files of your IO200 installation to your pc. Before, you should login into Admin Panel (CMS) and reset the image cache (Administration » Info).
  Hint: Original photo files are stored in "/storage/originals/" and settings are stored in "/storage/system/".

You can then easily restore the website after a server crash by reuploading the downloaded files to your webspace and by reimporting the database tables. Follow the instructions of the manual installation, if some settings like your database password have changed.

How to run IO200 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 and HTTP:Authorization are not mandatory for running IO200. The following NGINX directives (i.e. configuration options) are required for IO200:

error_page 404 /error404;
location / {
   rewrite ^/$ /index.php break;
   if (!-e $request_filename){
      rewrite ^(.*)$ /index.php?path=$1 break;
   }
}

Example for nginx with fastCGI (PHP-FPM)
location / {
   rewrite ^/$ /index.php;
   try_files $uri @phpproc; # check for physical file, otherwise call @phpproc alias
}
location @phpproc {
   rewrite ^/(.*)$ /index.php?path=$1;
}
location ~ \.php$ { ## FPM-PHP config
    ## your config ...
}

Where can I submit feature requests?

You can always drop us a message about your feature request. We are always looking for new ideas to improve and extend the software. However, we cannot guarantee the implementation of each feature.

Troubleshooting

• Photos (thumbnails) are loading slow/not shown on my website!
• Photos are looking flat or are having wrong colors (missing color profiles)!
• Corrupt photo files with grey stripe at bottom!
• Photo uploads are not working!

• Website/Admin Panel is loading slow!
• System does not send emails!
• "Form is not secure" message when logging in at Admin Panel!

• Error 403 (Access Denied) during automatic installation!
• Error 503 (Service Unavailable) when loading my website!

You are always welcome to contact our support, if you can not find the problem in the documentation or fix a problem by yourself.

Photos (thumbnails) are loading slow/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 and are cached on your server once generated. Please note, however, that different thumbnails (image sizes) are displayed depending on the screen size and resolution (DPI) of the client.

Sometimes, large photos/thumbnails take a long time to be generated or cannot be generated at all 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 or to speed up the thumbnail generation process:

• Upload photos in smaller resolution (less megapixel) into the CMS
  (max 2400px on long edge recommended)
• Upload photos in higher compression into the CMS
• Reduce the maximal image size for photos on your website (CMS » Settings » Images & Protection)
• Check if your webspace has sufficient disk space
• Check if access to "/storage/cache/" folder is allowed by your webserver (exclude 403 forbidden error)

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

Note: Usually, it takes less than a second to create a thumbnail from a 2400 pixel wide original file on fast servers. However, it may take several seconds (up to 10 seconds) on slow servers, especially if multiple thumbnails are generated at the same time. Thumbnail generation failed, if the photo is not shown after 30 (max 60) seconds and reloading the site. Again, subsequent visitors will not experience such a long loading time, since each thumbnail needs to be generated just once.

Note: Keep in mind, that image thumbnail generation is a computing intensive process. You only need to reset your image cache, if there are corrupt images. Cache images for reuploaded photos will be automatically regenerated.

Photos are looking flat or are having wrong colors (missing color profiles)!

Check in your Admin Panel, if Imagick is available as image processing library (Administration » Info » System Info). In contrast to GD, Imagick can work with color profiles. Contact your webhoster, if Imagick is not available as PHP extension; install the extension when you are running the server by yourself.

Make sure to convert your photos in sRGB standard colorspace, which is the defined standard colorspace for the web, if colors are still shifted or Imagick is not available. Uploading photos in sRGB standard colorspace ensures that photo colors are correctly displayed on all devices.

Info: We observed that colors of Imagick generated photos are slightly better matched than those of GD generated photos. Therefore, Imagick is choosen preferably by IO200, if both Imagick and GD are available on your server.

Photo uploads are not working!

1. Check if you get an error message after uploading photos hinting to the underlying issue.
2. Check the system info table for errors or warnings in your Admin Panel (CMS » Administration » Info).
3. Check if photo uploads are working with smaller photo files (less than 0.5 MB).
4. Check file permissions (chmod 755 for folders and chmod 644 for files) on your websapce using cPanel, FTP, or SSH.

Website/Admin Panel is loading slow!

IO200 is one of the fastest systems ever built for creating portfolio websites. Thereby, different types of caches like site cache (generated HTML sites) and image cache (generated photos and thumbnails) as well as optimized image serving techniques are used to speed up loading times. Consult your webhosting provider, if you experience issues with page loading speed. You might consider changing your webhosting plan to get a faster server. Another option could be to only upload photos with a maximum length of 2400px on the long edge.

Corrupt photo files with grey stripe at bottom!

Check if original photo files are also effected. You can view the original file by editing the photo in the Admin Panel and clicking on [view]. Use SFTP instead of FTP to upload files to your server.

System does not send emails!

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

• Website forms (e.g. contact form): Check Website Email in CMS » Settings » Inspect & SEO (alternatively in site settings file "/storage/system/sitesettings.json").
• Admin Panel (e.g. password reset): Check your login email address in CMS » Administration » Account (alternatively in user file "/storage/system/user.json").

Try to change your email to an address whose domain is the same as that of your website (e.g. if your website domain is yourwebsite.com, use mail addresses like info@yourwebsite.com or contact@yourwebsite.com rather than yourname@mailprovider.com).

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? Why is php's mail() function not working?") or google "php mail {yourwebhostersname}".

Note: Sending emails may not work despite a success message in the contact form.

"Form is not secure" message when logging in at Admin Panel!

You will receive a "form is not secure" or "the information you’re about to submit is not secure" message, if your domain is on SSL and your WEBSITE_URL setting starts with "http://" instead of "https//". Follow the instructions in Move installation from http to https to fix the problem.

Error 403 (Access Denied) during automatic installation!

Same webservers might scan your form inputs for sensitive data like database passwords and deny access in such cases. Check your webserver's security settings or excecute the manual installation instead.

Error 503 (Service Unavailable) when loading my website!

Error 503 (Service Unavailable) indicates that your server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Consult your webhosting provider, if you experience this error.

Customization

• Custom Themes
• Custom Templates (Plugins)

Introduction

Custom Themes

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

Tip: We recommend to import /res/style/_base.css to new themes, which contains all basic CSS styles for galleries, blog, etc. except the website layout.

Do you want a custom theme but you cannot do it by yourself?
Just contact us. We are happy to make you an offer.

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, change behaviour, 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 for panoramas, a list of all your photos, a custom landing page, a shop integration, or a custom contact form?

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

Do you want a custom template but you cannot do it by yourself?
Just contact us. We are happy to make you an offer.

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

Note: Keep in mind that these .custom.php files will not receive future updates. It's a good practice to comment or mark all changes in these files. After updates, you should check if there are any (new) differences to the updated original template file.

Developing a new 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 website site cache in the Admin Panel after adapting a (custom) template. The website site cache will be automatically reseted, if you edit any asset (i.e. update a photo) or update the website settings (click on "Update" in CMS » Settings). You can prevent site caching for any template by including "$DATA['SETTINGS']['SITECACHING'] = false;" within the template (i.e. if you want to display dynamic/random content).

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');

Hint: Some content will be printed by CmsOutputService and CmsTagReplacementService classes. Create a derived class and override the desired functions to change the behavior. After that, initialise the new derived class (e.g. "$CmsOutputService = new DerivedCmsOutputService($DATA, $LINKS);").

Creating a link for a (new 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.

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