1

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:

<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">
  <picture>
    <source srcset="/sites/default/files/styles/profile_large/public/paragraphs/image/profile/image1.jpg?h=74e1741d&amp;itok=WLlku9ED 1x, /sites/default/files/styles/profile_large/public/paragraphs/image/profile/image1.jpg?h=74e1741d&amp;itok=WLlku9ED 2x" media="all and (min-width: 992px)" type="image/jpeg">
    <source srcset="/sites/default/files/styles/profile_small/public/paragraphs/image/profile/image1.jpg?h=74e1741d&amp;itok=p2VQAa0P 1x, /sites/default/files/styles/profile_small/public/paragraphs/image/profile/image1.jpg?h=74e1741d&amp;itok=p2VQAa0P 2x" media="all and (min-width: 768px)" type="image/jpeg">

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

  </picture>
</div>

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(&$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.

1

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(&$variables) {

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

  if (!$paragraph->get('field_rounded_profile_image')->isEmpty()) {

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

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

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

.paragraph-profile-card {
  &.rounded-image {
    .field-profile-image {
      // rounded image styles
      // ...
    }
  }
}
  • Thanks for this. It definitely works. The reason I wanted to just add the class to the image was due to the fact that I already have that modifier class available globally and figured it'd be one less style to add. But again, this works too, so thanks again! – ACanadianCoder Jan 22 at 14:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.