Adding custom Display Suite layouts to your theme

Additional layouts can be defined in a theme.

Create a ds_layouts folder (inside your theme folder) and then create a folder whose name will be used as key for the layout. The examples below need to be put in a folder named small_left_col.

The ds_layouts/small_left_col folder can have all 3 of the files below, but only the .inc and .tpl.php files are required:

• small_left_col.inc
• small-left-col.tpl.php
• small_left_col.css
• small_left_col.png

Here is an example directory structure:

- my_theme
-- ds_layouts
--- small_left_col
---- small_left_col.inc
---- small-left-col.tpl.php
---- small_left_col.css
---- small_left_col.png

Notes

1. .inc file uses underscores, while tpl.php uses dashes.
2. Clear the website's cache to ensure that new files are being loaded.
3. When the custom layout is created it can be enabled and used via the manage display screen.
4. The ds_layouts folder must be in the root of the theme. You cannot put it in a sub-directory, e.g., a templates folder.

The below examples are for a 20% left column / 80% right column layout.

small_left_col.inc

<?php
function ds_small_left_col() {
  return array(
    'label' => t('Small Left Column'),
    'regions' => array(
      'left' => t('Left'),
      'right' => t('Right'),
    ),
    // Add this line if there is a default css file.
    'css' => TRUE,
    // Add this line if you're using DS 2.x for icon preview
    'image' => TRUE,
  );
}

Note: Don't use "content" as the name of a region. That seems to clobber the $content variable, which makes Drupal extremely unhappy.

As can be seen above, the function name uses ds_ followed by the key. The label is what will be shown in the UI for Display Suite.

The regions array defines the regions to be used both in the .tpl.php file, and when placing fields inside layouts in Drupal's administration screens. They are defined as 'key' => 'value' pairs, followed by a comma, excepting the final region (this is a standard PHP array syntax).

small-left-col.tpl.php

<<?php print $layout_wrapper; print $layout_attributes; ?> class="<?php print $classes;?> clearfix">

  <?php if (isset($title_suffix['contextual_links'])): ?>
  <?php print render($title_suffix['contextual_links']); ?>
  <?php endif; ?>
  
  <<?php print $left_wrapper ?> class="ds-left<?php print $left_classes; ?>">
    <?php print $left; ?>
  </<?php print $left_wrapper ?>>
  
  <<?php print $right_wrapper ?> class="ds-right<?php print $right_classes; ?>">
    <?php print $right; ?>
  </<?php print $right_wrapper ?>>
  
</<?php print $layout_wrapper ?>>
  
<?php if (!empty($drupal_render_children)): ?>
  <?php print $drupal_render_children ?>
<?php endif; ?>

small_left_col.css

.ds-left {
  width: 20%;
  float: left;
}

.ds-right {
  width: 80%;
  float: right;
}

Using drush to generate layout files

Drush can generate these files for you:

drush ds-build "Small Left Column" --regions="Left, Right" --css

Execute this command from within your theme's "ds_layouts" folder, or move the generated folder into "ds_layouts" .

Try "drush help ds-build" for a information on all options.