Miniaturki automatycznie zapisane na serwerze

Masz zdjęcia normalnych rozmiarów, jednak nie chcesz przerabiać wszystkich na miniatury.
Można za pomocą CSS lub atrybutów width i height zmniejszyć ich wymiary na ekranie, ale ich rozmiar będzie nadal tak duży, jak dużego zdjęcia, co powoduję że się dłużej ładują.

Pokażę trick wykorzystujący JavaScript/JQuery, .htaccess/mod_rewrite i oczywiście PHP, który będzie tworzył miniatury w locie i zapisywał je na serwerze, gdy tylko zdjęcie zostanie wyświetlone za pierwszym razem.



Niech zdjęcia znajdują się w głównym katalogu /img, a miniatury w katalogu /thumbs.

Mamy kod HTML:

<img src="/img/zdjecie-01.jpg" alt="Zdjęcie" class="thumb" />

Przy pomocy JavaScript/JQuery zamienimy ścieżkę obrazka na taką, aby był pobrany z katalogu /thumbs:

$('.thumb').each(function(){     var src = $(this).attr('src'); // pobranie ścieżki zdjęcia     src.replace('/img/', '/thumbs/');     $(this).attr('src', src); // podmiana części ścieżki na nową });

Po tym zabiegu kod HTML będzie wyglądał następująco:

<img src="/thumbs/zdjecie-01.jpg" alt="Zdjęcie" class="thumb" />

tylko, że zdjęcie się nie załaduje, bo nie istnieje w katalogu /thumbs.
Zatem trzeba je tam utworzyć.

Do tego będzie potrzebny plik .htaccess:

RewriteEngine On # sprawdzamy, czy żądany adres dotyczy katalogu /thumbs # i jego zawartości RewriteCond %{REQUEST_URI} ^/thumbs/(.*)$ # sprawdzamy, czy plik nie istnieje RewriteCond %{REQUEST_FILENAME} !-f # jeśli spełnione są powyższe warunki, # to przekazujemy obsługę do pliku resize.php # ze zmienną %1, która dotyczy zawartości nawiasu w pierwszym warunku RewriteRule .* /resize.php?img=%1 [L]

Jeśli istnieje już odpowiedni plik w katalogu /thumbs, to reguła w .htaccess nie zostanie wykonana.
Po prostu zostanie wyświetlony w tym wypadku plik /thumbs/zdjecie-01.jpg.

Ostatnią rzeczą jest utworzenie miniatury zdjęcia i zapisanie jej do katalogu /thumbs pod taką samą nazwą.
Zostanie to wykonane w skrypcie resize.php.
Dla uproszczenia zakładam, że zdjęcie jest w formacie .jpg.

<?php // .htaccess przekazał nazwę zdjęcia w zmiennej $_GET['img'] if(!empty($_GET['img'])){   // utworzenie zdęcia z podanej ścieżki $img = imagecreatefromjpeg('/img/'.$_GET['img']);     // wymiary zdjęcia $img_w = imagesx($img); $img_h = imagesy($img);     // wymiary miniatury, tutaj szerokość jest stała na 200px, a wysokość obliczana $thumb_w = 200; $thumb_h = (int)($img_h * $thumb_w / $img_w);     // utworzenie miniaury o odpowiednich wymiarach $thumb = imagecreatetruecolor($thumb_w, $thumb_h);     // miniaturyzacja oryginalnego zdjęcia imagecopyresampled($thumb, $img, 0, 0, 0, 0, $thumb_w, $thumb_h, $img_w, $img_h); //zapisanie do pliku w katalogu /thumbs imagejpeg($thumb, '/thumbs/'.$_GET['img']); // pokazanie w przeglądarce header('Content-type: image/jpeg'); imagejpeg($thumb); }

Po tej całej operacji miniatura będzie pobierana z katalogu /thumbs jeśli istnieje, a jeśli nie, to najpierw utworzona.