Боксиране

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

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

Клишето teaser->full node е неприложимо в случая,  препратка към друг node - също, тъй като идеята всичко да е удобно за от клиентска гледна точка и съответно да може да се бърника в рамките на една node edit форма.

Спасител в ръжта се явява все така актуалният Colorbox, в когото ще отваряме допълнителния скучен контент, който пък от своя страна ще се помещава в отделно CCK текстово поле, а линк/бутон за отваряне на колорбокса ще се появява само когато въпросното поле не е празно.

Необходимите друпалски модули за операцията са:

  • CCK и по-специално CCK Text и CCK Fieldgroup
  • Colorbox
  • Contemplate

Бързо отбиване на крак към опциите на Colorbox (admin -> site configuration -> colorbox) и пускаме опцията "Enable Colorbox inline", която позволява отваряне в лайтбокс на определен html елемент, ориентирайки се по id-то му. 

На операционната маса се полага стандартен node тип, примерно Page и бързо се ориентираме към CCK полетата му:

admin -> content management -> content types -> page -> manage fields

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

Наместваме с провлачване новия Fieldgroup точно под Content полето и натискаме Save, за да си остане там занапред, след което в Configure пишем разбираем за нормални хора label, примерно "Допълнително съдържание" и избираме Style: collapsed,  след което Save.

Обратно в Manage fields, вече се заемаме с добавяне на новото допълнително поле за съдържание:

  • Label: Скрито съдържание
  • Field name: hiddencontent
  • Type: Text
  • Form element: Text area (multiple rows)

След което в отворилия се диалог за опции се избират само Number of values: 1 (за да не се появява повече от едно поле) и Text processing: filtered text (за да може да се пише в него с WYSIWYG редактор).

С ловко провлачване нагоре и надясно нагласяме вече показалото се в Manage fields поле така, че да е подопечно на fieldgroup-а, който направихме преди малко, след което записваме подредбата. 

Прехвърляме се на следващия таб Display fields, където в teaser view смело се раздават Hidden опции и за самото текстово поле и за label-а му, докато за fieldgroup-а няма нужда, тъй като показването му бива елиминирано във следващата стъпка.

Последният таб идва до нас с любезната подкрепа на модула Contemplate и ни дава възможност с чисто php да нагласяме кое, къде и как да се показва в content-а на човъркания в момента тип съдържание.

Изпускаме Teaser и цъкаме чавката директно на Body, където се изсипва следният php код:

<?php print $node->content['body']['#value'] ?>
<div>
<?php if ($node->field_hiddencontent[0]['view']): ?>
<?php print '<div><ul class="links inline">';?>
<?php print '<li class="node_read_more">';?>
<?php print '<a href="?width=500&height=500&inline=true#hiddencontent" class="colorbox-inline">';?>
<?php print t('Read more');?>
<?php print '</a></li></ul><br class="clearfloat" /></div>';?>
<?php endif; ?>
</div>
<div style="display: none"><div id="hiddencontent"><?php print $node->field_hiddencontent[0]['view'] ?></div></div>

След записване на темплейта, операцията вече може да се смята за успешна.

Симултантен превод на случващото се в php кода:

  1. Показва се същинското съдържание на node-а (полето content)
  2. Проверява се дали новото поле hiddencontent е празно
  3. ако не е, се изсипва малко html код, който генерира имитация на тийзърния линк "Read more", с все вкарания в преводните стрингове текст, за да спазим правилата за локализация
  4. самият линк има приложен css стил "colorbox-inline", а в href-а му е указано id-то на полето, чието разполагане следва
  5. Показва се и hiddencontent полето,  като го обвиваме в div с id="hiddencontent", а него пък обвиваме с друг див, който скрива всичко с "display: none"

И на практика се получава следните практически положения:

  • Ако човек иска да си публикува обикновена страница в друпала, си публикува обикновена страница по стандартната клинична пътека и тя се показва в най-нормалния си вид - заглавие и съдържание.
  • Ако човек иска освен нормалното съдържание, да прибави към него примерно дълга и досадна таблица, цъка на "допълнително съдържание", и отваряйки fieldset-а с мазна анимация, я пейства в полето "Скрито съдържание" и при публикуване под основния content автоматично се показва един линк "Прочетете повече", при цъкването на който въпросната таблица се появява на бял свят, въдворена в модален colorbox.

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

Average: 3.7 (6 votes)

Коментирай