Skip to content
This repository
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

file 177 lines (152 sloc) 9.917 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    
    <style>
      body {
        width : 90%; margin : 1em auto;
        background : #333; color : #aaa; font : 100%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }
      h1, h2, h3, h4, h5, h6 {
        color : #fff; }
      p code { color : #99e; }
      pre > code { display : block; padding : 1em; border : 1px solid #999; }
      :target { background-color : #000;}
      
      a,a:visited{ color : #99f; }
    </style>
  </head>

  <body>
    <h1>Adaptive-Images Installationsanweisungen</h1>
    <h2>Basis Anweisungen</h2>
    <p>Kopieren Sie <code>adaptive-images.php</code> und <code>.htaccess</code>
    in das Hauptverzeichniss ihres Internetauftritts.
    Wenn Sie bereits eine htaccess Datei haben BITTE NICHT ÜBERSCHREIBEN, lesen sie die dafür vorgesehenen Instruktionen.</p>
    <p>Erstellen Sie ein Verzeichniss mit dem Namen <code>ai-cache</code> im Hauptverzeichniss
    mit Schreibberechtigung (CHMOD 777).</p>
    <p>Kopieren Sie folgendes Javascript in den &lt;head&gt; 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.</p>
<pre><code>&lt;script&gt;document.cookie='resolution='+Math.max(screen.width,
screen.height)+'; path=/';&lt;/script&gt;</code></pre>
    <p>Das wars. Sie sind fertig</p>
    <p>ANMERKUNG: Die <code>ai-cookie.php</code> Datei wird normalerweise nicht
    benötigt. Nur beim Einsatz der <a href="#alternate">Alternativen Methode</a>
    zum Feststellen der Displaygrösse wird sie benötigt ansonsten kann sie gelöscht werden.</p>
    
    <h2>Sie haben bereits eine .htaccess Datei</h2>
    <p>Sichern Sie bitte diese Datei bevor Sie Änderungen daran vornehmen.</p>
    <p>Öffnen Sie bitte ihre bestehende .htaccess Datei und editieren Sie den Inhalt.
    Suchen Sie nach einem Abschnitt suchen der so beginnt:</p>
    <p><code>&lt;IfModule mod_rewrite.c&gt;</code></p>
    <p>Sollten Sie ihn gefunden haben kopieren Sie folgenden Code in den Bereich:</p>
    
<pre><code># 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 -------------------------------------------------------------------------------</code></pre>

<p>Gibt es keinen solchen Abschnitt in ihrer Datei kopieren Sie stattdesen folgenden Code in die Datei:</p>

<pre><code>&lt;IfModule mod_rewrite.c&gt;
  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 -------------------------------------------------------------------------------
&lt;/IfModule&gt;</code></pre>

    <h2>Weitere Einstellungen</h2>
    <h3>.htaccess</h3>
    <p>Anweisungen sind in der Datei als Kommentare enthalten (alle Zeilen die
    mit # beginnen sind Kommentare und werden nicht ausgeführt)</p>
    <p>Folgen Sie den Anweisungen im Code um Verzeichnisse die nicht mit
    Adaptive-Images benutzt werden sollen einzutragen.</p>
    
    <h3>PHP</h3>
    <p>Sie können die PHP-Datei öffnen und die Einstellungen im CONFIG Bereich ändern.
    Die Standardwerte sehen so aus:</p>
      
<pre><code>/* 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 -------------------------
--------------------------------------------------------------------------------------------------------------------- */</code></pre>
  <p><code>$resolutions</code> sind die Bildschirmauflösungen mit denen gearbeitet wird.
  Als Standard werden verkleinerte Bilder für grosse Bildschirme, normale Bildschirme,
  Tablets, Smartphones, und Handys gespeichert.</p>
  <p>Im allgemeinen, wenn Sie die CSS Methode nutzen, werden diese Auflösungen
  dieselben wie in den 'media queries' sein.</p>
  <p><code>$cache_path</code> 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.</p>
  <p><code>$sharpen</code> Die bilder werden nach dem Verkleinern geschärft.
  Normal funktioniert das gut sollte ihr Server sehr sehr ausgelastet sein kann es hier abgeschaltet werdn. .</p>
  <p><code>$watch_cache</code> Bei Performanceproblemen ihres Servers kann diese Option abgeschaltet werden.
  Sollten Sie allerdings ihre Quell-Bilder ersetzen müssen Sie den Cache Ordner manuell leeren.</p>
  <p><code>$mobile_first</code> 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.</p>
  
<h2 id="alternate">Alternative Methode ohne JavaScript</h2>

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

<h3>Die alternative Methode</h3>
<p>Benötigt kein JavaScript stattdessen aber, muss ÜBER ihrem normalen
CSS, folgende Zeilen eingefügt werden:</p>
<pre><code>&lt;style&gt;
 @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); } }
&lt;/style&gt;</code></pre>
<p>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 <code>ai-cookie.php</code> Datei im Hauptverzeichniss ihres Internetauftritts.
(ansonsten wird diese Datei nicht benötigt).</p>

<h3>Der Vorbehalt</h3>
<p>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
</p>
<p>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.</p>
<p>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.</p>
  </body>
</html>
Something went wrong with that request. Please try again.