Architecting for Explorers

• medium to large sized sites (50+ nodes)
• significant proportion of "first visit" users
• visually engaging experience is important
• site lends itself to Explorers and First Timers

• very small sites (< 10 nodes)
• top level nav is probably fine!
• users who know exactly what they want
• users who know how to get what they need
• large, un-wieldy menus are actually great for this!
• PC Case Gear

• Title
• Hero
• Entity reference
• Tiles
• Entity reference
• Tiles subheading
• Menu link
• Path alias

• Entity reference
• Rendered as Full content

Featured Tiles

• Displays Hub menu item and children
• Custom block on ACCA
• Menu block module would be perfect for this

• Title
• Body text
• Hero image
• Image (with Media field selector)
• Call to action (2x)
• Link
• Custom colour
• Colorfield (with Colorbox)

• Disable display in node fields (set to hidden)
• Create a wrapper in hook_node_view()

<php
  $node->content['hero_image_wrapper_start'] = array(
    '#markup' => "<div style='background: url($hero_image);'>",
    '#weight' => -1000,
  );
  $node->content['hero_image_wrapper_end'] = array(
    '#markup' => '</div>',
    '#weight' => 1000,
  );

• Custom field formatter

<?php
function theme_acca_core_field_formatter_highlight_color_style($vars) {
  $highlight_color = $vars['element']['rgb'];
  $node = $vars['entity'];

  $highlight_css =<<<CSS
#node-{$node->nid} .highlight {
  color: {$highlight_color};
}
CSS;

  // Include the CSS inline
  drupal_add_css($highlight_css, array('type' => 'inline'));

  // No need to return as the CSS has already been included
}

<?php
  if (arg(0) == 'node' && arg(1) == $node->nid && !user_access('administer content')) {
    drupal_not_found();
    drupal_exit();
  }

• Enable Search configuration
• Only grant "Hero: Search content of this type" permission to content creator roles
• Grant search permissions for all normal node types

• Title
• Body text
• Tile image
• Image
• Call to Action
• Link
  

• Disable direct view and searching
• Tile image displays as link
• If the Call to action URL is populated, swap out the node link in the Tile image field

<?php
  $cta_url = $node->field_cta[$node->language][0]['url'];

  // Swap out the link path before the element is rendered
  $node->content['field_tile_image'][0]['#path']['path'] = $cta_url;

• Default view modes are great!
• Many core and contrib modules use Teaser view mode
• We don't want to make radical changes!
• Any node type should be viewable as a tile so...

Masonry tile view mode

<?php
function hook_entity_info_alter(&$entity_info) {
  // Add a new view mode for masonry tile listings
  $entity_info['node']['view modes']['tile'] = array(
    'label' => t('Masonry Tile'),
    'custom settings' => TRUE,
  );
}

• Masonry module
• Masonry library

Prepare the field

<?php
function acca_core_preprocess_field(&$vars) {
  if ($vars['element']['#field_name'] == 'field_tiles') {
    $vars['classes_array'][] = 'tiles-container';
    libraries_load('masonry');
    drupal_add_js(drupal_get_path('module', 'acca_core') .'/js/acca.masonry.js');
  }
}

(function ($) {
  Drupal.behaviors.masonry_tiles = {
    attach: function (context, settings) {

      $('.tiles-container > .field-items', context).masonry();

    }
  }
}) (jQuery);

You can also pass lots of configuration options to Masonry. Check the Masonry docs for more information.

• All primary content types now display as Tiles
• Enables innovative designs
• Content creators have lots of freedom
• Structure menus logically
• Still provide easy access to deeply nested pages
• Update Hubs easily as often as they want
• Can even link offsite using Free tiles
• Don't have to worry about writing HTML
• Engaging visual style is refreshing for users