Cielito Lindo Productions -

Discovering the beauty of God's creation | And it was very good - Und siehe es war sehr gut

Enable Multi-language support on a koken site

Recently I was looking for a way to add to my koken site the possibility to change between different languages. I found a plugin but in order to use it it is necessary to change quite a few files in the server php code - not bad but difficult to maintain.

A different approach was to translate the content directly on the client side - the browser. One framework I found was i18next. With i18nextify they offer a way to add easily translations to any page. So I wrote a small koken plugin that integrates i18nextify. You can find it here.

It automatically detects the language of the browser and selects the appropriate translation of your text, additionally you can add a language selector to your theme

Furthermore the plugin offers the possibility to save the translation files in the browser of your visitor and therefore avoid retrieving them from the server on every page reload.

The Readme on github describes how to get everything set up.

If you want to bring things a bit further you can think about using a translation management system. This is (in most cases an online) platform on which you upload your translation files and translate your content in a nice dashboard rather than editing json files in a text editor locally on your computer. With them you can also easily add new languages.

Some translation systems that you could give a try are the following:

  • They offer 1000 strings for free (if you translate 1 string into 3 languages this actually counts as 3 strings)
  • They offer 500 strings for free - no matter into how many languages you translate
  • They are not for free but tie together very nice with i18nextify as both are made by the same people

Hint: Please note that this plugin is about translating what your site visitor sees - not about translating the admin dashboard.

Use Koken with a Content Delivery Network (CDN) - Part2

