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.

Comments

cimo75’s picture

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

cimo75’s picture

Fixed, I am using the domain module with a different theme, so I had to add the templates to the main theme.

chrisivens’s picture

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

Puppetmast0r’s picture

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; ?>
Acertijo’s picture

Thanks for sharing this, but how configure the .inc file for a two columns stacked layout?

Diane Bryan’s picture

AdaptiveTheme has layouts that work with Display Suite. Some of what you want may be right there in AT. Or you could use code from his Gpanel templates and CSS to generate your own new variants. I haven't tried this, but it seems like a place to find help.

I do use AdaptiveTheme for all my sites, and find the seamless cooperation with Display Suite to be a huge plus. On his website he gives some tutorials, including a slightly sparse instructional on generating new Gpanel layouts. That tutorial was expanded in the issues queue, resulting in a new Gpanel set posted in the thread.

Here are the posts that had me singing in the rain:
http://adaptivethemes.com/documentation/using-gpanels
https://drupal.org/node/1722458

note: requires Panels module to be enabled.

InvDeath’s picture

How can I add ds_my_layout.js file through ds api?

aaronmarsh632’s picture

Hi,

Please can someone help me get my new layout to display in the list of layouts to use?

I have copied a layout from ds layouts folder which I have renamed (including all the references inside the files like the tutorial says) I have changed a few things to my liking.

So then I created a folder named 'ds_layouts' in /sites/all/themes/mytheme then inside the 'ds_layouts' folder I copied the folder for my new layout (custom_layout)

I flushed all caches on my site but when I go to manage a display for a content type my custom layout doesn't appear in the list. Am I doing something wrong?

Also I'm assuming by creating this in the themes folder the layout wont be available to other themes, is this correct?

Thanks

aaronmarsh632’s picture

Hi,

I figured out what was wrong it was in my ds.inc file. My custom display folder is named ds_blabla and for my function name I just had ds_blabla, and not ds_ds_blabla if you know what I mean.

Edit Olah’s picture

Hi aaronmarsh632,

Thank you for your comment! It helped me!

rstotland’s picture

I know this is a bit old but it helped me a lot, if you are copying a default style to modify, you will probably run into the same issue where you have a ds_ already as part of your layout so you need to change it to ds_ds_ to get it to work. Thank you again!

rafaelferreir4’s picture

Does anyone know how to make it work on D8?

sphism’s picture

drush help ds-build

sphism’s picture

Drupal 8

ds-build works fine but i can't figure out how to get it to load into drupal, tried drush cr, but it doesn't show up, tried putting them in the d7 standard ds_layouts folder, nothing, tried adding a [my_theme].layouts.yml file similar to the layouts example and nothing anyone got any ideas?

[edit] You do seem to need to add a [my_theme].layouts.yml and the it must have

category: Display Suite

Then it shows up

So i think ds-build is currently not supporting drupal 8 layouts properly, but i could be wrong, the twig file it produces looks pretty good but i don't think you need the inc file ...

Screenack’s picture

I found the resulting code from ds-build, version 8.x-2.1, nearly useless.

I ended up copying my twig file from here:
docroot/ds/templates/ds-variantname.html.twig
which I put into
docroot/themes/mytheme/ds_layouts/mylayoutvariant/mylayoutvariant.html.twig

My mythemename.layouts.yml code from here:
docroot/ds/ds.layouts.yml
which I put into
docroot/themes/mytheme/mytheme.layout.yml

My mytheme.layouts.yml file now looks like this:

mylayoutvariant:
  label    : Client Landing Page in Thirds
  category : Client Layouts
  class: '\Drupal\ds\Plugin\DsLayout'
  type: partial
  template : ds_layouts/mylayoutvariant/mylayoutvariant
  icon     : ds_layouts/mylayoutvariant/mylayoutvariant.png
  regions:
    left:
      label: Left
    right:
      label: Right

I also suspect the layout_name.inc from db-build is unnecessary. Is that included for compatibility with 7.x?

FWIW, this page was also helpful for documentation about adding layouts to the layout manager.

code-brighton’s picture

Thank you Screenack that was really helpful as well as the link.
I also used ds-build and I can confirm that I still required your method of manually adding mytheme.layouts.yml (do note this must be layouts plural in the filename to be registered (after a drush cr) had me stuck for a while.
Also I can confirm that I was able to delete the .inc file created by ds-build as this is not required (and just had the standard Left, Right regions anyway) I think it's superseded by the yml file(?)

code-brighton’s picture

Also worth noting that the generated twig template from ds-build also errored! So I just used the simple example from https://www.drupal.org/node/2578731

<div class="myregions-wrapper">
  <div class="myregion1-region">
    {{ content.myregion1 }}
  </div>
  <div class="myregion2-region">
    {{ content.myregion2 }}
  </div>
</div>