forked from MattWilcox/Adaptive-Images
-
Notifications
You must be signed in to change notification settings - Fork 0
/
instructions_de.htm
177 lines (152 loc) · 9.68 KB
/
instructions_de.htm
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 <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.</p>
<pre><code><script>document.cookie='resolution='+Math.max(screen.width,
screen.height)+'; path=/';</script></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><IfModule mod_rewrite.c></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><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></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><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></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>