Робимо плагін для ор картинок для шапки сайту
Спостерігаючи за знайомими на роботі я помітив, що вони клацають у картинки заголовка http://lifelongjourney.ru в надії потрапити на пости, що містять цю саму фотку.
Раніше там стояла просто довга картинка, склеєна з 4-х маленьких за розміром. Лінк із неї, відповідно, вів на одну посаду. Ну і зародилася ідея поїсти цей колаж і ще наявних в запасі 3 штуки на 16 фото, зробити до кожної картинки посилання і виводити це все в заголовку, збираючи рандомно 4 картинки. Дивимося на lifelongjourney.ru у шапку сайту.
Та й ось, що з цього вийшло.
Для початку нарізав 16 картинок розміром 275 182 Т.к. використовується дочірня тема (про дочірні теми як-небудь напишу докладно), то всі зміни проводимо у файлах дочірньої теми. Відразу зробимо заділ на майбутнє – генеруватимемо висновок функцією, відповідно до functions.php дочірньої теми додаємо
а в header.php додаємо виклик нашої функції замість картинки з посиланням
і наповнимо їх даними
Цикл, який робитиме заголовок з 4-х картинок
Ну перш 4 картинки скрипт нам виводить! Ура. Майже перемога.
Поки відкладемо файл functions.php убік і займемося CSS. Хотілося б, щоб картинки виглядали як і у вихідному зображенні – тобто. чорна рамка 4px навколо кожної картинки. Врахуємо, що картинки, що стоять усередині, не повинні мати однієї грані, інакше вийде занадто товста межа. Для цього йдемо у файл style.css.
Звернімо увагу на #, це селектор тега з певним ID, не найбільш гнучкий спосіб, але нам підійде, якраз нічого зайвого не торкнемося. У пірмері два блоки майже ідентичного коду, для першої картинки та для всіх наступних.Перша має всі 4 межі, а решта тільки верхню, праву та нижню.
Тепер треба додати в рядок генерації картинок цей ID. Змінюємо цикл.
% – це залишок від поділу, зроблено те щоб за бажання можна було виводити кілька рядів картинок. При такому виконанні кожен ряд буде починатися як і перший з картинки, повністю прибраної в рамку.
Настав час реалізувати генерацію випадкового набору картинок. Звичайно, хочеться зробити це без повторень. Для цього зберігатимемо номер кожної доданої картинки в масиві і при генерації наступного випадкового числа перевіряти, щоб такого ж номера не було серед доданих. Додамо масив та пермінну на початок функції
і тепер буде вибирати номер картинки функцією
getNextImage – нова функція, яку ми зараз напишемо. Їй у параметрах передаються масив, з доданими картинками і загальна кількість картинок, що у виборі.
Фінальний вигляд двох функцій:
Наступного разу перенесемо зберігання інформації про картинки до бази даних.