How to add css class to a field from a select list before rendering?

Question

I have a select list which has the following values where the key values are the same name as the css class name.

List1:

• prim-blue|Blue
• prim-black|Black
• prim-orange|Orange

We also have a text field which is surrounded by the following div tag below. Before the page renders, we want to take the value from list1 and assign it as a class to the div tag. We need assistance in figuring out how to get this to work using a preprocess hook.

/*css*/
prim-blue {
   //some attribute
}
prim-black {
   //some attribute
}
prim-orange {
   //some attribute
}

/*field div tag */
<div id="target-element"> <h1> Some text values </h1> </div>

Desired results (when page renders):

**Assume list1 is set to Blue (key: prim-blue)

<div id="target-element" class="prim-blue"> <h1> Some text values </h1> </div>

Note (to provide more context):

I am using the paragraph module which a bundle that has a background color for list1 and the text field. Then on the basic page content type, i added a paragraph field.

Paragraph bundle fields:

1. text (field_text)
2. background color (field_bkg_clr) <-- the drop down list1

Basic Page content type:

1. Header (field_pr_hdr, which is of type paragraph)

Answer 1

I have used the Field Formatter CSS class module for the same task. The client wanted to have predefined colors for heading elements in paragraph bundles. I have to admit this seems like an amendable approach, but it worked.

I had set up a vocabulary for the color names list and referenced this in the paragraph bundle as a select list (taxonomy term reference). In the display settings for the field is css-class selected. The format settings are set to target tag = entity.

This results basically in following markup:

<div class="entity entity-paragraphs-item paragraphs-item h1-colorclass-red">
    <div class="field-name-field-heading">This is a headline</div>
</div>

CSS:

.h1-colorclass-red .field-name-field-heading {
    color: red;
}

Answer 2

If you are fine with adding the classes to some wrapper all you need is hook_preprocess_HOOK.

This one adds the class retrieved from a select list field of the paragraph item to the paragraph item wrapper. I guess that's exactly what Field Formatter CSS Class is doing.

/**
 * Implements hook_preprocess_HOOK().
 */
function MYTHEME/MYMODULE_preprocess_entity(&$variables) {

  $my_field_name = 'field_MYSELECT';
  $my_paragraph_bundle = 'foo';

  $element = $variables['elements'];
  if ($element['#entity_type'] == 'paragraphs_item' && $element['#bundle'] == $my_paragraph_bundle) {
    foreach ($element[$my_field_name]['#items'] as $item) {
      $variables['classes_array'][] = $item['value'];
    }
  }
}