# Adaptive-Images Installationsanweisungen

## Basis Anweisungen

Kopieren Sie `adaptive-images.php` und `.htaccess` in das Hauptverzeichniss ihres Internetauftritts. Wenn Sie bereits eine htaccess Datei haben BITTE NICHT ÜBERSCHREIBEN, lesen sie die dafür vorgesehenen Instruktionen.

Erstellen Sie ein Verzeichniss mit dem Namen `ai-cache` im Hauptverzeichniss mit Schreibberechtigung (CHMOD 777).

Kopieren Sie folgendes Javascript in den <head> Bereich ihrer Seiten. Das Script MUSS sich im head Bereich befinden damit es ausgeführt wird bevor die gesamte Seite geladen ist und die ersten Bilder vom Server ausgeliefert werden.

    <script>document.cookie='resolution='+Math.max(screen.width,
    screen.height)+'; path=/';</script>

Das wars. Sie sind fertig

ANMERKUNG: Die `ai-cookie.php` Datei wird normalerweise nicht benötigt. Nur beim Einsatz der Alternativen Methode zum Feststellen der Displaygrösse wird sie benötigt ansonsten kann sie gelöscht werden.

## Sie haben bereits eine .htaccess Datei

Sichern Sie bitte diese Datei bevor Sie Änderungen daran vornehmen.

Öffnen Sie bitte ihre bestehende .htaccess Datei und editieren Sie den Inhalt. Suchen Sie nach einem Abschnitt suchen der so beginnt:

`<IfModule mod_rewrite.c>`

Sollten Sie ihn gefunden haben kopieren Sie folgenden Code in den Bereich:

    # Adaptive-Images -----------------------------------------------------------------------------------

    # Add any directories you wish to omit from the Adaptive-Images process on a new
    line, as follows:
    # RewriteCond %{REQUEST_URI} !some-directory
    # RewriteCond %{REQUEST_URI} !another-directory

    RewriteCond %{REQUEST_URI} !assets

    # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above
    directories
    # to adaptive-images.php so we can select appropriately sized versions
    RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

    # END Adaptive-Images -------------------------------------------------------------------------------

Gibt es keinen solchen Abschnitt in ihrer Datei kopieren Sie stattdesen folgenden Code in die Datei:

    <IfModule mod_rewrite.c>
      Options +FollowSymlinks
      RewriteEngine On

      # Adaptive-Images -----------------------------------------------------------------------------------

      # Add any directories you wish to omit from the Adaptive-Images process on a
      new line, as follows:
      # RewriteCond %{REQUEST_URI} !some-directory
      # RewriteCond %{REQUEST_URI} !another-directory

      RewriteCond %{REQUEST_URI} !assets

      # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above
      directories
      # to adaptive-images.php so we can select appropriately sized versions
      RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

      # END Adaptive-Images -------------------------------------------------------------------------------
    </IfModule>

## Weitere Einstellungen

### .htaccess

