Лайняната река

Покрай активната напоследък масова друпализация реших да обърна малко внимание и на настоящия многострадален шлог като го поръчкам и понатоваря с още няколко модула, ужким за подобрение.

Исканията за сайтова двуезичност са задължителни от всеки нов клиент, кой знае защо въобразяващ си, че е време да "излезне" от сковаващите предприемчивата му мисъл рамки на милата родина.

Скорошният позакъснял интерес към едно мое старо произведение успя да ме мотивира да довърша описването на друг друпалски трик, който макар и дребен, изисква известни разяснения.

След онагледените в това писание ръчни манипулации на template.php за носталгичния вече Drupal 5, ъпгрейдването на един отдавна влачещ се проект наложи да разбера как да ги постигна в по-модерния контекст на шестицата.

Държа да отправя официално предупреждение към всяка заблудена душа, която евентуално някога би тръгнала да се забавлява с перверзните дебри на CSS2 без предпазно облекло и тиган за отзад.

Скъпи ми незнайнен съратнико по оръжие,

Дълго време отбягвах Drupal 6 заради недопроверените ми опасения, че вградената му многоезичност не работи достатъчно добре.

Все по-честите ми занимания с прословутия Drupal, както и често трагично неразбираемата му и несъществуваща документация, водят до почти случайни дребни открития, улесняващи донякъде живота на псевдо уеб дизайнера в мен.

В изпърженото от прекалено много часове пред компютъра съзнание винаги остава една мержелееща се в кафяво горчилка, когато дребна пречка предизвика циклене и тъпчене на място в продължение на дни, докато най-накрая не се окаже, че заобикалянето й е сравнително просто, ако се излезне отвъд правилата.

И разбира се, често резултатът невинаги е това, което сме искали отначало, но поне някакси работи и имаме с какво да оправдаем безвъзвратно изгубеното време и впоследствие придобития хроничен главобол.

Както и да, имам алтруистичното желание да споделя въпросния дърти хак с евентуалната общественост, която някога някакси евентуално би попаднала в този забравен шлогов раздел.

Постановка: Имаме node в Drupal, на който сме закачили CCK поле за качване на картинка. Направили сме content template, с който вкарваме картинката във float-нат див така, че да влиза в централното съдържание на node-а. Картинката има зададен чрез CSS margin 10px отдясно, за да не се долепя до текста.

Проблем: когато в съдържанието има списък, бил той с булети или с номерца, margin-ът на картинката не го измества в дясно, а се застъпват и по този начин булетите се смачкват под или над картинката.

Грешни посоки: Всякакви комбинации от CSS падинги, маргини и т.н., приложени както на картинката, така и на списъка, не постигат резултат. Вкарването на булета вътре в текста (list-style-position: inside) също не върши работа, защото Drupal поради някаква странна негова си несъвместимост (недоловима от зоркото firebug око) при по-важната половина браузъри (IE & FF) оставя булетите сами на ред и смъква целия текст отдолу, което не ни върши работа.

Решение: Типичен дърти хак - грозен, неелегантен и нелогичен, но все пак вършещ някаква работа:

- в content template-а точно до float-натата картинка слагаме един прозрачен гиф, разтеглен на 10 пиксела, вместо CSS маргина:
<ımg src="<?php print base_path() . path_to_theme() ?>/images/blank.gif" width=10px height=1px />
Като се има предвид, че тъй като вкарваме директно картинка в drupal-ски код, трябва да уточним пътя до нея динамично чрез двете променливи base_path и path_to_theme

- в случая обаче има зададен CSS стил за всички картинки, вкарани в друпалското съдържание с цел красота, който не трябва автоматично да се приложи на прозрачното гифче. Затова или му правим изричен CSS стил, който би могъл или да е външен, където декларациите трябва да са с !important, за да се наложат над придобитите:
.invisible {
background-color: transparent !important;
border: none !important;
margin: 0px !important;
padding: 0px !important;
}
или пък по-грозния, но по-високо йерархичен вариант, директно със style в кода:
style="background-color: transparent; border: none; margin: 0px; padding: 0px"

