Гламурные заголовки в статьях

Главные вкладки

Аватар пользователя dragondesign dragondesign 23 июня 2009 в 15:22

Вы брали печатные глянцевые журналы в руки, смотрели заголовки? Там полиграфия, можно и под углом 45% делать и по кругу. В вебе же все намного прагматичнее, но почему бы не внести некоторое разнообразие в проект, в виде красивых заголовков. Безусловно с помощью классов можно как угодно расцвечивать и менять заголовки целиком, но нас же интересует возможность разделять, например одно слово БОЛЬШОЕ другое маленькое... одно одним цветом другое другим. Конечно можно вставить теги в стандартный Title, но вся беда в том что теги потом видны в заголовке браузера - некрасиво да и нехорошо.
А наша цель, чтобы заголовки были такими:
image

или такими

image.

Для этого нам понадобятся модуль CCK.
В редактированнии типа ноды добавляем новое поле типа Text, количество строк 1. Я назвал его mature_title.
image
В "Справочный текст" вводим информациию о том как использовать.

Теперь при создании и редактировании ноды у нас есть поле "Красивый заголовок":
image

В файле node-page.tpl.php, в месте где выводится заголовок, пишем следующую конструкцию:
<h1><?php if ($node->field_maturtitle[0]['value']){ print $node->field_maturtitle[0]['value']; } else { print $title; } ?></h1>

В CSS прписываем как должны выглядеть наши теги (тут #article_panel у меня блок в котором отображается статья, я жестко прописал путь, чтобы ни на что другое не влияло, вы вольны сами выбрать как именно вам сверстать заголовок):

#article_panel h1 span.tit_green {
        color: #a0c61b;
}
#article_panel h1 span.tit_orange {
        color: #fe9900;
}
...
#article_panel h1 span.tit_big {
        font-size: 26px;
}
#article_panel h1 span.tit_normal {
        font-size: 18px;
        font-weight: bold;
}
#article_panel h1 span.tit_verybig {
        font-size: 30px;
}
#article_panel h1 span.tit_newline {
        display: block;
        line-height: 35px;
}
#article_panel h1 span.tit_leftmargin {
        margin-left: 30px;
}

и т.д. тут уж как фантазия попрет.

Да метод почти ручной, но вы же хотите красивые заголовки!? Да и на обучение этому методу редактора не составит труда, у меня ушло 5 минут. Если же не требуется красивый заголовок, то просто оставляете поле пустым, будет показыватся стандартный заголовок. Я реализовал это в Женском журнале Прелесть www.prelest.com

Можно прикрутить редактор к этому полю, тогда будет проще, но я все таки предпочитаю чтобы в заголовке не присутствовали лишние теги.

Надеюсь статья была вам полезна. Если есть вопросы спрашивайте.

Комментарии

Аватар пользователя Химический Али Химический Али 23 июня 2009 в 16:42

Зачем такое ручное, если можно было сделать еще одно сск-поле с выбором того или иного "гламурного" стиля для заголовка?

зы. Все впечатление от "гламурности" исчезает при виде дефолтного уродства "Опубликовано блаблабла"

Аватар пользователя dragondesign dragondesign 23 июня 2009 в 21:16

Химический Али wrote:
Зачем такое ручное, если можно было сделать еще одно сск-поле с выбором того или иного "гламурного" стиля для заголовка?

зы. Все впечатление от "гламурности" исчезает при виде дефолтного уродства "Опубликовано блаблабла"

Да, но вы таким образом выберете стиль который будет распространятся на весь заголовок, скажем он весь будет синим ...или весь будет гигантским.. а как же быть если необходимо первое слово сделать зеленым, два других голубым шрифтом в 2 раза больше чем зеленый да еще и на следующей строчке, а следующее слово на следующей строчке красным помельче... причем в каждой статье по своему
Купите Cosmo, Glamour, Vogue, Mini .... и поизучайте предметную область на досуге. Для всех поголовно ресурсов это не актуально, а вот для женской тематики... нужно учесть все моменты, ведь их вкусы так непредсказуемы Smile

ПО вашему все дефолтное - уродство? Для посетительницы, надпись опубликовано тем то - тогда то ... не является уродством, это информация о материале.

Аватар пользователя neochief neochief 23 июня 2009 в 16:45

В семерке все уже будет нативно, появилась возможноть отключать фильтрацию для заголовков: http://api.drupal.org/api/function/drupal_set_title/7 .

Что касается вашего примера, он хоть и "работает", но это открытая XSS уязвимость. Вам нужно фильтровать ваше поле при выводе с помощью check_markup(), либо включить фильтрацию в настройках поля.

Аватар пользователя dragondesign dragondesign 23 июня 2009 в 21:14

neochief wrote:
В семерке все уже будет нативно, появилась возможноть отключать фильтрацию для заголовков: http://api.drupal.org/api/function/drupal_set_title/7 .

Что касается вашего примера, он хоть и "работает", но это открытая XSS уязвимость. Вам нужно фильтровать ваше поле при выводе с помощью check_markup(), либо включить фильтрацию в настройках поля.


Большое спасибо, учту этот момент