Last updated November 27, 2012. Created by runeasgar on March 18, 2011.
Edited by Ivan Zugec, Johnxystus, pfrenssen, batigolix. Log in to edit this page.
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.pngNotes
- .inc file uses underscores, while tpl.php uses dashes.
- Clear the website's cache to ensure that new files are being loaded.
- When the custom layout is created it can be enabled and used via the manage display screen.
- 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
<div class="<?php print $classes;?> clearfix">
<?php if (isset($title_suffix['contextual_links'])): ?>
<?php print render($title_suffix['contextual_links']); ?>
<?php endif; ?>
<?php if ($left): ?>
<div class="ds-left<?php print $left_classes; ?>">
<?php print $left; ?>
</div>
<?php endif; ?>
<?php if ($right): ?>
<div class="ds-right<?php print $right_classes; ?>">
<?php print $right; ?>
</div>
<?php endif; ?>
</div>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.
Comments
Hi somehow my template is not
Hi
somehow my template is not recognized by DS and is therefore not available on the layout settings. I ve revised the files many times and I am pretty sure everything is ok, any idea what may be wrong? I tried both 7.2 as the dev version of DS
Fixed, I am using the domain
Fixed, I am using the domain module with a different theme, so I had to add the templates to the main theme.
Adding layouts via a module
If you want to add layouts from within your module, It will not pick up the .inc file automatically. You need to implement hook_ds_layout_info() and provide the data from there. See ds.api.php
Thank you
Thanks for writing this. Much appreciated.
But I didn't get any submission buttons or tabs, until I added
<?php if (!empty($drupal_render_children)): ?><?php print $drupal_render_children ?>
<?php endif; ?>