it-swarm-ja.com

CSSクラスをレンダー配列にどのように追加しますか?

テンプレートファイルで、print render($content['field_image']);の前に、CSSクラスを$content['field_image']レンダー配列の画像に追加したいと思います。これどうやってするの?これがレンダー配列です:

Array
(
[#theme] => field
[#weight] => 2
[#title] => Image
[#access] => 1
[#label_display] => hidden
[#view_mode] => full
[#language] => und
[#field_name] => field_image
[#field_type] => image
[#field_translatable] => 1
[#entity_type] => node
[#bundle] => ll_basic_page
[#object] => stdClass Object
[#items] => Array
    (
        [0] => Array
            (
                [fid] => 6777
                [alt] => alt text
                [title] => 
                [uid] => 1
                [filename] => imageFile.jpg
                [uri] => public://imageFile.jpg
                [filemime] => image/jpeg
                [filesize] => 28742
                [status] => 1
                [timestamp] => 1314312382
                [rdf_mapping] => Array
                    (
                    )
            )
    )
[#formatter] => image
[0] => Array
    (
        [#theme] => image_formatter
        [#item] => Array
            (
                [fid] => 6777
                [alt] => alt text
                [title] => 
                [uid] => 1
                [filename] => imageFile.jpg
                [uri] => public://imageFile.jpg
                [filemime] => image/jpeg
                [filesize] => 28742
                [status] => 1
                [timestamp] => 1314312382
                [rdf_mapping] => Array ()
            )
        [#image_style] => 
        [#path] => 
    )
)

そして、これはHTML出力です:

<div class="field field-name-field-image field-type-image field-label-hidden" thmr="thmr_96">
  <div class="field-items">
    <div class="field-item even">
      <span thmr="thmr_97">
        <span thmr="thmr_98">
          <img typeof="foaf:Image" src="http://..../sites/default/files/imageFile.jpg" alt="alt text" />
        </span>
      </span>
    </div>
  </div>
</div>

$content['field_image']['#attributes']['class']にクラスを追加してみましたが、うまくいきませんでした。
私がやろうとしていることをどのように達成できるかについて何か考えがありますか?

6
Mark

私はそれがそうなると信じています:

$content['field_image'][0]['#attributes']['class'][] = 'my-class';

または、それをすべての要素に割り当てるには、

foreach (element_children($content['field_image'] as $key) {
  $content['field_image'][$key]['#attributes']['class'][] = 'my-class';
}
8
tim.plunkett

上記の解決策は私にはうまくいきませんでした(そして、どの場合でも明確に説明されていませんでした)。これが私がこの正確な問題を解決した方法です。これはおそらく最良の方法ではなく、確かに唯一のものではありませんが、これは有効な「Drupal方法」であり、機能します。テンプレートのtemplate.phpファイルを開きます。

次の関数を貼り付けます。この関数は、使用シナリオに合わせて変更およびカスタマイズする必要があります。たとえば、_<TEMPLATENAME>_をテンプレート名に置き換え、必要に応じてクラスを追加または削除する必要があります。

_function <TEMPLATENAME>_preprocess_image(&$variables) {
    // If this image is of the type 'Staff Photo' then assign additional classes to it:
    if ($variables['style_name'] == 'staff_photo') {
        $variables['attributes']['class'][] = 'lightbox';
        $variables['attributes']['class'][] = 'wideborder';
    }
}
_

クラスを画像に追加するタイミングを決定するために「if」ステートメントを作成しましたが、好きなようにカスタマイズする必要があります。すべての画像フィールド画像にクラスが必要な場合は、完全に削除するか、またはフロントページのみに適用したい場合は、if (drupal_is_front_page())と言うかもしれません。

私の場合は、スタッフの写真の画像スタイル([構成]> [メディア]> [画像スタイル])を作成し、指定した画像スタイルの画像にのみ優先クラスを適用するif句を追加しました。それはいい方法だと思いますが、好きなことができます。

ここで、「Staff Photo」の画像スタイルの画像フィールドを含むノードを表示すると、クラスがIMGタグに魔法のように表示されます。

4
Matt F

この問題はコア7.23で修正されたようです

ノードtplで、これを上部に追加します。

<?php
$content['field_name'][0]['#item']['attributes']['class'][] = 'your-class';
?>
2
FVANtom

次のようなこともできます:

  $array['container']['#prefix'] = '<div id = "container">';
  $array['container']['#suffix'] = '</div>';
2

クラスを適用するための条件が必要な場合は、ページフィールドの情報を収集する必要があります。

関数template_preprocess_field(&$variables)でそれを行うことができます。

template_preprocess_field(&$variables) {
  if ($variables['element']['#field_type'] == 'image') {
        $variables['items'][0]['#item']['attributes']['class'][] = 'your-class';
  }
}
0
Aporie

「field--field-image.tpl.php」を使用している場合は、次のコードを使用してください。

$item['#item']['attributes']['class'][] = 'your-class';
0
ben.hamelin

私は同様の解決策を探していましたが、画像ではなくフォーム入力要素のスタイルを設定するためでした。カスタマイズしたcommerce_coupon.checkout_pane.incインクルード内に、必要なクラスを含む#attributes配列を追加しました。

そのため、テンプレートが埋め込まれているのではなく、モジュールが絡み合ったソリューションを探している場合、これは良い代替策になるでしょう。

実行中Drupal 7.39

  $pane_form['coupon_add'] = array(
    '#type' => 'button',   
    '#value' => t('Add coupon'),    
    '#name' => 'coupon_add',    
    '#limit_validation_errors' => array(),    
    '#ajax' => array(    
      'callback' => 'commerce_coupon_add_coupon_callback',    
      'wrapper' => 'commerce-checkout-coupon-ajax-wrapper',    
    ),
    '#attributes' => array('class' => array('btn', 'btn-13')),
0
rawdesk.be