web-dev-qa-db-ja.com

特定の画像スタイルにクラスを設定するにはどうすればよいですか？

Drupal 8）で、CSSクラスを特定の画像スタイルに追加しようとしています。この目的のために、テンプレートを設定しようとしていますが、私は知識が不足していることを知っています（私は過去数か月にわたって自分にこのことを教えてきました）。

具体的には、スタイルマシン名が「feature_main_960_x_640_」、フィールドマシン名が「field_image」のすべての画像に、「フルコンテンツ」ビューモードで次のクラスを含めます。このクラスをimgタグに追加したいのですが。

目的：コンテンツ全体が表示されているときに記事のフィーチャー画像を中央に配置すること。

仕様：Drupal 8、テーマはBootstrap 3、Display Suiteモジュールを使用。

Display Suiteを使用してBootstrap 3の「center-block」クラスを追加しました。このクラスは、div内のimgタグの前に追加されます。これにより、画像が中央に配置されません。 img内に「center-block」を手動で追加したときにのみ画像が中央に配置されます。この目的でフィールドフォーマッタークラスモジュールも使用し、クラスをimgではなくdivに追加したため、問題が解決しません。

これまでのところ、私は問題に大槌を持って、すべての画像にクラスを適用するために次のテンプレートを使用しましたが、上で述べたように、アプリケーションで正確にしたいと思います。これは私が使用したテンプレートです：

image.html.twig

{% set classes = [
  theme.settings.image_shape ? theme.settings.image_shape,
  theme.settings.image_responsive ? 'img-responsive',
  'center-block',
] %}
<img{{ attributes.addClass(classes) }} />

解決策はありますか？

8themingmediaentities
3
thisthatother

Drupal 8では、hook_preprocess_imageテーマ内mytheme.themeファイル。

/**
 * Implements hook_preprocess_image().
 */
function mytheme_preprocess_image(&$variables) {
  if ($variables['style_name'] == 'my_custom_image_style') {
    $variables['attributes']['class'][] = 'my_css_class';
  }
}
2
Kevin