- тъй като не искаме гифчето да се появява в node-овете, в които не е качена картинка, трябва да конструираме едно небрежно if условие за появяването на кода:
<?php if(!empty($node->field_page_image[0]['view'])) { ?>
<?php print $node->field_page_image[0]['view'] ?><ımg src="<?php print base_path() . path_to_theme() ?>/images/blank.gif" width=10px height=1px style="background-color: transparent; border: none; margin: 0px; padding: 0px" >
<?php } ?>

- чрез CSS премахваме отстоянието на списъците. Оказва се, че половината браузъри използват padding за целта, а другата половина - margin, затова нулираме и двете:
.main_content ul {
margin-left: 0px;
padding-left: 0px;
}

- избутваме малко отстоянието на всеки от редовете на списъците:
.main_content ul li {
list-style-type: disc;
margin-left: 25px;
}

- финално получаваме следната грозотия:

Гифчето избутва цялото съдържание с 10 пиксела вдясно, като по този начин булетите, които на практика са залепени за ръба му, се виждат на 10 пиксела разстояние от самата картинка.

Работи ли? Работи.

Грозно ли е? Грозно е.

Дреме ли ми? Май не.

Тъй като до голяма степен ме мързи да измислям някакъв гениален дезигн за шлога, а и честно казано нямам никакви идеи, реших просто да сменя дразнещо ведрия цвят на друпалския скин minelli, който използвам понастоящем.

Отваряме всичките картинки във фотошопа, hue докрай наляво, после -50% saturation и стигаме до тази толкова експресивна разцветка на кафявото, напомняща за щедрата, тучна и прогаряща диария, която всеки от нас е изливал със злочести напъни из все още дивата крайморска растителност, след като е направил грешката да пие местна вода нейде из затънтеното южно черноморие.

С цветовете, указани в CSS-а процедурата е малко по-хамалска - копира се хекс кодът, прави се квадратче със съответния цвят в нов празен документ и после горната процедура се повтаря.

А впечатлителното детско съзнание завинаги ще помни смесването на категоричната прясна миризма на ярко кафявия огън с натрапчивата и специфична такава на бодливите околоплажни растения, чиито имена не знам и до днес, но съм клечал сред тях неведнъж.

Ех, соц минало незабравимо.

Инсталацията и нагласянето на настоящия блог ме доведоха до доста човъркане, четене за нови модули, нагласяне, хакове и т.н. дигитални еквиваленти на олепването с гафър и завързване с тел, толкова типични за любимия ми Друпал.

Като цяло мога да похваля авторите на Pathauto, че модулът им е страхотен и върши работа не само за генериране на урл от заглавие, а и за всякакви досега проблемни ми ситуации, примерно автоматично преименуване на адреси за различните таксономии, което досега се мъчех все да правя с Views и кой знае защо, работеше само когато си поиска (щото съм прост най-вероятно). Транслитерацията също е много удобна, наглася се чрез една таблица на символите в отделен текстов файл и генерира звучни думи като "pradnia", готови за индексиране от всички гугъли на света.

За първи път се запознах и с така наречените филтри за Filtered HTML форматирането, като по тоя повод вече прикачването на Youtube клипчета и смайлита е безпроблемно (а винаги съм си мислел, че за целта трябва някаква мега сложнотия като Token модула, от който нищо не разбирам).

По този повод си поиграх да направя нов pack със смайлита от любимия си добър стар Инвижън борд. 47 са засега, не съм включил някои от по-големите, щото много разместват. Прикачил съм го като архивче (виж по-надолу).

Ако някой да се излъже да си го дръпне, в него е пълно с вируси и скриптове за абонамент към всякакви мръснишки сайтове. Шегичка. Ха ха.