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 and follow the steps during the installation.
  2. Getting started

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.


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. File permissions: chmod 755 for folders and chmod 644 for files. You can change file and folder permission either through cPanel, FTP, or SSH.
    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", ... }
    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 in 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". 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 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. 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". 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 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 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").


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,
      • CTRL+A selects all photos.
      Pressing the delete key, deletes the selected photo(s).
    • Search photos by different attributes by selecting the corresponding sort attribute. Search in all photo attributes by starting your search with "*" (e.g. "*landscape"). 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 photo to reset 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 » 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/Pages/Link 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 [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 (Mac OS). 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. Or 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 to automatically add those photos to an album. Create a link in your menu to display the album on your website.

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.

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

  • 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 - video from YouTube or Vimeo
  • local_police Hero Banner - prominent web banner with title, text, link and photo
  • view_module Asset Links - latest/featured/random photos/albums/articles
  • image Custom Image - custom image from your FTP or external URL

Hint: You can add any valid HTML in raw HTML mode including Javascript and CSS sections.
Hint: 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).

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 "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 (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", and then on "FTP Folder Synchronization".
  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] sync folders as (nested) collections (+x collections, -x collections),
    • [x] sync photo folder locations as album photo relations (x albums).
  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 click on "Webhook". Copy the URL displayed. 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).

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.
  • 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.
  • Album photo relations can be updated without importing the FTP folder structure. In this case ("Sync Collection" is not present) folders and albums are matched by folder name and album slug (i.e. folder "/storage/sync/Set 1/Album 1" is matched with album slug "set-1-album-1" if available).
  • 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.). IO200 allows you to automatically import this data.

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

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

There are two types of templates available: Templates that automatically grant access to all assets of a certain type (Photos, Albums, Tags, Timeline, and Blog templates) and templates that only grant access to a specific selected asset (e.g. Set, Album, Page, ... templates).

Unpublished assets are never shown on your website. 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).

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-y5hpsjo2fbzu"). Hence, only someone who knows the URL of the link will be able to access it.

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.

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

Template Name Info Asset Type Resource URLs
none Displays a plain text or link. The link URL can be relative or absolute. - -
Album Displays the selected album. Album /{LINK_PATH} OR /{LINK_PATH}/{page_number}
Set Displays the selected set with links to all nested collections (sets and albums). Set /{LINK_PATH}
/{LINK_PATH}/{set_slug} OR /{LINK_PATH}/{set_slug}/{page_number}
Page Displays the selected page. Page /{LINK_PATH}
Timeline Displays a stream of (latest) listed photos. - /{LINK_PATH} OR /{LINK_PATH}/{page_number}
/{LINK_PATH}/{yyyy}/{mm}
/{LINK_PATH}/{yyyy}/{mm}/{dd}
Blog Displays a blog with articles and comments. - /{LINK_PATH}/{page_number}
/{LINK_PATH}/year/{yyyy}/{page_number}
/{LINK_PATH}/tag/{tag_slug}/{page_number}
/{LINK_PATH}/category/{category_slug}/{page_number}
/{LINK_PATH}/archive
/{LINK_PATH}/article/{article_slug}
Albums Displays all listed albums and links albums on photo sites. - /{LINK_PATH}
/{LINK_PATH}/{album_slug} OR /{LINK_PATH}/{album_slug}/{page_number}
Photos Displays all listed photos with a search form. - /{LINK_PATH} OR /{LINK_PATH}/{page_number}
/{LINK_PATH}/search/{query} OR /{LINK_PATH}/search/{query}/{page_number}
Tags Displays listed photos by tags and links tags on photo sites. - /{LINK_PATH}
/{LINK_PATH}/{tag_slug} OR /{LINK_PATH}/{tag_slug}/{page_number}
Basket Displays a basket (lightbox) where visitors can collect photos and send an inquiry or share with friends. - /{LINK_PATH}
Contact Displays a page with a contact form. - /{LINK_PATH}
Start Showcase Displays a page with a random photo or a photo slideshow. Perfect as start page for welcoming visitors. - /{LINK_PATH}
Start Landing Displays a page with a full size photo slideshow. Perfect as landing page for welcoming visitors. - /{LINK_PATH}
Site Displays a simple site with the link's Custom HTML and CSS. - /{LINK_PATH}

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.

Website Theme and Settings

You can change the website theme in CMS » Settings » Website Theme. Just select a theme and click on the button "Change Theme". Themes can be customized using Custom CSS (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. You can inject code into the top and bottom of your website 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), "Website Meta Description" can be edited in CMS » Settings » Website Publishing. Social media links can be defined in CMS » Settings » Social Media Links.

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.


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. 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 (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-y5hpsjo2fbzu"). 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.

  » FAQ: How to share private albums with friends?

Hint: Make sure that private assets are not shown by other links (resources) if you intend to keep them private. Timeline, Photos, and Tags templates show all your photos and Albums template shows 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.


Album/Photo Downloads

You can activate photo downloads in albums in CMS » Settings » Album Settings and on photo sites in CMS » Settings » Photo Settings. Like all template settings, these settings can be overwritten for each individual link. In case of album downloads, visitors/clients can select specific photos before starting the download or download the whole album at once. 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 album's 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 » 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.

Photo Download Protection

You can activate photo 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]
# original image: forbid offsite linking (optional)
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]

