Copy adaptive-images.php and .htaccess into the root directory of your site. If you already have a htaccess file DO NOT OVERWRITE IT, skip down to the advanced instructions.
Copy the following Javascript into the <head> of your site. It MUST go in the head as the first bit of JS, before any other JS. This is because it needs to work as soon as possible, any delay wil have adverse effects.
25 |<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>That's it, you're done. You should probably configure some preferences though.
27 |NOTE 1: if you would like to take advantage of high-pixel density devices such as the iPhone4 or iPad3 Retina display you can use the following JavaScript instead. 28 | It will send higher-resolution images to such devices - be aware this will mean slower downloads for Retina users, but better images.
29 |<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';</script>NOTE 2: you do not need the ai-cookie.php file unless you are using the alternate method of detecting the users screen size. So delete it if you like, no one likes mess.
NOTE 3: If you are extra paranoid about security you can have the ai-cache directory sit outside of your web-root so it's not publicly accessible. Just set the paths properly in the .htaccess file and the .php file.
32 | 33 |I strongly advise you to duplicate that file so you can revert to it if things go pear-shaped.
35 |Open your existing .htaccess file and edit the contents. You'll need to look and see if there is a section that begins with the following:
36 |<IfModule mod_rewrite.c>
If there is, then you need to add the following lines into that block:
38 | 39 |# Adaptive-Images -----------------------------------------------------------------------------------
40 |
41 | # Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
42 | # RewriteCond %{REQUEST_URI} !some-directory
43 | # RewriteCond %{REQUEST_URI} !another-directory
44 |
45 | RewriteCond %{REQUEST_URI} !assets
46 |
47 | # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
48 | # to adaptive-images.php so we can select appropriately sized versions
49 | RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
50 |
51 | # END Adaptive-Images -------------------------------------------------------------------------------If you don't have a code block then simply copy and paste the following into your file instead:
54 | 55 |<IfModule mod_rewrite.c>
56 | Options +FollowSymlinks
57 | RewriteEngine On
58 |
59 | # Adaptive-Images -----------------------------------------------------------------------------------
60 |
61 | # Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
62 | # RewriteCond %{REQUEST_URI} !some-directory
63 | # RewriteCond %{REQUEST_URI} !another-directory
64 |
65 | RewriteCond %{REQUEST_URI} !assets
66 |
67 | # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
68 | # to adaptive-images.php so we can select appropriately sized versions
69 | RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
70 |
71 | # END Adaptive-Images -------------------------------------------------------------------------------
72 | </IfModule>Instructions are in the file as comments (any line that starts with a # is a comment, and doesn't actually do anything)
77 |Follow the instructions inside that code to specify any directories you don't want to use Adaptive-Images on.
78 | 79 |You can now open the php file and have a play with the settings that are in the CONFIG area. By default it looks like this:
81 | 82 |/* CONFIG ----------------------------------------------------------------------------------------------------------- */
83 |
84 | $resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)
85 | $cache_path = "ai-cache"; // where to store the generated re-sized images. Specify from your document root!
86 | $jpg_quality = 80; // the quality of any generated JPGs on a scale of 0 to 100
87 | $sharpen = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
88 | $watch_cache = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)
89 | $browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)
90 |
91 | /* END CONFIG ----------------------------------------------------------------------------------------------------------
92 | ------------------------ Don't edit anything after this line unless you know what you're doing -------------------------
93 | --------------------------------------------------------------------------------------------------------------------- */$resolutions are the screen widths we'll work with. In the default it will store a re-sized image for large screens, normal screens, tablets, phones, and tiny phones.
In general, if you're using a responsive design in CSS, these breakpoints will be exactly the same as the ones you use in your media queries.
96 |$cache_path If you don't like the cached images being written to that folder, you can put it somewhere else. Just put the path to the folder here and make sure you create it on the server if for some reason that couldn't be done autmoatically by adaptive-images.php.
$sharpen Will perform a subtle sharpening on the rescaled images. Usually this is fine, but you may want to turn it off if your server is very very busy.
$watch_cache If your server gets very busy it may help performance to turn this to FALSE. It will mean however that you will have to manually clear out the cache directory if you change a resource file
One of the weaknesses of the Adaptive Images process is its reliance on JavaScript to detect the visitors screen size, and set a cookie with that screen size inside it. The following is a solution for people who need the system to work without the use of JavaScript, but it does have a major caveat which is why this is not the default method, and why it is "unsupported" (I'm not going to troubleshoot problems you have with this method).
103 | 104 |Do not use the JavaScript as explained above, but instead, ABOVE your normal CSS, add the following into the head:
106 |<style>
107 | @media only screen and (max-device-width: 479px) {
108 | html { background-image:url(ai-cookie.php?maxwidth=479); } }
109 | @media only screen and (min-device-width: 480px) and (max-device-width: 767px) {
110 | html { background-image:url(ai-cookie.php?maxwidth=767); } }
111 | @media only screen and (min-device-width: 768px) and (max-device-width: 991px) {
112 | html { background-image:url(ai-cookie.php?maxwidth=991); } }
113 | @media only screen and (min-device-width: 992px) and (max-device-width: 1381px) {
114 | html { background-image:url(ai-cookie.php?maxwidth=1381); } }
115 | @media only screen and (min-device-width: 1382px) {
116 | html { background-image:url(ai-cookie.php?maxwidth=unknown); } }
117 | </style>If you use this method you will need to ensure the widths here match those in your adaptive-images.php file, you will also need to have the ai-cookie.php file in the root of your website (no one else needs this file).
Using this method instead of the JS method makes it likely that on the very first visit to your site, the images sent to the visitor will be the original full-scale versions. However, ALL subsequent pages on your site will work properly. What that means is that, really, this solution is only viable if you've got $mobile_first set to FALSE. Otherwise, the majority of people who visit your site will experience images too small for their computer on the very first visit.
122 |The reason is to do with how browsers load web pages. The first thing a browser does is load the HTML, in the order it's written - so for a normal AI install it loads the HTML and see's the embeded JavaScript and immediately executes that JavaScript - which writes the cookie. It then carries on loading the rest of the page in the order it finds it. Long story short - it means that when it finds an image tag and asks the server for it, it already has a cookie stored.
123 |That's not likely to be the case if you use the CSS method. Because the CSS method relies on an external file - it has to ask the server for the "background-image", which is really just a bit of PHP to set a cookie. The problem is that when a browser loads external files like that, it doesn't stop loading the HTML, it carries on doing that at the same time as waiting for the external file. Which means that it can get to an image tag before the server has finished loading that PHP file. This is only an issue on the very first page load, and AI has smart fallbacks to deal with a no-cookie situation.
124 | 125 |Most of the time people report problems it is due to one of two things:
127 |If images vanish, there is something wrong with your .htaccess configuration. This happens mostly on WordPress sites - it's because the server, and wordpress, have specific requirements that are different from most servers. You'll have to play about in the .htaccess file and read up on how to use ModRewrite.
128 |If you're seeing error images (big black ones) That's AI working, so your .htaccess is fine. Read the messages on the image. Most of the time you'll only see this problem because your server requires less strict permissions to write to the disc. Try setting the ai-cache directory to 775, and if all else fails use 777 - but be aware this is not very secure if you're on a shared server, and you ought to instead contact your administrator to get the server set up properly.
129 | 130 | -------------------------------------------------------------------------------- /instructions_de.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 18 | 19 | 20 | 21 |Kopieren Sie adaptive-images.php und .htaccess
24 | in das Hauptverzeichniss ihres Internetauftritts.
25 | 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
27 | mit Schreibberechtigung (CHMOD 777).
Kopieren Sie folgendes Javascript in den <head> Bereich ihrer Seiten. 29 | Das Script MUSS sich im head Bereich befinden damit es ausgeführt wird bevor 30 | die gesamte Seite geladen ist und die ersten Bilder vom Server ausgeliefert werden.
31 |<script>document.cookie='resolution='+Math.max(screen.width,
32 | screen.height)+'; path=/';</script>Das wars. Sie sind fertig
34 |ANMERKUNG: Die ai-cookie.php Datei wird normalerweise nicht
35 | benötigt. Nur beim Einsatz der Alternativen Methode
36 | zum Feststellen der Displaygrösse wird sie benötigt ansonsten kann sie gelöscht werden.
Sichern Sie bitte diese Datei bevor Sie Änderungen daran vornehmen.
40 |Öffnen Sie bitte ihre bestehende .htaccess Datei und editieren Sie den Inhalt. 41 | Suchen Sie nach einem Abschnitt suchen der so beginnt:
42 |<IfModule mod_rewrite.c>
Sollten Sie ihn gefunden haben kopieren Sie folgenden Code in den Bereich:
44 | 45 |# Adaptive-Images -----------------------------------------------------------------------------------
46 |
47 | # Add any directories you wish to omit from the Adaptive-Images process on a new
48 | line, as follows:
49 | # RewriteCond %{REQUEST_URI} !some-directory
50 | # RewriteCond %{REQUEST_URI} !another-directory
51 |
52 | RewriteCond %{REQUEST_URI} !assets
53 |
54 | # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above
55 | directories
56 | # to adaptive-images.php so we can select appropriately sized versions
57 | RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
58 |
59 | # END Adaptive-Images -------------------------------------------------------------------------------Gibt es keinen solchen Abschnitt in ihrer Datei kopieren Sie stattdesen folgenden Code in die Datei:
62 | 63 |<IfModule mod_rewrite.c>
64 | Options +FollowSymlinks
65 | RewriteEngine On
66 |
67 | # Adaptive-Images -----------------------------------------------------------------------------------
68 |
69 | # Add any directories you wish to omit from the Adaptive-Images process on a
70 | new line, as follows:
71 | # RewriteCond %{REQUEST_URI} !some-directory
72 | # RewriteCond %{REQUEST_URI} !another-directory
73 |
74 | RewriteCond %{REQUEST_URI} !assets
75 |
76 | # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above
77 | directories
78 | # to adaptive-images.php so we can select appropriately sized versions
79 | RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
80 |
81 | # END Adaptive-Images -------------------------------------------------------------------------------
82 | </IfModule>Anweisungen sind in der Datei als Kommentare enthalten (alle Zeilen die 87 | mit # beginnen sind Kommentare und werden nicht ausgeführt)
88 |Folgen Sie den Anweisungen im Code um Verzeichnisse die nicht mit 89 | Adaptive-Images benutzt werden sollen einzutragen.
90 | 91 |Sie können die PHP-Datei öffnen und die Einstellungen im CONFIG Bereich ändern. 93 | Die Standardwerte sehen so aus:
94 | 95 |/* CONFIG ----------------------------------------------------------------------------------------------------------- */
96 |
97 | $resolutions = array(1382,992,768,480,320); // Die Auflösungsschritte für die Bilder erzeugt werden (Bildschirmbreite in Pixel)
98 | $cache_path = "ai-cache"; // Wo die verkleinerten Bilder gespeichert werden. Der Ordner muss beschreibbar sein.
99 | $jpg_quality = 80; // Die Qualität der erzeugten JPGs 0 bis 100
100 | $sharpen = TRUE; // Verkleinerte Bilder verlieren an Schärfe, bei TRUE werden die Bilder geschärft
101 | $watch_cache = TRUE; // stellt sicher das neu hochgeladene Bilder neu verkleinert werden
102 | $browser_cache = 60*60*24*7; // Die Zeit in Sekunden für den BROWSER cache (Standard 7 Tage)
103 | $mobile_first = TRUE; // Ist kein Cookie vorhanden wird zuerst die mobile Version gesendet (wenn FALSE, wird das grösste Bild gesendet)
104 |
105 | /* END CONFIG ----------------------------------------------------------------------------------------------------------
106 | ------------------------ Verändern Sie nichts nach dieser Zeile wenn Sie nicht wissen was Sie tun -------------------------
107 | --------------------------------------------------------------------------------------------------------------------- */$resolutions sind die Bildschirmauflösungen mit denen gearbeitet wird.
109 | Als Standard werden verkleinerte Bilder für grosse Bildschirme, normale Bildschirme,
110 | Tablets, Smartphones, und Handys gespeichert.
Im allgemeinen, wenn Sie die CSS Methode nutzen, werden diese Auflösungen 112 | dieselben wie in den 'media queries' sein.
113 |$cache_path Der Pfad in den die Bilder zwischengespeichert werden.
114 | Er kann beliebig geändert werden. Der Pfad wird hier eingetragen und es muss
115 | sichergestellt sein das er auf dem Server existiert.
$sharpen Die bilder werden nach dem Verkleinern geschärft.
117 | 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.
119 | 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
121 | Images Bilder in der 'mobilen' Auflösung. Wenn FALSE gesetzt ist werden die am
122 | höchten aufgelössten Bilder gesendet.
Eine Schwäche von Adaptive Images ist das JavaScript zum Erkennen der 127 | Bildschirmgrösse des Besuchers benötigt wird. 128 | Im folgenden wird eine Methode ohne Javascript gezeigt. 129 | Diese Methode funktioniert unter Vorbehalt wird allerdings vom Autor nicht empfohlen und nicht unterstützt. 130 |
131 | 132 |Benötigt kein JavaScript stattdessen aber, muss ÜBER ihrem normalen 134 | CSS, folgende Zeilen eingefügt werden:
135 |<style>
136 | @media only screen and (max-device-width: 479px) {
137 | html { background-image:url(ai-cookie.php?maxwidth=479); } }
138 | @media only screen and (min-device-width: 480px) and (max-device-width: 767px) {
139 | html { background-image:url(ai-cookie.php?maxwidth=767); } }
140 | @media only screen and (min-device-width: 768px) and (max-device-width: 991px) {
141 | html { background-image:url(ai-cookie.php?maxwidth=991); } }
142 | @media only screen and (min-device-width: 992px) and (max-device-width: 1381px) {
143 | html { background-image:url(ai-cookie.php?maxwidth=1381); } }
144 | @media only screen and (min-device-width: 1382px) {
145 | html { background-image:url(ai-cookie.php?maxwidth=unknown); } }
146 | </style>Wenn Sie diese Mehode verwenden müssen Sie sicherstellen das die verwendeten
148 | Bildschirmauflösungen dennen in Ihrer adaptive-images.php Datei entsprechen,
149 | Sie benötigen zudem die ai-cookie.php Datei im Hauptverzeichniss ihres Internetauftritts.
150 | (ansonsten wird diese Datei nicht benötigt).
Benutzen Sie diese Methode anstatt JS ist es möglich das besucher bei ihrem 154 | ersten Besuch ihrer Seiten, die original hoch aufgelössten Bilder gesendet bekommen. 155 | ALLE Seiten ihres Auftritts werden wie vorgesehen funktionieren. 156 | Das bedeutet allerdings das Sie die Option $mobile_first auf FALSE setzen müssen. 157 | Ansonsten werden die meisten ihrer Besucher feststellen das die angezeigten Bilder, 158 | bei ihrem ersten Besuch zu klein dargestellt werden. 159 | Otherwise, the majority of people who 160 |
161 |Der Grund dafür ist die Reihenfolge wie Browser Internetseiten verarbeiten. 162 | Als erstes wird das HTML geladen, und in der Reihenfolge wie es geschrieben wurde abgearbeitet. 163 | Das eingebettete JavaScript wird sofort ausgeführt und erzeugt das Cookie. 164 | Danach werden Bilder in der Reihenfolge ihres Auftrettens geladen. das heisst 165 | werden die ersten Bilder vom Server angefordert ist das Cookie mit der Bildschirmgrösse 166 | bereits geschrieben.
167 |Das ist bei der CSS Methode nicht unbedingt der Fall. Die CSS 168 | Methode setzt eine externe Datei voraus - sie fordert vom Server 169 | "background-image" an, welche von der PHP Datei nur benötigt wird um das Cookie zu setzen. 170 | Das Problem ist das der Browser beim laden der externen Datein nicht anhält, 171 | er arbeitet weiter während er auf die externe datei wartet. Das bedeutet das 172 | schon Bilddateien angefordert werden können bevor die PHP Datei abgearbeitet wurde 173 | und somit noch kein Cookie gesetzt wurde. Das wiederum heisst, daß wenn $mobile_first TRUE ist 174 | die für mobile Geräte verkleinerten Bilder gesendet werden. Aber nur wenn die 175 | allererste Seite geladen wird.
176 | 177 | -------------------------------------------------------------------------------- /instructions_tr.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 18 | 19 | 20 | 21 |adaptive-images.php ve .htaccess dosyalarını sitenizin ana dizinine yerleştirin. Eğer halihazırda bir htaccess dosyanız varsa onu SİLMEYİN, ileri düzey yönergeleri okuyun.
Aşağıdaki Javascript kodunu sitenize yerleştirin. Bu kod, head taginin içinde ve diğer tüm javascript kodlarından önce yerleştirilmek ZORUNDA. Çünü her türlü gecikmenin sonuçları olabilir ve düzgün çalışabilmesi için olabildiğince erken yüklenmesi gerekiyor.
25 |<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>Hepsi bu kadar. Yine de bazı ayarları yapmanız gerekecektir.
27 |NOT 1: Eğer iPhone4 veya iPad3 Retina gibi cihazların yüksek çözünürlüğünden faydalanmak isterseniz aşağıdaki Javascript'i kullanın. 28 | Bu sayede bu tarz cihazlara yüksek çözünürlüklü resimler göndereceksiniz, ama bu da download süresini yavaşlatacaktır tabii ki.
29 |<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';</script>NOT 2: Eğer ekran çözünürlüğünü algılamak için alternatif metodları kullanmayacaksanız ai-cookie.php dosyasına ihtiyacınız olmayacak. Yani isterseniz silin, kimse kalabalığı sevmez.
NOT 3: Eğer güvenlik konusunda fazla pimpirikliyseniz ai-cache klasörünü web rootunuzun dışına taşıyabilirsiniz, dışarıya erişimini kapatmak için. PHP ve .htaccess dosyalarındaki klasör ayarlarını da buna göre düzenleyin.
32 | 33 |Mevcut dosyanızın bir kopyasını almayı şiddetle tavsiye ediyorum. Bir aksilik durumunda hemen orijinal haline dönebilin diye.
35 |Mevcut .htaccess dosyanızı açın ve aşağıdaki kodlarla başlayan bir bölüm var mı diye kontrol edin:
36 |<IfModule mod_rewrite.c>
Eğer varsa, o bloğun içine şu kodları ekleyin:
38 | 39 |# Adaptive-Images -----------------------------------------------------------------------------------
40 |
41 | # Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
42 | # RewriteCond %{REQUEST_URI} !some-directory
43 | # RewriteCond %{REQUEST_URI} !another-directory
44 |
45 | RewriteCond %{REQUEST_URI} !assets
46 |
47 | # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
48 | # to adaptive-images.php so we can select appropriately sized versions
49 | RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
50 |
51 | # END Adaptive-Images -------------------------------------------------------------------------------Eğer böyle bir blok yoksa basitçe şu kodu kopyalayın ve htaccess dosyanızın içine yapıştırın:
54 | 55 |<IfModule mod_rewrite.c>
56 | Options +FollowSymlinks
57 | RewriteEngine On
58 |
59 | # Adaptive-Images -----------------------------------------------------------------------------------
60 |
61 | # Her bir satıra aşağıdaki formatı kullanarak Adaptive-Images'ın çalışmamasını istediğiniz dizinleri belirtebilirsiniz:
62 | # RewriteCond %{REQUEST_URI} !some-directory
63 | # RewriteCond %{REQUEST_URI} !another-directory
64 |
65 | RewriteCond %{REQUEST_URI} !assets
66 |
67 | # Yukarıda belirtilmeyen klasörlerlerdeki tüm GIF, JPG ve PNG'leri
68 | # adaptive.images.php'ye yönlendir. Böylece farklı boyutlardan doğru olana ulaşmayı sağla
69 | RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
70 |
71 | # END Adaptive-Images -------------------------------------------------------------------------------
72 | </IfModule>Yönergeler yorum satırı olarak ekldndi. (# ile başayan satırlar yorum satırıdır ve bir işleve sahip değiller.)
77 |Bu yorum satırlarındaki yönergeleri izleyerek belirli dizinlerde Adaptive-Images'in çalışmamasını sağlayabilirsiniz.
78 | 79 |Şimdi PHP dosysını açıp CONFIG alanının içindeki ayarları kendinize göre düzenleyebilirsiniz. Orijinal hali şöyle:
81 | 82 |/* CONFIG ----------------------------------------------------------------------------------------------------------- */
83 |
84 | $resolutions = array(1382, 992, 768, 480); // çözünürlüğe göre kırılma noktaları (ekran genişliği, pixel birimiyle)
85 | $cache_path = "ai-cache"; // boyutlandırılmış resimlerin tutulacağı dizin. Ana dizininize göre belirtin!
86 | $jpg_quality = 80; // oluşturulan JPG'in 100 üzerinden kalitesi
87 | $sharpen = TRUE; // resimleri küçültmek detaylarda bulanıklığa sebep olabilir, boyutlandırılmış resimlerde keskinleştirme yapılsın mı?
88 | $watch_cache = TRUE; // oluşturulmuş resimlerin miyadını doldurup doldurmadığını kontrol eder (aynı zamanda yeni oluşturulan resimlerin yeniden önbelleklenmesini sağlar)
89 | $browser_cache = 60*60*24*7; // Tarayıcı önbelleğinin ne kadar geçerli kalmalı? (saniye, dakika, saat, gün. Orijinal halinde 7 gündür)
90 |
91 | /* END CONFIG ----------------------------------------------------------------------------------------------------------
92 | ------------------------- Yaptığınız şeye hakim değilseniz aşağıdaki satırlara dokunmayınız ---------------------------
93 | --------------------------------------------------------------------------------------------------------------------- */$resolutions üstünde çalışacağımız ekran genişlikleridir. Orijinal halinde; geniş ekranlar, normal ekranlar, tablet, telefon ve küçük telefonlar için farklı boyutlar tutar.
Genellikle, CSS ile responsive bir tasarım kullanıyorsanız, bu boyutlar media query'lerinizdeki kırılma noktalarıyla aynı değerlere sahip olacaktır.
96 |$cache_path Eğer önbelleklenmiş resimlerin bu klasöre atılmasını istemiyorsanız, başka bir klasör belirtebilirsiniz. Dizini kendi istediğinizle değiştirin ve sunucunuzda bu klasörden oluşturmayı unutmayın. adaptive-images.php bu klasörü otomatik olarak oluşturamayabilir.
$sharpen boyutlanmış resimlerde keskinleştirme işlemini yapar. Genellikle bunun çalışması işe yarardır, ama sunucunuz çok yoğunsa bunu kapatmayı düşünebilirsiniz.
$watch_cache Sunucunuz çok yoğunsa, performans artışı için bu özelliği FALSE değeriyle kapatmanız işinize yarayabilir. Ama bu da bir resmi değiştirdiğinizde, önbellek klasörünü sizin temizlemenizi gerektirir.
One of the weaknesses of the Adaptive Images process is its reliance on JavaScript to detect the visitors screen size, and set a cookie with that screen size inside it. The following is a solution for people who need the system to work without the use of JavaScript, but it does have a major caveat which is why this is not the default method, and why it is "unsupported" (I'm not going to troubleshoot problems you have with this method).
103 | 104 |Yukarıdaki Javascript kodlarını kullanmak yerine sitenizin CSS kodlarının ÜSTÜNE aşağıdaki kodları ekleyin (head içerisinde):
106 |<style>
107 | @media only screen and (max-device-width: 479px) {
108 | html { background-image:url(ai-cookie.php?maxwidth=479); } }
109 | @media only screen and (min-device-width: 480px) and (max-device-width: 767px) {
110 | html { background-image:url(ai-cookie.php?maxwidth=767); } }
111 | @media only screen and (min-device-width: 768px) and (max-device-width: 991px) {
112 | html { background-image:url(ai-cookie.php?maxwidth=991); } }
113 | @media only screen and (min-device-width: 992px) and (max-device-width: 1381px) {
114 | html { background-image:url(ai-cookie.php?maxwidth=1381); } }
115 | @media only screen and (min-device-width: 1382px) {
116 | html { background-image:url(ai-cookie.php?maxwidth=unknown); } }
117 | </style>Eğer bu yolu seçtiyseniz CSS'teki genişliklerin adaptive-images.php dosyasındakilerle eşleştiğinizden emin olun. Ayrıca ana dizinizde ai-cookie.php dosyasının da olması gerekir (bu yolu kullanmayacaksanız bu dosyaya hiç ihtiyacınız yok).
Javascript yerine bu metodu kullanmanız durumunda, kullanıcıların sitenizi ilk ziyaretinde resimler orijinal boyutlarıyla yüklenir. Ama tüm alt sayfalar doğru şekilde çalışacaktır! Bu da şu demek: bu çözüm sadece $mobile_first ayarının FALSE olduğu durumlarda mantıklı olacaktır. Aksi halde, ziyaretçilerinizin büyük bir çoğunluğu sitenizi ilk ziyaretlerinde çok küçük resimlerle karşılaşacaklar.
122 |Bunun sebebi de tarayıcıların siteleri yükleme şekilleridir. Bir tarayıcının HTML'i yüklerken yaptığı ilk şey, yazılan sırasıyla, normal bir AI kurulumunda önce HTML'i yükler ve gömülen Javascriptleri çalıştırır (Cookieleri hazırlayan kod). Daha sonra, sayfanın kalanını yüklemeye sırayla devam eder. Uzun lafın kısası, bu sayede, tarayıcı bir resim etiketi bulup onu yüklemeye başladığında, çerezler çoktan ayarlanmış olurlar.
123 |CSS metodunu kullandığınızda işler bu şekilde yürümez. Çünkü CSS metodu başka bir dosyaya dayanır. "background-image" için bir PHP dosyasına ulaşır. Bu PHP dosyasının da tek işlevi ufak kodlarla diğer metodda Javascript'in yaptığı gibi çerezi tanımlamaktır. Buradaki sorun, tarayıcılar böyle dış dosyalara erişirken sayfayı yüklemeyi bırakmazlar. Bir yandan bu dosyadan yanıt beklerken, bir yandan da diğer dosyaları yüklemeye devam eder. Bu da demek ki, bir resime bizim mucizevi php dosyamızdan önce ulaşabilir. Bu sadece ilk ziyarette yaşanacak bir sorundur, ve AI no-cookie durumlarıyla baş etmek için başka sihirli yollar dener.
124 | 125 |Çoğu zaman kullanıcıların yaşadığı sorunlar temel iki şeye dayanır:
127 |Eğer resimler yok oluyorsa, .htaccess ayarlarınızda bir sorun vardır. Genellikle Wordpress sitelerinde bu sorun görülür. Çünkü sunucu ve wordpress çoğu sunucudan farklı şeylere ihtiyaç duyar. Htaccess dosyanızla biraz oynamanız ve yukarıdaki ModRewrite ile ilgili bölümü tekrar okumanız sorunu çözecektir.
128 |Eğer siyah hata sayfaları görüyorsanız AI çalışıyor, yani .htaccess sorunsuz çalışıyor. Resimdeki mesjaları okuyun. Çoğu zaman bu hatayı görürsünüz çünkü sunucunuz dosya yazımları için güçlü izinler ister. ai-cache klasörünün yazım izinlerini 775, o da olmazsa 777'ye getirmeyi deneyin. Ama paylaşılan sunucularda bu izinlerin çok güvenli olmayacağını ve sunucunuzun yöneticisiyle görüşmenizin iyi olacağını bilin.
129 | 130 | -------------------------------------------------------------------------------- /readme.textile: -------------------------------------------------------------------------------- 1 | h1. Adaptive Images 2 | 3 | Is a solution to automatically create, cache, and deliver device-appropriate versions of your website's content images. It does not require you to change your mark-up. It is intended for use with "Responsive Designs":http://www.abookapart.com/products/responsive-web-design and to be combined with "Fluid Image":http://unstoppablerobotninja.com/entry/fluid-images/ techniques. 4 | 5 | h2. Project status 6 | 7 | I am not maintaining this project any longer. 8 | 9 | This is an old project, and still works as intended, with little need for new features (hence the lack of updates). That said; if you are building a new website I would *strongly recommend* looking into HTLM's new 'picture' tag, and the srcset and sizes properties now available on regular img tags. These were not available at the time of making AI, have since become a standard, and in many cases these are more appropriate solutions today. 10 | 11 | h2. Benefits 12 | 13 | * Ensures you and your visitors are not wasting bandwidth delivering images at a higher resolution than the vistor needs. 14 | * Will work on your existing site, as it requires no changes to your mark-up. 15 | * Is device agnostic (it works by detecting the size of the visitors screen) 16 | * Is CMS agnostic (it manages its own image re-sizing, and will work on any CMS or even on flat HTML pages) 17 | * Is entirely automatic. Once added to your site, you need do no further work. 18 | * Highly configurable 19 | ** Set the resolutions you want to become adaptive (usually the same as the ones in your CSS @media queries) 20 | ** Choose where you want the cached files to be stored 21 | ** Configure directories to ignore (protect certain directories so AI is not applied to images within them) 22 | 23 | Find out more, and view examples at "http://adaptive-images.com":http://adaptive-images.com 24 | 25 | h2. Legal 26 | 27 | Adaptive Images by Matt Wilcox is licensed under a "Creative Commons Attribution 3.0 Unported License":http://creativecommons.org/licenses/by/3.0/ 28 | --------------------------------------------------------------------------------