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
- .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
<<?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
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
Thanks for sharing this, but
Thanks for sharing this, but how configure the .inc file for a two columns stacked layout?
Try AT's layouts?
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.
How can I add ds_my_layout.js
How can I add ds_my_layout.js file through ds api?
Can't get my layout to appear in the list
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
Hi,
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.
Thank you for your comment!
Hi aaronmarsh632,
Thank you for your comment! It helped me!
Thank you so much!
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!
D8?
Does anyone know how to make it work on D8?
drush help ds-build
drush help ds-build
ds-build works fine but i can
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 ...
Using the ds module itself for code examples
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:
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.
Thank you Screenack that was
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(?)
Also worth noting that the
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