web-dev-qa-db-ja.com

特定の画像フィールドから画像マークアップを書き換えます

Drupal 7サイトでは、無制限の画像を許可する画像フィールドがあり、field_gallery_images。このフィールドのテンプレートファイルを作成して、カスタム画像スライダーを作成しました。画像のHTMLマークアップを書き換えて、遅延読み込みコンポーネントを追加したいと思います。したがって、代わりに：

<img src="/sites/default/files/myimage.jpg" width="668" height="500">

が欲しいです：

<img data-lazy="/sites/default/files/myimage.jpg" width="668" height="500" class="lazyload">

現在、画像はtheme_image（）で実行されているため、テンプレートに到達するまでにマークアップがすべて設定されています。この1つのフィールドのマークアップを変更したいだけです。 theme_preprocess_image（）を試しましたが、すべての画像が変更されました。

7themingmedia
2
Colin

Drupal 7.を使用していると思います。

短い答え

template_preprocess_field()を実装し、theme_image()をオーバーライドします。

_/**
 * Implements template_preprocess_field().
 */
function mytheme_preprocess_field(&$variables) {
  $element = &$variables['element'];

  if ($element['#field_name'] === 'field_image') {
    foreach (element_children($element) as $key) {
      $item = &$element[$key]['#item'];

      $src = file_create_url($item['uri']);
      unset($item['uri']);
      $item['attributes']['data-lazy'] = $src;
      $item['attributes']['class'] = array('lazyload');

      $element['#items'][$key] = $item;
      $variables['items'][$key]['#item'] = $item;
    }
  }
}

/**
 * Overrides theme_image().
 */
function mytheme_image($variables) {
  $attributes = $variables['attributes'];

  if (!empty($variables['path']) || !isset($attributes['data-lazy')) {
    $attributes['src'] = file_create_url($variables['path']);
  }

  foreach (array('width', 'height', 'alt', 'title') as $key) {

    if (isset($variables[$key])) {
      $attributes[$key] = $variables[$key];
    }
  }

  return '<img' . drupal_attributes($attributes) . ' />';
}
_

長い答え

template_preprocess_field（） を実装することで、テーマ変数とテーマを変更できますフィールドのfunction。

コード例：

_/**
 * Implements template_preprocess_field().
 */
function mytheme_preprocess_field(&$variables) {
  $element = &$variables['element'];

  if ($element['#field_name'] === 'field_image') {
    foreach (element_children($element) as $key) {
      $item = &$element[$key]['#item'];

      $src = file_create_url($item['uri']);
      unset($item['uri']);
      $item['attributes']['data-lazy'] = $src;
      $item['attributes']['class'] = array('lazyload');

      $element['#items'][$key] = $item;
      $variables['items'][$key]['#item'] = $item;
    }
  }
}
_

_field_image_を、定義したフィールド名に変更することを忘れないでください。

_$variables_の構造です。

Structure of $variables

_$variables['items'][0]['#item']_は、レンダー配列でのテーマ関数の一般的な使用法です。上記のコードはいくつかのことを行いました：

  • unset uri。これは、theme_image()で属性srcをフォーマットするために使用されます
  • 画像パスを作成し、属性_data-lazy_に割り当てます
  • クラスにlazyloadを追加
  • アイテム配列を_$variable_の別の場所に同期します

最後の点は少し奇妙ですが、常に同じ項目配列を格納する3つの異なる場所があります。彼らです

  • _$variables['element'][0]['#item']_
  • _$variables['element']['#items'][0]_
  • _$variables['items'][0]['#item']_

理論的には、_$variables['items'][0]['#item']_がテーマ関数で使用される唯一のものですが、私の考えでは、将来の潜在的な問題を防ぐために、それらを同時に変更することをお勧めします。 （たぶん誰かがここでより多くの提案を提供できますか？）

最後になりましたが、theme_image()をオーバーライドする必要があります。これは地球規模の変化ですが、あまり影響はありません。

_/**
 * Overrides theme_image().
 */
function mytheme_image($variables) {
  $attributes = $variables['attributes'];

  if (!empty($variables['path']) || !isset($attributes['data-lazy')) {
    $attributes['src'] = file_create_url($variables['path']);
  }

  foreach (array('width', 'height', 'alt', 'title') as $key) {

    if (isset($variables[$key])) {
      $attributes[$key] = $variables[$key];
    }
  }

  return '<img' . drupal_attributes($attributes) . ' />';
}
_
4
Jimmy Ko