3.2 Скриншоты.
Отображать скриншоты программы мы будем на отдельной странице. Они будут считываться из директории /images/screenshots (скопируйте туда содержимое соответствующей папки из архива с дополнительными файлами) и выводится в уменьшенном размере на страницу. Директория здесь используется для того что бы не заморачиваться с различными панелями загрузки скриншотов. Закинул картинку в папку - она отобразилась на сайте. Всё просто.
В самом начале мы получим список уже имеющихся в директории изображений. Это действие я решил поместить в модель. Возможно помещение его в контроллере тоже было бы правильным, но мне кажется что раз происходит операция с данными то находится она должна в модели. Создайте пустую модель Screenshots_model и поместите туда единственный метод под именем imagesList.
PHP код:
class Screenshots_Model extends Model {
public function imagesList() {
}
}
С помощью функции scandir мы обработаем папку скриншотов и вернём список существующих картинок.
PHP код:
// Получаем список файлов
$images = scandir("./images/screenshots");
// Убираем "." и ".."
for($i = 0; $i < count($images); $i++) {
if($images[$i] == "." OR $images[$i] == "..")
unset($images[$i]);
}
return $images;
Теперь передадим эти данные в отображение и выведем пользователю. Конечно, надо написать функцию изменения размера изображений, ведь скриншот может быть большим и весить несколько мегабайт. Мы её опишем в контроллере Screenshots применяя библиотеку для работы с изображениями (http://docs.kohanaphp.com/libraries/image). Назовём эту функцию resize. У неё будет 2 входящих параметра - имя картинки и требуемая ширина.
PHP код:
// Нам нужно только имя файла, а не всякие ../file
$image = basename($image);
// Создаём новый объект Image
$image = new Image("./images/screenshots/{$image}");
// Изменяем размер изображения основываясь его на ширине
$image->resize($width, 200, Image::WIDTH);
// Выводим изображение
$image->render();
Обратите внимание на то что методу resize, объекта image, третьим параметром мы передаём значение константы Image::WIDTH. Это нужно для того что бы размер изображения изменялся с сохранением пропорции основываясь на ширине. То есть цифра 200 указывающая высоту в нашем случае ничего не значит.
Так как мы собрались передавать массив изображений в шаблон, то нам ничего не стоит вывести код показа изменённого изображения. В самом контроллере нам нужно лишь поработать с отображениями - вывести их и передать результат работы "imagesList"
PHP код:
public function index() {
$view = new View('screenshots/index');
$view->header = new View('header');
$view->menu = new View('menu');
$view->footer = new View('footer');
$view->screenshots = $this->screenshots->imagesList();
$view->render(true);
}
В шаблоне мы обойдём массив с помощью цикла foreach и отобразим картинки вот с такими источниками:
/screenshots/resize/имя_изображения/300
Так же мы организуем в отображении счётчик и после вывода каждых двух картинок будем создавать новую строку.
PHP код:
<?=$header?>
<body>
<?=$menu?>
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
<div class="post">
<h1 class="title"><a href="/screenshots/">Скриншоты нашей программы</a></h1>
<div class="entry">
<p>
<table width="100%" cellspacing="10" cellpadding="5">
<tr>
<?$i = 0;?>
<?foreach($screenshots as $screenshot):?>
<!--Если остаток от деления на 2 - 0 (число кратно 2) то начинаем новую строку-->
<?if(!fmod($i,2)):?></tr><tr><?endif;?>
<td>
<img src="/screenshots/resize/<?=$screenshot?>/300" onClick="window.open('/screenshots/resize/<?=$screenshot?>/800');"/>
</td>
<?$i++;?>
<?endforeach;?>
</tr>
</table>
</p>
</div>
</div>
</div>
<!-- end content -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<?=$footer?>
Сохраните этот шаблон под именем index.php в папке /application/view/screenshots/
В итоге мы должны получить следующее.
И сколько бы мы не клали изображений в директорию скриншотов - страница будет вытягиваться только вниз. Вы могли заметить что в коде шаблона, при отображении картинки, указывается событие onClick. В нём прописан код открытия скриншота шириной 800 пикселей.