This documentation is written for the 7.x-2.x version of Display Suite.
Display Suite allows you to manage the display of entities (such as nodes, views, comments, users, et cetera) on your website.
Manage display of an entity
- Go to Administration > Structure > Display Suite (admin/structure/ds)
- Click "Manage display" for the entity (e.g., "User") whose display you like to change
Note: you can find the same screen via the "Manage display” of the entity. E.g., via
Administration > Structure > Content types > Basic Page > Manage display (admin/structure/types/manage/page/display)
- In the vertical tab "Layout for ... in default" choose the desired layout template (e.g. "Two column stacked") and click "Apply"
Note: Display Suite adds extra fields such as "Read more” and "User picture”
- Start arranging the layout by dragging fields to regions ("Header”, "Left”, et cetera).
- Save the changes
Configure the output of fields and labels
For each field you change the way the output is formatted. Via the select fields in the "Format” column you can change e.g., the date format ("Long”, "Medium”) or remove the links from the Tags. In some cases (e.g. images fields) more advanced output settings, such as the image style ("thumbnail"), are available by clicking the cogwheel. For fields with multiple values you can set the number of displayed values by replacing the hash sign with a number.
For each field you can edit the label and choose how it is displayed (in line with or above the field or hidden).
To customize the label value and the exact HTML output of a field you need to enable the Extras module.
Add CSS classes to regions
Now that you have defined regions you can define custom CSS classes for them.
- Go to Administration > Structure > Display Suite > CSS Classes (admin/structure/ds/classes)
- Enter custom class names in the fields "CSS classes for regions” (one per line). You can provide a human friendly class name by using a pipe ("|”), e.g.,:
class_name_1
class_name_2|Class two
extravagant|Extravagant
subtle_emphasis|Subtle emphasis- Click "Save”
- Go to Administration > Structure > Display Suite (admin/structure/ds/layout) and choose "manage display” for the desired entity.
- Choose the tab "Custom classes” to assign the classes to the regions
- Click the tab "Extra classes for regions”. Assign the defined classes to the regions.
- Click "Save”
You can check the source code of your web page to see the new classes and start styling them in your CSS.
Note: to create and use custom CSS classes for fields you need to enable the Extras module.
Create custom layouts
Display Suite offers by default a dozen of layouts (e.g., "Two column” or "Fluid three column stacked 25/50/25”) that you can use to manage the display of entities.
If you need a custom layout you can define one in your theme or custom module. You can generate the necessary files using the drush command ds-build:
drush ds-build "Four columns stacked" --regions="Header, Left, Middle left, Middle right, Right, Footer"
Place the folder that was generated (e.g. "four-columns-stacked”) inside a sub folder called "ds_layouts”within your theme or module.
Go to Administration > Structure > Display Suite (admin/structure/ds/layout) and choose "manage display” for the desired entity.
The custom layout is now available for use at the vertical tab "Layout for ... in default"
Create custom layout files manually.
For more information consult the file ds.api.php in the Display Suite module folder.