User-chosen Field Output Styles in 5 minutes using Display Suite

I’m working on a site that has a “Statistics” paragraph bundle. The output looks like this:

The specification calls for the content author to be able to choose between a few different visual styles for the header (title), shown as Statistics: 3 Up Feature Ipsum Sit H2 in the screenshot above.

The simplest way to achieve this is to add a field to the paragraph bundle:

Note that the key (key|value) needs to work as a css class.

After creating the field, add it to the Manage form display where desired:

The last step is to add a class, based on the chosen value, to the Section Header field when the paragraph item gets rendered. If you’re using Display Suite with field templates enabled, this is a very simple change! You don’t have to write any code, in fact. Simply edit the output of the Section Header field by clicking the cogwheel:

Next, browse for the appropriate placeholder (click Browse available tokens):

In my case I browsed for Paragraphs > Header Style > Text value. The token is: [paragraph:field_header_style:value]

Finally, just append that token to the end of the Classes field (shown above). I chose to prepend “header-style” to the beginning for a final value of header-style–[paragraph:field_header_style:value].

That’s it! Test it out by adding a record and setting the header style:

View the item on the frontend and you should find the additional class:


Leave a Reply

Your email address will not be published.