Counting Blocks in Drupal

We had a situation where we had a region of blocks, but the number of those blocks could fluctuate. This was based on how much content the client wanted to feature in the region.

This posed a problem when it came to the layout CSS – using traditional floats, we need to know how many things we have that we’re trying to lay out. This lets us know how wide to set the child elements. Flexbox would have solved a lot of this, but alas.

So we needed some way to know how many blocks would be present in a region, even if that number changed. We could adjust the CSS accordingly.

It turned out to be a really simple preprocess function:

function THEMENAME_preprocess_region(&$vars) {
		$block_number = count($vars['elements']) - 5;
 		$vars['classes_array'][''] = 'block-count--' . $block_number;
	}

This function needs to go in your theme’s template.php file, and be sure to change ‘THEMENAME’ to whatever your theme is, well, named.

What is that ‘5’ all about? In Drupal, a region contains a number of arrays, and the blocks show up in the ‘elements’ array. That array lists all of the blocks, plus 5 other properties of the region. So we count the number of items in the elements array, subtract by 5, and that is the number of blocks we have.

This will attach a class to the region parent that indicates the number of blocks, e.g. ‘block-count–4’ or ‘block-count–2’.

This works on any region that has a <div> wrapped around its output. So, the $content region usually won’t get this class. Most other regions should.

With that, you can do things like this in your CSS:

.block {
	float: left;
}
.block-count--2 .block {
	width: 50%;
}
.block-count--3 .block {
	width: 33%;
}
.block-count--4 .block {
	width: 25%;
}

I hope you find this helpful!

Read MoreLeave a comment

How to apply classes to elements with CKEditor 4, in Drupal 7

I’m just jotting down a couple things that I figured out recently with regards to making modifications to the CKEditor WYSWIG editor in a Drupal 7 installation.

On a recent project, we had a client who wanted the ability to have images in the body float left or right. What I wanted to see happen, as a front end developer, is that the images would simply have a class attached to them, and my external CSS would handle the floating.

Why a class (as opposed to inline styling?):

  • Cleaner markup in general
  • Style attributes were being stripped by our text format, and I didn’t want to let any HTML fly within this format
  • Just adding a class would make future modifications easier (rather than trying to modify individual instances of inline styles)

After an afternoon of experimentation, I found out you need two files added to your theme, and a weird trick to make sure it works.

Read More10 Comments

Changing the <body> element classes in Drupal 7

Drupal has many odd things hard-wired into it. The one I want to get into today is how, in Drupal 7, the <body> element has classes attached to it that sometimes just don’t make sense.

Let’s say you enable a theme, and your <body> element looks like this:

<body class="html front logged-in no-sidebars page-node" >

This happens for me when I have created a new Aurora based sub-theme. The only most of the classes are fine, but the no-sidebars class is the odd duck.

Read MoreLeave a comment