Наблюдая за знакомыми на работе я заметил, что они кликают в картинки заголовка http://lifelongjourney.ru в надежде попасть на посты, содержащие эту самую фотку.
Раньше там стояла просто длинная картинка, скленная из 4-х более маленьких по размеру. Линк с нее, соответсвенно, вел на один пост. Ну и зародилась идея поеразть этот коллаж и еще имеющихся в запасе 3 штуки на 16 фото, сделать к каждой картинке ссылку и выводить это все в заголовке, собирая рандомно 4 картинки. Смотрим на lifelongjourney.ru в шапку сайта.
Ну и вот, что из этого получилось.
Для начала нарезал 16 картинок размером 275×182
Т.к. используется дочерняя тема (про дочернии темы как-нибудт напишу подробно), то все изменения проводим в файлах дочерней темы. Сразу сделаем задел на будущее – будем генерировать вывод функцией, соответсвенно в functions.php дочерней темы добавляем
function get_header_imageset(){ $out = ‘’; echo $out; }
а в header.php добавляем вызов нашей функции, вместо картинки со ссылкой
getGeaderImageSet();
Тепрь дополним getGeaderImageSet() реальным конетнтом. Сделаем 2 массива – один под адреса картинок и второй под ссылки
$images = array(); $links = array();
и наполним их данными
$images[0] = ‘http://lifelongjourney/…../Pict1.jpg’; … $images[15] = ‘http://lifelongjourney/…../Pict15.jpg’; $links[0] = ‘http://lifelongjourney.ru/Post1’; .. $links[15] = ‘http://lifelongjourney.ru/Post15’;
Цикл, который будет делать заголовок из 4-х картинок
//перменная i – 20 Лет на рынке счетчика циклов, традиции надо уважать :D for ($i = 0; $i < 4; $i++){ $out .= “<a href=\”$link[$i]\”><img src=\”$images[$i]\”></a>”; //используются “, а не ‘, т.к. внутри “” производится подстановка перменных }
Ну первыч 4 картинки скрипт нам выводит! Ура. Почти победа.
Пока отложим файл functions.php в сторону и займемся CSS. Хотелось бы, чтобы картинки выглядили так же как и в исходном изображении – т.е. черная рамочка 4px вокруг каждой картинки. Учтем, что картинки, стоящие внутри не должны иметь одной грани, иначе выйдет слишком толстая граница. Для этого идем в файл style.css.
div#header-image a img{ border-color: black; border-style: solid; border-width: 4px 4px 4px 0; display: block; float: left; margin: 0; padding: 0; } div#header-image a img#first_pict{ border-color: black; border-style: solid; border-width: 4px 4px 4px 4px; display: block; float: left; margin: 0; padding: 0; }
Обратим внимание на #, это селектор тега с определенным ID, не самый гибкий спопсоб, но нам подойдет, как раз ничего лишнего не затронем. В пирмере два блока почти идентичного кода, для первой картинки и для всех последующих. Первая имеет все 4 границы, а остальные только верхнюю, правую и нижнюю.
Теперь надо добавить в строчку генерации картинок тот самый ID. Меняем цикл.
for ($i = 0; $i < 4; $i++){ if ($i % 4 != 0) $id = “”; else $id = “id = \”first_pict\””; $out .= “<a href=\”$link[$i]\”><img $id src=\”$images[$i]\”></a>”; }
% – это остаток от деления, сделано так, чтобы при желании можно было выводить несколько рядов картинок. ПРи таком исполнении каждый ряд будет начинаться как и первый с картинки, полностью убраной в рамку.
Настало время реализовать генерацию случайного набора картинок. Естественно, хочется сделать это без повторений. Для этого будем хранить номер каждой добавленной картинки в массиве и при генерации следующего случайного числа проверять, чтобы такого же номера не было среди уже добавленных. Добавим массив и перменную в начало функции
$vImageCount = 16;//Всего картинок $selected_images = array();//Каритнки, уже добавленные в заголовок
и теперь будет выбирать номер картинки функцией
for ($i = 0; $i < 4; $i++){ //if ($i != 0) $id = ""; if ($i % 4 == 0) $id = "id = \"first_pict\""; else $id = ""; $rnd = getNextImage($selected_images,$vImageCount); $out .= "<a href=\"$links[$rnd]\"><img $id src=\"$images[$rnd]\"></a>\n"; }
getNextImage – новая функция, которую мы сейчас напише. Ей в параметрах передаются массив, с уже добавленными картинками и общее число картинок, участвующих в выборе.
/* $selected_images – массив с номерами фотографий из заголовка $maxCount – общее число картинок, участвующих в выборе */ function getNextImage(&$selected_images,$maxCount){ $arr_len = count($selected_images);//сколько всего картинок уже в заголовке do{ $nextImage = mt_rand(0, $maxCount-1);//получить случайное число от 0 до максимального числа картинок }while ($arr_len != 0 && in_array($nextImage,$selected_images));//Число считается выбранным, елси это первая картинка или такой номер отсутсвует среди уже добавленных $selected_images[$arr_len] = $nextImage;//сохранить картинку в заголовке return $nextImage;//вернуть ее номер в вызывающую функцию }
Финальный вид двух функций:
//================================================================================= /* Function return UNIQUE number between 0 and $maxCount-1 $selected_images - array with imges already added into header. $maxCount - total imgae count */ function getNextImage(&$selected_images,$maxCount){ $arr_len = count($selected_images); do{ $nextImage = mt_rand(0, $maxCount-1); }while ($arr_len != 0 && in_array($nextImage,$selected_images)); $selected_images[$arr_len] = $nextImage; return $nextImage; } /* Function generates header image consits from 4 small images with links */ function get_header_imageset(){ $vImageCount = 16;//Total image count $selected_images = array();//Imgaes already added into header $images = array ( 0 => 'http://lifelongjourney.ru/***/header_images/Sablino_small.jpg', 1 => 'http://lifelongjourney.ru/***/header_images/Karpaty1_small.jpg', 2 => 'http://lifelongjourney.ru/***/header_images/Karpaty2_small.jpg', 3 => 'http://lifelongjourney.ru/***/header_images/Nepal_small.jpg', 4 => 'http://lifelongjourney.ru/***/header_images/Crimea_Demerdgi_small.jpg', 5 => 'http://lifelongjourney.ru/***/header_images/Karelia_OD_small.jpg', 6 => 'http://lifelongjourney.ru/***/header_images/Moscow_small.jpg', 7 => 'http://lifelongjourney.ru/***/header_images/Nepal_Tilicho_small.jpg', 8 => 'http://lifelongjourney.ru/***/header_images/Crimea_demerdgi_fog_small.jpg', 9 => 'http://lifelongjourney.ru/***/header_images/Crimea_sea_fog_small.jpg', 10 => 'http://lifelongjourney.ru/***/header_images/Nepal_clouds_small.jpg', 11 => 'http://lifelongjourney.ru/***/header_images/Nepal_Tilicho_Lake_small.jpg', 12 => 'http://lifelongjourney.ru/***/header_images/Crimea_Demerdji_Over_Clouds_small.jpg', 13 => 'http://lifelongjourney.ru/***/header_images/Paraplan_small.jpg', 14 => 'http://lifelongjourney.ru/***/header_images/Shushmor_night_small.jpg', 15 => 'http://lifelongjourney.ru/***/header_images/Warsaw_old_city_small.jpg' ); $links = array ( 0 => 'http://lifelongjourney.ru/2012/03/08/sablinskie-podzemelya-zabroshennaya-kamenolomnya-plyazhnaya/', 1 => 'http://lifelongjourney.ru/2012/05/17/pervocvety-guculshhiny-vesennij-treking-v-karpatax/', 2 => 'http://lifelongjourney.ru/2012/05/17/pervocvety-guculshhiny-vesennij-treking-v-karpatax/', 3 => 'http://lifelongjourney.ru/2011/09/14/nepal-2011-vokrug-annapurny-v-sezon-dozhdej/', 4 => 'http://lifelongjourney.ru/2012/03/15/zimnij-krym/', 5 => 'http://lifelongjourney.ru/2010/11/13/osudareva-doroga/', 6 => 'http://lifelongjourney.ru/2011/10/24/o-progulke-po-moskve-reke-i-kremlevskix-zvyozdax/', 7 => 'http://lifelongjourney.ru/2011/11/19/annapurna-v-sezon-dozhdej-manang-tilicho-base-camp-4-avgusta/', 8 => 'http://lifelongjourney.ru/2012/03/15/zimnij-krym/', 9 => 'http://lifelongjourney.ru/2012/11/14/volshebnyj-krym-v-yanvare/', 10 => 'http://lifelongjourney.ru/2011/11/02/annapurna-v-sezon-dozhdej-shrichaur-tal-28-iyulya/', 11 => 'http://lifelongjourney.ru/2011/11/20/annapurna-v-sezon-dozhdej-tilicho-base-camp-ozero-tilicho-tilicho-base-camp-5-avgusta/', 12 => 'http://lifelongjourney.ru/2012/11/14/volshebnyj-krym-v-yanvare/', 13 => 'http://lifelongjourney.ru/2012/05/29/proletaya-nad-kon-kamnem/', 14 => 'http://lifelongjourney.ru/2012/05/29/shushmor-peshkom/', 15 => 'http://lifelongjourney.ru/2010/12/31/novogodnij-pobeg-29-12-2010/' ); $out = ""; //make 4 pictures for ($i = 0; $i < 4; $i++){ //if ($i != 0) $id = ""; if ($i % 4 == 0) $id = "id = \"first_pict\""; else $id = ""; $rnd = getNextImage($selected_images,$vImageCount); $out .= "<a href=\"$links[$rnd]\"><img $id src=\"$images[$rnd]\"></a>\n"; } echo $out; }
В следующий раз перенесем хранение информации о картинках в базу данных.
До кучи неплохо было бы хранить ссылку на маленькую картинку в произвольном поле в каждой статье и брать ее уже оттуда…
Там по умочанию присутсвует такое поле для каждой статьи (если я ничего не путаю). Следущий вариант – переведу все в БД, а там уже можно будет при желании читать и эти поля, но у многих они просто не заполнены. Возможно, когда сделаю интерфейсную часть для плагина, добавить кнопку что-то типа “Прочитать картинки к посту”. За идею спасибо )
Да по умолчанию в некоторых темах можно хранить миниатюру для вывода картинки в ленту…
А на lifelongjourney не через миниатюру картинка в ленту выводится?
Выводится первая картинка из поста.
THX for sharing.