Ik had weer zin om een Rails helper te posten. Dit keer kom ik met ‘Griddify’. Dit is een helper waarmee je gemakkelijk een aantal div’jes als grid kunt aanmaken. Er worden een aantal classes en id’s gekoppeld aan de aangemaakte div’jes, zodat je het gemakkelijk mooi kunt maken met CSS. Dit is dan de helper.

def griddify(array, cols, options = {})
	array = array.in_groups_of(cols, options[:fill_with])
	options[:rows] ||= array.length
	options[:row_id] ||= "gridRow"
	options[:row_class] ||= "gridRow"
	options[:column_id] ||= "gridColumn"
	options[:column_class] ||= "gridColumn"

	if options[:rows] > array.length && options[:fill_with] != false
		rows_array = []
 		((options[:rows] - array.length) * cols).times { rows_array.push(options[:fill_with]) }
    	array.concat(rows_array.in_groups_of(cols))
	elsif options[:rows] < array.length
   	(array.length - options[:rows]).times { array.slice!(-1) }
	end

	array.each_with_index do |row, row_index|
		concat "<div class=\"#{options[:row_class]}\" id=\"#{options[:row_id]}_#{row_index}\">"
		row.each_with_index do |column, column_index|
			concat "<div class=\"#{options[:column_class]}\" id=\"#{options[:column_id]}_#{row_index * cols + column_index}\">"
			yield column if block_given? && !column.blank?
			concat "</div>"
		end
		concat "</div>"
	end
end

Behoorlijk uitgebreid dus. Je hoeft niet per se te weten hoe het werkt, maar wel hoe je het kunt gebruiken. Gelukkig is dat behoorlijk gemakkelijk. Als we alle blogposts in de variabele @posts hebben gestopt en we willen alles laten zien in rijen van twee kolommen, dan doe je het volgende.

<% griddify(@posts, 2) do |post| %>
	<%= post.title %>
<% end %>

Er worden div'jes aangemaakt die je zo kunt stijlen dat het er als een grid uitziet. Wil je ook een limiet op het aantal rijen, dan geef je simpelweg een extra parameter mee.

<% griddify(@posts, 2, :rows => 4) do |post| %>
	<%= post.title %>
<% end %>

Nu komen er dus maximaal acht blogposts in het grid. Als er minder dan acht blogposts in de database zitten worden de div'jes toch aangemaakt, zodat het grid er blijft. Naast de :rows kun je ook andere parameters meesturen. Zo kun je elke rij een andere :row_id of :row_class meegeven en elke kolom een andere :column_id of :column_class. Deze staan standaard op 'gridRow' en 'gridColumn'.

Om te illustreren wat er gebeurt als je griddify uitvoert laat ik hier een voorbeeld zien.

<% griddify(@posts, 2, :rows => 2) do |post| %>
	<%= post.title %>
<% end %>

Dit geeft:

<div id="gridRow_1" class="gridRow">
	<div class="gridColumn" id="gridColumn_0">
		Hello world!
	</div>
	<div class="gridColumn" id="gridColumn_1">
		Once upon a time
	</div>
</div>
<div id="gridRow_2" class="gridRow">
	<div class="gridColumn" id="gridColumn_2">
		Pretty neat
	</div>
	<div class="gridColumn" id="gridColumn_3">
		Griddify is awesome!
	</div>
</div>

Veel plezier met deze helper. Het had mij een hoop tijd gekost als ik dit had gemaakt voor de website voor het Nederlands Dans Theater. Hopelijk voorkomt dit voor jullie een hoop overbodig werk.