Дърти бизнес

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

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

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

Постановка: Имаме 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 маргина:
&lt;ımg src="<!--?php print base_path() . path_to_theme() ?-->/images/blank.gif" width=10px height=1px /&gt;
Като се има предвид, че тъй като вкарваме директно картинка в drupal-ски код, трябва да уточним пътя до нея динамично чрез двете променливи base_path и path_to_theme

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

- тъй като не искаме гифчето да се появява в node-овете, в които не е качена картинка, трябва да конструираме едно небрежно if условие за появяването на кода:
<!--?php if(!empty($node--->field_page_image[0]['view'])) { ?&gt;<br>

<br> <!--?php } ?-->

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

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

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

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

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

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

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