ビューで日付フィールドにクラスを追加するにはどうすればよいですか?


7

Drupal 7を使用しています。日付フィールドを使用するビューを作成しました。その特定のビューの日付フィールドに追加のクラスを作成したいと思います。

例えば、

<div class="field-content">
 <span class="date">10</span>
 <span class="month">June</span>
 <span class="year">2011</span>
 <span class="time"> 8:00 </span>
</div>

今私はコードを持っています:

<div class="field-content">
 <span class="date-display-single">10 June 2011, 8:00</span>
</div>

どうすれば段階的にそれを行うことができますか?

回答:


3
  1. http://drupal.org/project/custom_formattersからトークンモジュール(最新のベータバージョンにはフィールドトークンが含まれています)およびカスタムフォーマッターモジュールをインストールする必要があり ます

  2. 次に、モジュールページから有効にします。

  3. admin-> structure-> formattersに移動します。

  4. 新しいフォーマッターを追加し、好きな名前を付けます。

  5. 形式:HTML +トークン

  6. フィールドタイプ:日付

  7. フォーマッター:

    <span class="day">[node:source:field-datefieldname:custom:j]</span>
    <span class="month">[node:source:field-datefieldname:custom:F]</span>
    <span class="year">[node:source:field-datefieldname:custom:Y]</span>
  8. セーブ

これで、カスタム日付フォーマッターが作成されました。これを自分のビューで使用できます!


4

追加のモジュールなしでこれを行うことができます。

  1. 日付フィールドを追加します。これを表示から除外します。カスタムを選択し、ボックスにdと書きます(その日のphpの日付のように)。「スタイル設定」を変更します-カスタマイズフィールドHMTL(なしに設定)およびカスタマイズフィールドとラベルラッパーHTML(なしに設定)。Drupal日付フィールド
  2. 日付フィールドを再度追加します。これも表示から除外します。カスタムを選択し、ボックスにMを書きます(月のphpの日付のように)。「スタイル設定」を変更します-カスタマイズフィールドHMTL(なしに設定)およびカスタマイズフィールドとラベルラッパーHTML(なしに設定)。
  3. 日付フィールドを再度追加します。これも表示から除外します。カスタムを選択し、ボックスにYと書きます(phpの年の日付のように)。「スタイル設定」を変更します-カスタマイズフィールドHMTL(なしに設定)およびカスタマイズフィールドとラベルラッパーHTML(なしに設定)。
  4. 日付フィールドをもう一度追加します(LAST TIME!)。これをディスプレイから除外しないでください。カスタムを選択し、G:i(phpの日付と同様に時間と分)を記述します。「スタイル設定」を変更します-カスタマイズフィールドHMTL(なしに設定)およびカスタマイズフィールドとラベルラッパーHTML(なしに設定)。
  5. この最終日付フィールドの結果を書き換えます。置換パターンを使用して、次のようなものを書くことができます:

    <div class="date">
      <span class="day">
        [created]
      </span>
      <span class="month">
        [created_1]
      </span>
      <span class="year">
        [created_2]
      </span>
    </div>

Drupalの書き換え結果


1
これは作成された日付に最適な方法のようですが、コンテンツタイプに追加された日付モジュールフィールドを使用している場合、「カスタムフォーマット」を選択できないようです。
マーク

1
@Mark、この問題が発生した場合は、/ admin / config / regional / date-timeを使用して日付形式を追加できます。次に、手順1〜3で、カスタムの代わりに適切な形式をドロップダウンから選択します。
Webdrips '19年

3

かなり速い(phpを記述できる場合)が、少しハックな解決策は、そのフィールドのテンプレートをオーバーライドし(ビューのテーマの基本を参照)、phpで生の日付値を処理して個別の部分を取り出し、それらを一緒に接着することです。選択したHTML。

また、私は、カスタム日付フィールドのフォーマッタを(書くことができると思い、ここ D6のためにそれをやった人です)。これは、ノードでカスタムフォーマッタを再利用する場合に適したソリューションです。


1

これは、ビューUIを使用して行うことはできません。あなたはかなり複雑なコードを必要とするでしょう、そして私はあなたがそれを理解することに着手するように勧める前にあなたのユースケースに興味があります。

フィールド全体にクラスを追加する方法を尋ねた場合、答えは次のようになります。

  1. ビューインターフェイスのフィールドをクリックします。

  2. 「スタイル設定」フィールドセットを展開します。

  3. [フィールドHTMLをカスタマイズする]チェックボックスをオンにし、[CSSクラスを作成する]チェックボックスをオンにします。

  4. 希望のクラスを入力してください。

おそらくそのソリューションで十分でしょう。それ以外の場合は、幸運を祈ります。


2
答えてくれてありがとう、しかしあなたの解決策はすべてのフィールドのクラスを変更するのに役立つだけで、それは私が別々の日付の部分を作成することを許しません。

1
次に、カスタムフォーマッターを作成することがおそらく唯一の実際のオプションです。日付がテーマレイヤーに完全に処理されるまでに、生およびレンダリングされたフィールドデータを取得するためのヘルパー関数を参照してください。
tim.plunkett、2011年

1

これは本当に簡単です(一度知ったら)

表示スイートのカスタムフィールドを使用する

admin / structure / ds / fieldsに移動します

(メニュー:構造->表示スイート->フィールド)

[コードフィールドを追加]をクリックします

私のユースケースでは、次のように入力しました

ラベル

なんでも

エンティティ

ノード

制限フィールド

空白のままにした

フィールドコード

<div>
  <span class="mf-month">[node:created:custom:M]</span> 
  <span class="mf-day">[node:created:custom:d]</span>
</div>

トークン

チェック済み

フィールドを作成したら、調整するコンテンツタイプと表示モードの表示管理ページに移動し、新しいカスタムフィールドを選択します。

上記の設定のスクリーンショット

設定ページのスクリーンショット

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.