Add a class retrieved from a sibling field to responsive image I have a Profile paragraph type that has the following fields:


Profile Image [Responsive Image Field format]
Profile Headline [Plain Text]
Profile Description [Plain Text]
Rounded Profile Image [Boolean]


What I'm trying to do is that when the field_rounded_profile_image boolean is selected, that it will add the rounded-circle class to the image attributes of the field_profile_image field.

Currently, this is what the code for the image looks like when it is printed:

&lt;div data-quickedit-field-id="paragraph/196/field_profile_image/en/default" class="field field--name-field-profile-image field--type-image field--label-hidden field__item"&gt;
  &lt;picture&gt;
    &lt;source srcset="/sites/default/files/styles/profile_large/public/paragraphs/image/profile/image1.jpg?h=74e1741d&amp;amp;itok=WLlku9ED 1x, /sites/default/files/styles/profile_large/public/paragraphs/image/profile/image1.jpg?h=74e1741d&amp;amp;itok=WLlku9ED 2x" media="all and (min-width: 992px)" type="image/jpeg"&gt;
    &lt;source srcset="/sites/default/files/styles/profile_small/public/paragraphs/image/profile/image1.jpg?h=74e1741d&amp;amp;itok=p2VQAa0P 1x, /sites/default/files/styles/profile_small/public/paragraphs/image/profile/image1.jpg?h=74e1741d&amp;amp;itok=p2VQAa0P 2x" media="all and (min-width: 768px)" type="image/jpeg"&gt;

    &lt;img src="/sites/default/files/styles/profile_small/public/paragraphs/image/profile/image1.jpg?h=74e1741d&amp;amp;itok=p2VQAa0P" alt="Image" typeof="foaf:Image" class="img-fluid"&gt;

  &lt;/picture&gt;
&lt;/div&gt;


I'm trying to write a preprocess hook to do this but this part of my Drupal game is lacking so I was wondering if anyone could help me out.

I've tried something along the lines of the following to no avail:

// Note that me adding the __profile_card below does work due to another hook I have running to allow me to specify which paragraph type to target
function MYTHEME_preprocess_paragraph__profile_card(&amp;$variables) {
  if ($variables['content']['field_rounded_profile_image'][0]['#markup'] == "On") {
    $variables['content']['field_profile_image']['attributes']['class'][] = "rounded-circle";
  }
}


Any help on this would be great and I can provide any follow-up details if needed.
What I'd recommend is to simply preprocess the paragraph, get the "round image" Boolean, and use it to add a class to the paragraph. This should be just enough to style the responsive image accordingly.

/**
 * Implements template_preprocess_paragraph__PARAGRAPH_TYPE.
 */
function MYTHEME_preprocess_paragraph__profile_card(&amp;$variables) {

  // Get paragraph.
  $paragraph = $variables['paragraph'];

  if (!$paragraph-&gt;get('field_rounded_profile_image')-&gt;isEmpty()) {

    // Get Boolean.
    $rounded = $paragraph-&gt; field_rounded_profile_image-&gt;first()-&gt;getValue();

    if ($rounded['value'] == '1') {
      $variables['attributes']['class'][] = 'rounded-image';
    }
  }
}


And then via CSS (Sass) you'd do:

.paragraph-profile-card {
  &amp;.rounded-image {
    .field-profile-image {
      // rounded image styles
      // ...
    }
  }
}