If you like to try Koken with a CDN but are looking for a free service (*) you might run across 2 companies: CLOUDFLARE and incapsula (although incapsula doesn't support SSL in the free version).

In order to include CLOUDFLARE CDN into your Koken page the following steps are required:

  • Deactivate any CDN plugin inside your Koken-installation if you have it activated
  • Sign up on the cloudflare page
  • Add the url of your webpage on the dashboard and wait until cloudflare analyzes your page
  • On the next page make sure that everything except your koken page is marked to bypass the cache (only and www should be cached via cloudflare, your mail traffic (imap, pop, pop3, smtp) should not be cached)
  • Select a plan: CLOUDFLARE offers a free plan eg. for private blogs
  • Once you click on the next page button you'll be asked to log-in to your webspace-provider and change your current namespace server to the one of cloudflare. Once you do so cloudflare will apply the settings. (Please make sure to change the namespace server only for the domain of your koken-installation and not also for other ones you own.)
  • Next you need to set up a page rule. Add as URL eg.* and as property "Cache Level: Cache Everything". After that all requests that users make on your page will be routed through the namespace server of cloudflare. Webspace (per default only images, no html code) traffic will be cached, e-mail and other traffic will be sent directly to your "own" webspace.
  • It might be necessary to tell cloudflare to not cache the admin-area of koken so that it works properly (otherwise eg. you might not see update notes for new releases). To do so add a page rule in the dashboard: Add eg. as url and set the cache level to Bypass.
  • After some days go to your dashboard and check that on the Analytics tabs the "Cached Requests" are not 0 as otherwise your Cache is not set up properly. Certain pages that offer website speed measurements also mention if code is served through a CDN, so that would be another option to verify your setup.
  • Please be aware that if you are running a statistics tool within your domain that then inside the statistics tool the locations/countries of the cloudflare servers instead of those of your page visitors will show up. This is due to the fact that CLOUDFLARE is a reverse proxy. There are several ways to fix this: Please check eg. this CLOUDFLARE support site, a second support site or the Piwik help.

If you use a shared certificate on your koken-installation it will be passed automatically to CLOUDFLARE.

That's it - you should be done now. ;-)

Please also check my other blog post about CDN here
(*) There are also plenty of other companies that offer CDN services but with a cost like SecureCDN (formerly MaxCDN), Coral, HostEurope, Cloudtront.

Cielito Lindo Productions - Behind The Scenes

If you've ever been wondering how the pictures on this page were made: They were shot with a Panasonic Lumix DMC G-5 and the following lenses:

  • Vario Lense (Kit Lense) 14-42mm
  • Tele Zoom Lense 45-200mm
  • Fixed Focal Length Lense 25mm f1.7

The camera and the lenses are part of the Micro Four Thirds standard. Micro Four Thirds Photography is relatively new - the standard was originally released by Panasonic together with Olympus in 2008.

Koken and Piwik - tips on how to improve your setup

There are quite a few tutorials out there about how to integrate the open source analytics tool Piwik (which is in my opinion a pretty good alternative to Google analytics) into Koken and they are working fine.

Unfortunately they have the disadvantage that you can't see how much time a user spends on your site unless he moves between different pages. Instead of the specific time in your Piwik statistics you can only see a visiting time of 0 seconds in these casepleases.

But there's a trick on how to improve this. Just add the following line to your Piwik tracking code:


This line sends a heartbeat to Piwik so that Piwik knows that the visitor is still viewing the site. Per default the heartbeat is sent every 15 seconds.

In order to change this time just add instead the following line:

_paq.push(['enableHeartBeatTimer', 30]);

So as a summary the whole setup would be the following:

1. Open the admin panel of your koken installation

2. Go to the Store tab and install the HTML Injector plugin

3. Go to Settings -> Plugins page and click on the Edit button of the newly installed plugin

4. In the bottom area paste the code that you can find on your Piwik administration page under "Tracking code"

5. Add the above mentioned heartbeat-code under the line that includes the word "trackPageView" Please click here for a complete code sample or check the following screenshot.

6. (optionally) Open the developers view of your browser (or eg. Firebug on Firefox). Now on the network tab you should see that the Piwik code is reloading every eg. 15 seconds

8. Go to your Piwik installation page and check that your own visit now shows the real time

Please see this link if you wish more information about the Piwik heartbeat funtion.

Use primitive library for showing images in a different way - part 2

The library primitive.js is now also available as an electron application called primitive.nextgen

Electron is a way of building cross-plattform applications. The languages that are used are the well known HTML, JavaScript and CSS. This means that you can use one code basis for a program running on Windows, Linux and OS X (Mac).

Although there's still much that can be improved you can already give primitive.nextgen a try by checking the github repository.

Use primitive library for showing images in a different way

I'm using the image libraries primitive.js / for showing images in a different way.
What the libraries basically do is reading images and recalculating them using triangles, circles, rectangles...

You can find more information about the libraries on the following pages: and

Credits for the libraries go to Ondřej Žára and Michael Fogleman. Please see the licenses on the respective pages.

In order to see the images please go to the masterpieces album.

Improve user experience on smartphones

If you want to improve user experience on smartphones then you might think about using the Photoswipe library. This enables swiping through the images (once you click on one to open the gallery), furthermore it preloads images so that when the user swipes to the next image it is already there. This makes him feel as if the photos were stored on his local device.

For Koken there already exists a plugin on github. Just download, unzip and load into the /storage/plugins folder of your Koken installation. Then enable it over the Koken admin page and that's it.

For more infos ab about the plugin please check here.

Use Koken with a Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a network of servers distributed over the whole world. They mirror the page content of your Koken page. This has one big advantage: Let's take for example that your hoster sits in Europe and a possible visitor from Australia connects to your site. Without a CDN all the files (and especially the heavy images) would need to go all the long way from Europe to Australia which would result in a long waiting time for the user until the data arrives on his device.

This scenario can be improved by using a CDN. This stores the images on the CDN-servers. So if the CDN fe. has a server in Australia (or at least closer than Europe) then the Australian user gets the images from the Australian server which is obviously faster.

I've been using myself KeyCDN and been quite satisfied with them. They have a 30-day trial period so you won't loose anything on trying them out. But be aware that once this time expires they stop delivering and then you won't have any images anymore on your page. (update: this is not completely true as then images will still get delivered from your own koken homepage)
It only took minutes for me to get everything set up and the difference in image load speed is really notable comparing the page with and without CDN. (although I didn't make any measurements yet).

So what I did in detail is:
- Create an account on and log-in
- Create a new zone; in the settings assign a name, and make sure that Zone Status is "active" and the Zone Type is "Pull". In the field Origin URL enter the url to your koken-page (let's say for this tutorial)
- Get the Koken CDN plugin from github
- Unzip it and upload it to you Koken-installation via FTP (make sure to get the following folder structure fe. koken/storage/plugins/koken-plugin-cdn-master/plugin.php)
- In your Koken admin panel go to Settings -> Plugins and enable the plugin (CDN for images). Perhaps you need to wait a bit or reload the page until the plugin appears.
- Go into the setup of the CDN-plugin and enter the zone URL that you got assigned from keyCDN (fe.
- Leave all the check boxes selected unless the first one and wait.
- Go to your homepage and make sure that everything is working correctly. You should already see that the images are loading faster now. In your KeyCDN admin-panel under Reporting -> Analytics you can see under "Cache Hits" what percentage of files is served by the CDN.

Note: There are more explanations about the used plugin here. It suggests some preparation steps before enabling the CDN. I didn't do any of these, my page and CDN are working without them. (The only thing I did is adding KeepAlive - please see my other blog post on this)

There's still another tweak that you can apply to your Koken and CDN setup. If you load your page you probably noted in the lower part of your browser that your page connects to fe. You can change this in order to state "connecting to". To do so follow these steps:

- In your KeyCDN add a Zonealias. As Alias enter fe. and as zone select the previously created one.
- Login into your webserver admin panel and go to the DNS settings page.
- Add a CNAME entry, fe 120 IN CNAME
- Wait at least 5 minutes until the changes apply globally.
- If you want to check the DNS you can do this with a tool provided by KeyCDN. You can find it here

KeyCDN even lets you add a certificate for your CDN (fe. a Let's Encrypt certificate). So if your page is accessed via https then the user gets a valid certificate. Please be aware that after configuring the certificate you need to recreate the zonealias.

If you later on buy a signed certificate for your koken page and decide to automatically redirect all your visits on http to https then you will also need to update in your KeyCDN the zone name from to

Improve Koken performance

You can improve your Koken site performance by making sure that KeepAlive is enabled. KeepAlive is a webserver feature that allows the transmissions of several files at the same time and not one after another. For this you could edit either your webserver config (fe. apache or nginx) or just add the following lines to your .htaccess in the root-folder of your Koken-installation.

You can find more info about KeepAlive here