Anweisungen sind in der Datei als Kommentare enthalten (alle Zeilen die mit # beginnen sind Kommentare und werden nicht ausgeführt)

Folgen Sie den Anweisungen im Code um Verzeichnisse die nicht mit Adaptive-Images benutzt werden sollen einzutragen.

### PHP

Sie können die PHP-Datei öffnen und die Einstellungen im CONFIG Bereich ändern. Die Standardwerte sehen so aus:

    /* CONFIG ----------------------------------------------------------------------------------------------------------- */

    $resolutions   = array(1382,992,768,480,320); // Die Auflösungsschritte für die Bilder erzeugt werden (Bildschirmbreite in Pixel)
    $cache_path    = "ai-cache"; // Wo die verkleinerten Bilder gespeichert werden.  Der Ordner muss beschreibbar sein.
    $jpg_quality   = 80; // Die Qualität der erzeugten JPGs 0 bis 100
    $sharpen       = TRUE; // Verkleinerte Bilder verlieren an Schärfe, bei TRUE werden die Bilder geschärft
    $watch_cache   = TRUE; // stellt sicher das neu hochgeladene Bilder neu verkleinert werden
    $browser_cache = 60*60*24*7; // Die Zeit in Sekunden für den BROWSER cache (Standard 7 Tage)
    $mobile_first  = TRUE; // Ist kein Cookie vorhanden wird zuerst die mobile Version gesendet (wenn FALSE, wird das grösste Bild gesendet)

    /* END CONFIG ----------------------------------------------------------------------------------------------------------
    ------------------------ Verändern Sie nichts nach dieser Zeile wenn Sie nicht wissen was Sie tun -------------------------
    --------------------------------------------------------------------------------------------------------------------- */

`$resolutions` sind die Bildschirmauflösungen mit denen gearbeitet wird. Als Standard werden verkleinerte Bilder für grosse Bildschirme, normale Bildschirme, Tablets, Smartphones, und Handys gespeichert.

Im allgemeinen, wenn Sie die CSS Methode nutzen, werden diese Auflösungen dieselben wie in den 'media queries' sein.

`$cache_path` Der Pfad in den die Bilder zwischengespeichert werden. Er kann beliebig geändert werden. Der Pfad wird hier eingetragen und es muss sichergestellt sein das er auf dem Server existiert.

`$sharpen` Die bilder werden nach dem Verkleinern geschärft. Normal funktioniert das gut sollte ihr Server sehr sehr ausgelastet sein kann es hier abgeschaltet werdn. .

`$watch_cache` Bei Performanceproblemen ihres Servers kann diese Option abgeschaltet werden. Sollten Sie allerdings ihre Quell-Bilder ersetzen müssen Sie den Cache Ordner manuell leeren.

`$mobile_first` Wenn TRUE und kein cookie ist gesetzt, sendet Adaptive Images Bilder in der 'mobilen' Auflösung. Wenn FALSE gesetzt ist werden die am höchten aufgelössten Bilder gesendet.

## Alternative Methode ohne JavaScript

Eine Schwäche von Adaptive Images ist das JavaScript zum Erkennen der Bildschirmgrösse des Besuchers benötigt wird. Im folgenden wird eine Methode ohne Javascript gezeigt. Diese Methode funktioniert unter Vorbehalt wird allerdings vom Autor nicht empfohlen und nicht unterstützt.

### Die alternative Methode

Benötigt kein JavaScript stattdessen aber, muss ÜBER ihrem normalen CSS, folgende Zeilen eingefügt werden:

    <style>
     @media only screen and (max-device-width: 479px) {
       html { background-image:url(ai-cookie.php?maxwidth=479); } }
     @media only screen and (min-device-width: 480px) and (max-device-width: 767px) {
       html { background-image:url(ai-cookie.php?maxwidth=767); } }
     @media only screen and (min-device-width: 768px) and (max-device-width: 991px) {
       html { background-image:url(ai-cookie.php?maxwidth=991); } }
     @media only screen and (min-device-width: 992px) and (max-device-width: 1381px) {
       html { background-image:url(ai-cookie.php?maxwidth=1381); } }
     @media only screen and (min-device-width: 1382px) {
       html { background-image:url(ai-cookie.php?maxwidth=unknown); } }
    </style>

Wenn Sie diese Mehode verwenden müssen Sie sicherstellen das die verwendeten Bildschirmauflösungen dennen in Ihrer adaptive-images.php Datei entsprechen, Sie benötigen zudem die `ai-cookie.php` Datei im Hauptverzeichniss ihres Internetauftritts. (ansonsten wird diese Datei nicht benötigt).

### Der Vorbehalt

Benutzen Sie diese Methode anstatt JS ist es möglich das besucher bei ihrem ersten Besuch ihrer Seiten, die original hoch aufgelössten Bilder gesendet bekommen. ALLE Seiten ihres Auftritts werden wie vorgesehen funktionieren. Das bedeutet allerdings das Sie die Option $mobile_first auf FALSE setzen müssen. Ansonsten werden die meisten ihrer Besucher feststellen das die angezeigten Bilder, bei ihrem ersten Besuch zu klein dargestellt werden. Otherwise, the majority of people who

Der Grund dafür ist die Reihenfolge wie Browser Internetseiten verarbeiten. Als erstes wird das HTML geladen, und in der Reihenfolge wie es geschrieben wurde abgearbeitet. Das eingebettete JavaScript wird sofort ausgeführt und erzeugt das Cookie. Danach werden Bilder in der Reihenfolge ihres Auftrettens geladen. das heisst werden die ersten Bilder vom Server angefordert ist das Cookie mit der Bildschirmgrösse bereits geschrieben.

Das ist bei der CSS Methode nicht unbedingt der Fall. Die CSS Methode setzt eine externe Datei voraus - sie fordert vom Server "background-image" an, welche von der PHP Datei nur benötigt wird um das Cookie zu setzen. Das Problem ist das der Browser beim laden der externen Datein nicht anhält, er arbeitet weiter während er auf die externe datei wartet. Das bedeutet das schon Bilddateien angefordert werden können bevor die PHP Datei abgearbeitet wurde und somit noch kein Cookie gesetzt wurde. Das wiederum heisst, daß wenn $mobile_first TRUE ist die für mobile Geräte verkleinerten Bilder gesendet werden. Aber nur wenn die allererste Seite geladen wird.