prawie jak programista

W miarę prosty sposób na boksy z linkami, jakie czasem widzi się na stronie głównej W okrojonej wersji wygląda to mniej-więcej tak:

Jak widać, box składa się z krótkiego hasła i jego rozwinięcia, myślałem więc o stworzeniu zwykłych drupalowych boksów na stronie, lecz trochę to nieintuicyjne - trzeba ręcznie edytować adresy linków oraz pamiętać o składni HTML.

Ostatecznie do stworzenia takich boksów udało się jednak wykorzystać menu, które to oprócz tekstu odnośnika posiada możliwość wprowadzenia jego opisu, zatem otrzymujemy 2 pola tekstowe, wystarczy je tylko wyświetlić na stronie.

Menu primary-links może się przydać do innych rzeczy, zatem użyjemy secondary-links. W ustawieniach menu secondary-links dodajemy kilka pozycji uzupełniając pola Tekst odnośnika oraz Opis:

W pliku template.php w katalogu z szablonem dodajemy nową funkcję odpowiedzialną za generowanie struktury HTML boksów. Funkcja pobiera utworzoną przed chwilą listę elementów menu i formatuje ją pobierając zarówno treść odnośnika jak i opis:

 
function boxy_links() {
	$links = menu_secondary_links();
	$c = 1;
	$output = "<ul class=\"boxy-links\">\n";
	if ($links) {
		foreach ($links as $link) {
			// zawartosc boksu
			$content = '<a href="'. url($link['href']).'">';
			$content .= '<h4>' . $link['title'] . '</h4>';
			$content .= '<h5>' . $link['attributes']['title'] . '</h5>';
			$content .= '</a>';
			// owiniecie LI z klasami
			$class = 'boxy-item-'.$c ;
			if($c==1) $class .= ' first';
			if($c==count($links)) $class .= ' last';
			$output .= '<li class="'.$class.'">' . $content. '</li>'; 
			$c++;
		};
		$output .= '</ul>';
	}
	return $output ;
}
 

Generowanie kodu mamy gotowe, teraz trochę styli - do pliku ze stylem CSS skórki doklejamy na końcu:

 
ul.boxy-links{
	list-style: none;
}
ul.boxy-links li{
	background:#EEEEEE none repeat scroll 0 0;
	display:inline-block;
	margin:0 10px 0 0;
	padding:5px;
	width: 200px;
}
ul.boxy-links li.last{
	margin-right:0;
}
ul.boxy-links li h4{
	border-bottom:2px solid #6688AA;
	margin: 0;
	padding:3px 5px;
}
ul.boxy-links li h5{
	margin: 0;
	padding:3px 5px;
}
 

Jeszcze tylko wstawić to na stronę. W szablonie strony głównej (u mnie jest to page-front.tpl.php) w wybranym miejscu wywołujemy naszą funkcję:

 
<div id="front_boxes">
	<?php print boxmenu_links(); ?>
</div>
 

Gotowe. Wystarczy dostosować wygląd w CSS i boksy nadają się do uzytku ;)