Как у меня сменяются картинки в заголовке страницы
Опубликовал Александр Шабуневич — 14 Июнь 2006, 14:43
Статья устарела и оставлена здесь лишь ради исторической справедливости.
Некоторые люди интересуются как можно сделать смену изображений в заголовке страницы как у Зельдмана или как у меня в блоге. Сейчас объясню как это сделать при помощи Textpattern.
Идея
Идею я и правда взял у Джеффри, только не с его блога, а со старого дизайна ALA. У него у самого картинки сменяются случайным образом при перезагрузке страницы, а у меня зависят от пути, по которому доступна статья. Эти картинки относятся к оформлению, поэтому все они вынесены во внешний CSS, который, кроме того, определяет подходящую цветовую гамму сайта.
Реализация
В папке /css/random лежит кучка CSS-файлов, предназначенных для случайной выборки одного из них. В каждом прописано что-то вроде:
@import url(../green.css);
#visual{background:url(/i/vis/g-4.jpg) no-repeat center}Первой строчкой мы загружаем файл цветовой гаммы.
Всего таких файла 3: красный, зеленый и синий. Каждый из них определяет соответствующую раскраску ссылок, заголовков и плашек на всей странице.
Вторая строчка отвечает за отображение нужного визуала сверху страницы.
Остается только выбрать этот самый файл и прописать в секцию <head>, после всех других стилей. Занимается этим очень маленький модуль для Textpattern, который я написал специально для этой цели.
Скачать его вы можете здесь: spr_change_css.txt.
Вам нужно его проинсталлировать (думаю вы знаете как это делается), а затем включить. Теперь в шаблон вашей страницы (в секцию <head>) добавьте следующий код:
<txp:spr_change_css dir="/css/random" />Вместо /css/random можно указать любую папку, в которой будут лежать ваши случайные CSS-файлы.
Этот TXP-тег должен выводить ссылку на включаемый CSS-файл, выбранный случайно, исходя из секции и номера статьи. Может делает он это и не лучшим образом — я не самый большой знаток Textpattern — но для меня это работает.
Комментарии
Отлично! Спасибо, Александр!
Сегодня же еду оплачивать хостинг, чтобы опробовать все это дело на реальном сайте, а не на тестовом домашнем веб-сервере.
P.S. Ссылка на green.css с опечаткой, но все и так понятно.
Всегда пожалуйста =)
Ссылку исправил
Очень красиво, и, что главное, дизайн при этом смотрится целостно, чего не всегда удается добится простой подменой одной картинки в шапке.
Про смену картинок я знал и раньше. Мне вот интересно, где ты берешь такие изумительные иллюстрации (особенно это касается моста)? :)
>> где ты берешь такие изумительные иллюстрации
Действительно, где? :)
Картинки в основном в stock.xchng — там море бесплатных фотографий. Потом еще каждую дополнительно обрабатываю.
Нашёл тот самый мост :). Здорово ты его обработал, молодец. =)
Спасибо.
Про ломографию:
http://digital-photography-school.com/blog/how-to-make-digital-photos-look-like-lomo-photography/
И Вам, TheBits, спасибо за ссылку. :)
Кстати, если кто-то хочет применить подобную технику у себя на сайте, но не пользуется при этом TXP, то вот эта статья будет весьма полезна
Обалденный линклист находим на wwww.bluevertigo.com.ar/bluevertigo.htm. Целая куча всего кроме картинок :)
превед, я конечно в этом деле пока не специалист, но одно могу сказать, на странице у тя ошибка, во всяком случае, так у меня браузер(ИЕ6) показывает. а в остальном спасибо за статьи
идея не плохая, надо будет в выходные немножко поэкспериментировать.
@DI: пользуюсь тоже IE, но никаких ошибок не замечал.