Dear Backdrop Community,

I'm at a loss and need your advice. A few months ago I implemented the website of my small book publisher with Backdrop. I'm not a programmer or web developer, but a hobbyist who can even work with his Emacs configuration. 

The inner workings of Backdrop/Drupal are foreign to me, although I can work wonderfully with it. Migrating our databases was a pleasure. The Field Manager, Feeds Importers, the Entity Relations, the great Views module as query builder. What a great CMS!

Only the level of presentation gives me a headache. Display modes, layouts, blocks, views - everything produces a ton of <divs> whose origin I can't understand. How do the display modes work, for example? 

I'm used to working with templates (a bit of PHP or other, HTML, tokens, conditions, loops). It would be so much easier if I could tell Backdrop to just render the content for me. There is only one interesting content type on my website: Books. They have a ton of fields, entity and taxonomy relationships and logic. Up to now, I have always distributed the fields in token blocks at layout level and assigned visibility conditions to them. I did the same in the Views module - only without tokens. Please tell me that I am doing everything wrong and just need to create the files xyz in the template directory.

Best regards from Germany

Michael

Accepted answer

Yes, that is one way to look at it. Some fields have more configurability than others. Yes, active config is the place to look. Within each field instance (i.e. the config of that field on that content type, paragraph type, or other entity types) the display modes are defined including any settings, field wrappers and the 'weight' which determines the order in the display mode

Comments

Hello Michael

Display modes allow you to define different ways of displaying content in different places.  Normally the default display is used, but in Views and some other places you can choose a different display option. 

You have a couple of options.

You can use field blocks to place in the layout and that is a perfectly acceptable practice.

If I need to customise what divs fields are wrapped in, I use the Field Wrappers module (which is also easily extendable - there is a comprehensive example of how to do this in the module, but people here or in the issue queue for the module would be happy to help you).

You can use templates.  A good place to start is install the Devel module and go to Devel Settings.  If you enable Theme Debug then on any page, open your browser developer tools (usually by pressing F12 or right click an area of interest and selecting Inspect Element) and you can find helpful comments like this:

The entry marked with an 'x' is the template in use while once above show how you can create your own high level  or granular templates which go in the templates folder within your theme. You can see that you can even customise the template per display mode.

See https://docs.backdropcms.org/creating-themes for some more information.  Hopefully this can get you started but do ask once you decide which approach(es) you are using. 

Dear ysp,

a thousand thanks! You made my evening. So these display modes in the backend are just a GUI for the .tpl files? The scales have fallen from my eyes.
EDIT: But where are my existing display modes stored? Active config?

Cheers

Michael

Yes, that is one way to look at it. Some fields have more configurability than others. Yes, active config is the place to look. Within each field instance (i.e. the config of that field on that content type, paragraph type, or other entity types) the display modes are defined including any settings, field wrappers and the 'weight' which determines the order in the display mode

Perfect. So if I work with the .tpl files for e.g. all nodes of type “books”, I can easily do something like this via PHP (nobody needs twig anyway): If field 'user' = ‘yorkshirepudding’, then show me a wide banner that says “thank you”. All problems solved.

The official guidance for that would be to put the preprocessing in template.php within your_theme_preprocess_node() and put the logic there to add to or change the variables, but you can do in the template if needed; I often do a mix of both.  With Devel enabled, you can add lines like dpm($variables); to see the variables available at a particular point and the structure you need to work with.