Note: By default, original and cache images are stored in random subfolders such as "/cd/af/0c". Thereby, the same photo has different random subfolders for original and cache images/thumbnails. The default subfolder depth of 3 (6 characters total) results in 256^3 = 16.777.216 combinations just to guess the path of an image. Even for images with short filenames (e.g. 4 characters), there are more than 34 trillion combinations (256^3 * 38^4). Therefore, it is almost impossible for someone to access an image, if the path is not known (as with original images or unpublished images). In addition, the system will automatically stop serving new images for some time, if there are too many unauthorized requests within a short time.
Subfolder depth can be adapted for original and cache images in the configuration file ("/storage/system/config.php") by changing CMS_ORIGINAL_IMAGE_SUBFOLDERDEPTH and WEBSITE_CACHE_IMAGE_SUBFOLDERDEPTH settings. The value should not be greater than 8, as a subfolder depth of 4 already results in more than 4 billion combinations (256^4). You may only change these settings for new installations or if there are no photos uploaded in the system.

Video Linking

Photos can be linked to YouTube or Vimeo videos (edit the photo and go to the "Video Link" tab). If a photo is linked to a video, the corresponding video is embedded instead of showing the photo in the following cases:

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

Custom CSS

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 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. 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), Atkinson
Website font: Merriweather, Space Mono, Lora, Courier, IBM Plex Mono, Quattrocento Sans + Ovo (headings), Montserrat, Roboto Slab, Nunito Sans

Custom CSS for adapting the website

Website background color

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

Website font size and font family

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

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 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, header nav > ul > li > span: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%;}}

Hide Sublinks in mobile navigation:

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

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:

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

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 aligning 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.photo{aspect-ratio:1/1;object-fit:cover;} /*aspect-ratio:3/2;*/ ul.gallery.layout-grid li div.photo-wrapper.photo-portrait{width:100%;}

Full width portrait photos in grid layout

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

Hide 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 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 menu. The same applies for albums using the "Albums" template.

How to share private albums with friends?

Sometimes you want to share an album (photos) with friends, but the photos should not appear on your website. In other words, the album should be private and not accessible for regular visitors. In this case, you can create a Share Link (hidden secret links) for this album.

  1. Create a new album in CMS » Photos and upload photos into it.
  2. Make sure that this new album and photos are not shown by other links (resources) on your website. Therefore, you have set the album to unlisted (Edit album » Configuration tab), if you have created a link using the Albums template. And photos must be set to unlisted, if you have created a link with Timeline, Photos, or Tags template.
  3. Create a share link for the new album in CMS » Menu (select "Share Link (hidden secret link)" as section/type)
  4. Share the link with your friends. You can copy the URL of this link by hovering over the link and clicking on "copy link".

Hint: You can also use share links for other content like Set or Page links.

How to protect the entire website with a password?

Go to CMS » Settings » Password Protection and just enter the string "*" which matches all URLs protecting your entire website.

How to protect client galleries with passwords?

You have granted access to a set containing multiple client albums by creating a link using the Set template. 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.

Let's assume the URLs are as follows: "/clients", "/clients/album1" and "/clients/album2". You can protect the albums in CMS » Settings » Password Protection as follows:

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

In this example, the URL "/clients/album1" is protected by two password protection rules (string "/clients/album1" and regex "/^\/clients\/.*$/i"). Therefore, this URL can be accessed with both associated passwords. Furthermore, all future albums that you are going to add to this set (new clients), are already protected by the master password. A new album can only be assessed by your new client (or someone else), if you create a "second" password protection specifically for this new album (URL) and share it with your new client. Create sub sets for clients with multiple projects/jobs.

Hint: If you intend to show 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 show all your photos and Albums template shows all your albums. Therefore, you want to set the password protected album as well as all photos in this album 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. 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 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. 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 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 anther language file and replace it on your webspace ("/storage/system/lang.php"). After replacing the language file, perform an action in the admin (e.g. editing a photo) to reset the website cache.
So far, the following translations are available as download: English, German, French

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

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

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 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 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, 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;
   }
}

Example for nginx with fastCGI (PHP-FPM)
location /admin {
   rewrite ^/admin/api/(auth|cms|site|service)/([A-Za-z0-9_:/]+)$ /admin/api/$1.php?request=$2;
   rewrite ^/admin/([a-z]+)$ /admin/$1.php;
   rewrite ^/admin/$ /admin/index.php;
}
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 ...
}

Troubleshooting

You are always welcome to contact our support, if you can not fix a problem yourself.

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.

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.

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!

Make sure to convert your photos in sRGB standard colorspace, which is the defined standard colorspace for the web. Use Bulk Photo Update, if you need to reupload all your photos.

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 » Website Publishing (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}".

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

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.

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

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 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 Website Publishing" 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);").

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.

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