Drupal Custom View Modes & Templates per View Mode

Just a quick reminder how to programmatically create your own Drupal 7 View Modes. Replace superdrop_helpers with the name of your own module and listing with the desired name of your Drupal View Mode.

* Implements hook_entity_info_alter().
* Creates a new view mode called <listing>
function superdrop_helpers_entity_info_alter(&$entity_info) {
  $entity_info['node']['view modes']['listing'] = array(
    'label' => t('Auflistung'),
    'custom settings' => TRUE,

* Implements hook_preprocess_node().
* Template file suggestion for the previously generated view mode
* e.g.: node--article--listing.tpl.php
function superdrop_helpers_preprocess_node(&$vars) {
  if($vars['view_mode'] == 'listing') {
    $vars['theme_hook_suggestions'][] = 'node__' . $vars['type'] . '__listing';

Thanks to wunderkraut for their article on this topic, check it out if you need more explanation than just the snippet:


Drupal Module Comparison: Publish Button vs Safe Draft

To publish and unpublish content in Drupal you ususually have to tick or untick the Published checkbox before hitting the Save button. Sparing your users a click is alway a good idea, so why not considering a module that simplifies the action of publishing and unpublishing content.

Please welcome Publish Button and Safe Draft.

Both modules will simply add button actions to your nodes to publish/unpublish content instead of ticking that clumsy checkbox.

Here's why I opted for Publish Button over Safe Draft:

  • Publish Button is actively maintained, Safe Drafts was last updated in 2011
  • Publish Button can be enabled per-content type whereas Safe Drafts is always enabled globally
  • Publish Button features per-content type permissions
  • Publish Button hides empty vertical tabs opposed to Safe Draft, which shows the Publishing options tab even when it's completely empty

Drupal User Registration and Login with Email instead of Username

Drupal's default registration process is more complicated than it should be. To simplify the process I like my users to sign up and log in with only their email address and password.

There are various ways to deal with that issue, with Login Toboggan being one of the most popular ones. However, I rarely need all the other stuff that comes with this module and I prefer small modules that focus on a single task. Besides, Login Toboggan only allows to login with an email address as an alternative to the username, it doesn't remove the need to create a username in the first place.

So what I found best for my needs is a combination of the Email Registration module and a tiny custom module.

Output a Field Collection's Item ID and build a Jump Navigation

It just took me a while to figure this out, as I needed the Field Collection's ID to build anchors for a (views built) jump navigation. Here's how I'm wrapping each Field Collection item with a section tag that has a CSS ID with each Field Collection item's unique identifier.

<section id="section-<?php print $elements['#entity']->item_id; ?>">
  <?php print render($content); ?>

For future reference here's also the (simple) View that builds the jump navigation from Field Collection titles. It takes the node ID as an contextual filter from the URL. So you just get a jump navigation for the Field Collection items from the host node that's currently being displayed. Note that this View expects a field named field_section_title to use for the menu item.

Remove indentation for Gumby Fancy Tiles

A great feature of the Gumby Framework is its ability to easilycreate responsive tiles. They call those Fancy Tiles. For example you can use the following mixin to create a equally distributed grid with 5 columns on a desktop, 3 on a tablet and 2 on a mobile screen.

ul.fancy { 
  @include fancytiles (5,3,2);

What kept bugging me with that is that each tile gets a padding on both its left and the right side. This makes the entire Fancy Tiles show up indented compared to the columns of Gumby's regular grid system.

Link a Drupal Image Field to the destination of a Link Field

By default, Drupal's image fields don't allow to dynamically link them to the path set inside another field. There are module to tackle this such as Image Link Formatter and Link Image Field.

I prefer keeping display settings in code. It's really easy to wrap any Image Field with the destination of a Link Field of your choice inside a node template using l() the function:

// If there's an image and a link we wrap the link around it
if($field_pub_bild && $field_pub_link) {
  $linked_image = l(render($content['field_pub_bild']), $field_pub_link[0]['url'], array('html'=> TRUE, 'attributes' => array('target' => '_blank')));

Just make sure you set html to TRUE, otherwise the image tag will get escaped. For further options look at the documentation of the l() function: https://api.drupal.org/api/drupal/includes!common.inc/function/l/7

Bolt CMS: Configure AllowedContent markup for CKEditor

If you're looking for an awesome, leightweight and performant CMS that supports custom content types, Twig-based templates and, best of all, stores its entire configuration nicely in YML files consider looking at Bolt CMS.

Chances are, you might not like it's WYSIWYG editor's (which is CKEditor) default behaviour of not stripping any markup you paste into it.

You don't have to start fiddling around with CKEditor's configuration itself. Just head over to Bolt's config.yml an look for the wysiwyg part.

The interesting part is allowedContent. This gives CKEditors Advanced Content Filter instructions about the allowed and disallowed markup.

Here's my configuration:

Entypo and FontAwesome Icon Libraries for iDraw App

Font Awesome and Entypi Icon Libraries for the iDraw App

Though Sketch really does a lot of things better (especially the path tool) I still really like the iDraw Mac App a lot.

iDraw makes it refreshingly simple (compared with to Photoshop's Shape Management for instance) to manage custom forms. Simply create a new form library, select an shape in your current document and hit the little plus icon.

I did this process with two of my favorite icon libraries, Font Awesome by Dave Gandy and Entypo by Daniel Bruce. All credits for the original icons belong to those fine people. I just share my iDraw libraries to easily use those great icons within that great app.

As both icon pack's licenses (Font Awesome: GPL, Entypo: CC BY-SA 3.0.) allow redistribution I guess there's nothing wrong with sharing my Libraries for iDraw.

Are you aware of any further (open source) icon pack that's worth packaging for iDraw? Leave a comment and let me know!