WordPress – Yaml – Linkliste im Grid

Ich bin inzwischen ein großer Anhänger der fexible grids des Yaml CSS Frameworks. Ein Beispiel:

In CMS kann man neben dem eigentlichen Inhalt auch sehr übersichtlich Links verwalten. WordPress bietet dafür die Blogroll. In dieser können neben dem Link und dem Titel auch ein Bild und eine kleine Beschreibung zugeordnet werden. Unter Verwendung von Yaml versuchen wir nun diese Blogroll ansprechend in einem Grid (hier zwei-spaltig) darzustellen.

$bookmarks = get_bookmarks(); 
    								
$i = True;
$end_left = False;
									
foreach ( $bookmarks as $bm ) 
{ 
    if (True == $i) //float left
    {
         printf( '<div class="ym-grid"><div class="ym-g50 ym-gl"><div class="ym-gbox"><a href="%s" target="_blank">%s</a><br />', $bm->link_url, __($bm->link_name));
	 printf( '<a target="_blank" href="%s"><img src="%s" width="120px" height="40px"/></a>', $bm->link_url, $bm->link_image);
	 printf( '<p>%s</p></div></div>', $bm->link_description);
	 $end_left = True;
    }
    else //float right
    {
	 printf( '<div class="ym-g50 ym-gr"><div class="ym-gbox"><a href="%s" target="_blank">%s</a><br />', $bm->link_url, __($bm->link_name));
	 printf( '<a target="_blank" href="%s"><img src="%s" width="120px" height="40px"/></a>', $bm->link_url, $bm->link_image);
	 printf( '<p>%s</p></div></div></div>', $bm->link_description);
	 $end_left = False;
     }
    									
    $i = !$i;
}
									
if ($end_left)
   printf('<div class="ym-g50 ym-gr"><div class="ym-gbox"></div></div></div>');

Anstelle des Bool-Wertes $i könnte man auch einen Zähler einbauen und so ein beliebig-spaltiges Layout nutzen. Wichtig dabei ist, dass man, sollte die Schleife nicht in der letzten Spalte enden, das Grid dennoch sauber schließt. Dafür reicht bei einem zwei-spaltigen Layout übrigens ein Bool-Wert, wenn man kurz nachdenkt.

Auch wenn diese Methode etwas aufwendig erscheint liegen die Vorteile auf der Hand: Browser Kompatibitlität, Verwaltung der Links über ein CMS, schickes Design (fexible Grids), das sich der Browser Größe anpasst.