Cielito Lindo Productions

Discovering the beauty of God's creation | Die Schönheit von Gottes Schöpfung erkennen

One piece contains 2 greeting carts. Eine Einheit enthält 2 Karten.
All prices including VAT, alle Preise inklusive MwSt.
Additional shipping costs, zusätzliche Versandkosten:
  DE: 2,75€ (excl VAT)
  AT and CH: 5,00€ (excl VAT)

item(s) -
Next | Weiter
Empty Cart | Einkaufswagen leeren

Please enter your mail address to which you would like to send the greetingcard selection:
Bitte geben Sie die Mail-Adresse ein an die Sie die Auswahlliste senden möchten:

Send list |
Liste versenden

Close | Schließen

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