web-dev-qa-db-ja.com

兄弟フィールドから取得したクラスをレスポンシブ画像に追加します

Profile段落タイプで、次のフィールドがあります。

  • プロフィール画像[レスポンシブ画像フィールド形式]
  • プロフィールの見出し[プレーンテキスト]
  • プロファイルの説明[プレーンテキスト]
  • 丸みのあるプロファイル画像[ブール]

私がやろうとしているのは、field_rounded_profile_imageブール値が選択されると、rounded-circleクラスがfield_profile_imageフィールドの画像属性に追加されるということです。

現在、これは印刷されたときの画像のコードは次のようになります。

<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>

私はこれを行うための前処理フックを書こうとしていますが、私のDrupalゲームのこの部分が不足しているので、誰かが私を助けてくれるかどうか疑問に思いました。

私は次のようにして何も役に立たないように試しました：

// 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";
  }
}

これに関するどんな助けも素晴らしいだろう、そして私は必要ならばフォローアップの詳細を提供できる。

8themingparagraphs
1
ACanadianCoder

私がお勧めするのは、単に段落を前処理し、「丸い画像」のブール値を取得し、それを使用して段落にクラスを追加することです。これで、レスポンシブな画像のスタイルを適切に設定できます。

/**
 * 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';
    }
  }
}

そして、CSS（Sass）を使用します。

.paragraph-profile-card {
  &.rounded-image {
    .field-profile-image {
      // rounded image styles
      // ...
    }
  }
}
1
leymannx