Как у меня сменяются картинки в заголовке страницы

2006-06-14 перейти к комментариям

Textpattern

Некоторые люди интересуются как можно сделать смену изображений в заголовке страницы как у Зельдмана или как у меня в блоге. Сейчас объясню как это сделать при помощи 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 — но для меня это работает.

Теги: , ,

Комментарии RSS для комментариев

  1. # Игорь Фролов — 1542 дн. назад:

    Отлично! Спасибо, Александр!
    Сегодня же еду оплачивать хостинг, чтобы опробовать все это дело на реальном сайте, а не на тестовом домашнем веб-сервере.

    P.S. Ссылка на green.css с опечаткой, но все и так понятно.

  2. # Александр Шабуневич — 1542 дн. назад:

    Всегда пожалуйста =)

    Ссылку исправил

  3. # Dm — 1541 дн. назад:

    Очень красиво, и, что главное, дизайн при этом смотрится целостно, чего не всегда удается добится простой подменой одной картинки в шапке.

  4. # Владимир Яшников — 1540 дн. назад:

    Про смену картинок я знал и раньше. Мне вот интересно, где ты берешь такие изумительные иллюстрации (особенно это касается моста)? :)

  5. # TheBits — 1540 дн. назад:

    >> где ты берешь такие изумительные иллюстрации
    Действительно, где? :)

  6. # Александр Шабуневич — 1540 дн. назад:

    Картинки в основном в stock.xchng — там море бесплатных фотографий. Потом еще каждую дополнительно обрабатываю.

  7. # Владимир Яшников — 1540 дн. назад:

    Нашёл тот самый мост :). Здорово ты его обработал, молодец. =)

  8. # TheBits — 1540 дн. назад:

    Спасибо.
    Про ломографию:
    http://digital-photography-school.com/blog/how-to-make-digital-photos-look-like-lomo-photography/

  9. # Владимир Яшников — 1539 дн. назад:

    И Вам, TheBits, спасибо за ссылку. :)

  10. # Владимир Яшников — 1536 дн. назад:

    Кстати, если кто-то хочет применить подобную технику у себя на сайте, но не пользуется при этом TXP, то вот эта статья будет весьма полезна

  11. # ql3x — 1521 дн. назад:

    Обалденный линклист находим на wwww.bluevertigo.com.ar/bluevertigo.htm. Целая куча всего кроме картинок :)

  12. # Di — 1504 дн. назад:

    превед, я конечно в этом деле пока не специалист, но одно могу сказать, на странице у тя ошибка, во всяком случае, так у меня браузер(ИЕ6) показывает. а в остальном спасибо за статьи

  13. # 3dsl Eugen — 1371 дн. назад:

    идея не плохая, надо будет в выходные немножко поэкспериментировать.

    @DI: пользуюсь тоже IE, но никаких ошибок не замечал.

Что вы об этом думаете?

Помощь по Textile, gravatar

Редактор TopStyle Pro Дизайн ради дизайна