Drupalのモジュール（Display Suite）でコンテンツレイアウト変更、初期表示されていないフィールドの選択/設定が可能にする

drupal
video
display suite
module usage

Drupalのコンテンツ表示設定にレイアウトの変更はできない。すべてのフィールド表示はしていない

  • Drupalのコンテンツ表示管理画面（例：Article： ホーム » 管理 » サイト構築 » コンテンツタイプ » Article の「表示管理」）にある表示タイプ（例：全文）のレイアウト変更はできない
  • そのレイアウトのコンテンツのすべてフィールドが表示されていない（例：投稿日付、投稿者など）

モジュール（Display Suite）導入で、同一表示タイプに複数のレイアウト選択可能、隠されたフィールドの表示/設定が可能になる

  • Drupalのコンテンツ表示には大きな役割を果たしたモジュール（Display Suite）がぜひ利用してください
  • 通常の方法でDisplay Suiteをインストール/有効化します
  • コンテンツの表示管理画面（例：Article： ホーム » 管理 » サイト構築 » コンテンツタイプ » Article の「表示管理」）でDisplay Suiteのレイアウトが表示され、表示必要に応じ選択します
  • また、初期隠されたフィールドも表示されます。表示必要に応じフィールドを表示場所に配置します
  • 具体的な操作法はビデオでご参考ください
  • Display Suiteの応用に「シリーズ記事」をご参考ください
Embedded thumbnail for Drupalのモジュール（Display Suite）でコンテンツレイアウト変更、初期表示されていないフィールドの選択/設定が可能にする
drupal
video
display suite
module usage
template

やりたいこと：コンテンツの表示レイアウト/フィールドを自由変更したいです

解決：モジュール（Display Suite）の導入

  • モジュール：Display Suite-7.x-2.14
  • モジュールを通常の方法でインストール、有効化します（ビデオをご参考ください）

DSのフィールドテンプレート（field template）の有効化

  • モジュールインストールだけでフィールドテンプレート（field template）は有効になっていません
  • DS（Display Suite）の管理画面（ホーム » 管理 » サイト構築 » Display Suite » Extras ）でField Templateタブにある「Enable Field Template」をチェックします
  • 他のオプションが初期設定のままでよいです

コンテンツの表示管理画面でカスタムレイアウトを選択しないとフィールドテンプレートが有効になりません

  • コンテンツ表示管理画面（例：ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理）の下に、「Layout for article in default」タブで適切なレイアウトを選択します
  • 各フィールドの右側にフィールド表示オプションボタンをクリックすると、Field Template選択肢が現れます
  • 必要に応じ、cssよろ各フィールドの表示設定ができます
Embedded thumbnail for Drupal7のモジュール（Display Suite）のインストールおよびフィールドテンプレート（Field Template）の有効化
drupal
video
display suite
module usage

Drupalのコンテンツ表示設定にレイアウトの変更はできない。すべてのフィールド表示はしていない

  • Drupalのコンテンツ表示管理画面（例：Article： ホーム » 管理 » サイト構築 » コンテンツタイプ » Article の「表示管理」）にある表示タイプ（例：全文）のレイアウト変更はできない
  • そのレイアウトのコンテンツのすべてフィールドが表示されていない（例：投稿日付、投稿者など）

モジュール（Display Suite）導入で、同一表示タイプに複数のレイアウト選択可能、隠されたフィールドの表示/設定が可能になる

  • Drupalのコンテンツ表示には大きな役割を果たしたモジュール（Display Suite）がぜひ利用してください
  • 通常の方法でDisplay Suiteをインストール/有効化します
  • コンテンツの表示管理画面（例：Article： ホーム » 管理 » サイト構築 » コンテンツタイプ » Article の「表示管理」）でDisplay Suiteのレイアウトが表示され、表示必要に応じ選択します
  • また、初期隠されたフィールドも表示されます。表示必要に応じフィールドを表示場所に配置します
  • 具体的な操作法はビデオでご参考ください
  • Display Suiteの応用に「シリーズ記事」をご参考ください
Embedded thumbnail for Drupalのモジュール（Display Suite）でコンテンツレイアウト変更、初期表示されていないフィールドの選択/設定が可能にする
drupal
video
customization
display suite
module usage

コンテンツ表示管理画面でモジュール（Display Suite）の「コードフィールド」内にあるTokey情報を利用して新規フィールド作成

  • コンテンツ管理画面（ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理）の下にある「Custom Fieldｓ」セクションで「コードフィールド追加」があります
  • 「コードフィールド追加」ボタンをクリックして、フィールドラベル、適応範囲などを入力します。フィールド作成ページの下にある「トーク」チェックボックスをチェックして、Tokenの利用が可能になります
    • 「利用可能なトークンを表示」リンクをクリックして、サイト内すべてのトークンが表示されます
    • 必要なものを検索して、トークン（例：[user:name]）をコピーして、Field Codeフォーム入力すればよいです
  • コードフィールドの修正はコンテンツ表示管理画面ではできません。DisplaySuiteの管理画面（ホーム » 管理 » サイト構築 » Display Suite » フィールド）で行います

新規作成したフィールドを画面表示させ、確認

  • コンテンツ表示管理画面（ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理）で新規新規作成しフィールを適切な場所に配置します
  • コンテンツ表示された画面で選択したトークンを確認します
  • 実際の操作はビデオでご確認ください

DSのコードフィールドで表示されたすべてのトークの利用はできません

  • ビデオに使用したトークン例：[user:name] と [current-user:name]があります
  • 実際に[user:name]が何にも出力しませんでした。利用可能なのは [current-user:name]でした

DSのコードフィールドいろいろな場所（例：User、Profileなど）で使用可能なので、すべてのトークンが表示されても、その場所で利用できないものがあります

  • DBが広範囲（コンテンツだけではない）で使用可能なので、当然コードフィールド内の利用可能なトークンを定義するのは難しいです。
  • トークン一覧のフィルタリングにできないため、すべてのトークンが表示されます
  • 利用場所を想定して、利用可能トークンの選択は必要となります

どんな場所でどのトークンが利用可能かのドキュメントはあまり見つかっていないです。

  • 経験での判断といろいろなトークンを出力してみて確認したほうが良いでしょう
Embedded thumbnail for Drupalのモジュール（Display Suite）のコードフィールド内のトークン（Token）利用不可のものが多い
drupal
video
display suit
module usage

やりたいこと：コンテンツの各フィールドごとをdivなどのタグでラップしたり、cssクラス、属性を追加したいです

  • Drupalのnodeシステムでは、表示設定で自由に各フィールドをラップdiv、cssクラス、属性の追加はできない
  • 各フィールドが表示都合よりラップしたり、cssクラスの追加が必要となります

解決：モジュール（Display Suite）のフィールドテンプレート(field template)を有効化にします

  • モジュール（Display Suite）のインポート、有効化をします
  • Display Suiteのフィールドテンプレート（field template）を有効化にします

モジュール（Display Suite）のフィールドテンプレート(field template)で各表示フィールドを修正例

  • フィールドをdivタグでラップしてcssクラスを追加します
  • cssクラス追加よりh2タグのcss適応、各要素の間隔を調整します
  • 具体的に設定方法をビデオでご参考ください
Embedded thumbnail for Drupalのモジュール（Display Suite）のフィールドtテンプレート（field template）で各フィールド表示の調整
drupal
video
display suite
module usage

Drupalのコンテンツ表示設定にレイアウトの変更はできない。すべてのフィールド表示はしていない

  • Drupalのコンテンツ表示管理画面（例：Article： ホーム » 管理 » サイト構築 » コンテンツタイプ » Article の「表示管理」）にある表示タイプ（例：全文）のレイアウト変更はできない
  • そのレイアウトのコンテンツのすべてフィールドが表示されていない（例：投稿日付、投稿者など）

モジュール（Display Suite）導入で、同一表示タイプに複数のレイアウト選択可能、隠されたフィールドの表示/設定が可能になる

  • Drupalのコンテンツ表示には大きな役割を果たしたモジュール（Display Suite）がぜひ利用してください
  • 通常の方法でDisplay Suiteをインストール/有効化します
  • コンテンツの表示管理画面（例：Article： ホーム » 管理 » サイト構築 » コンテンツタイプ » Article の「表示管理」）でDisplay Suiteのレイアウトが表示され、表示必要に応じ選択します
  • また、初期隠されたフィールドも表示されます。表示必要に応じフィールドを表示場所に配置します
  • 具体的な操作法はビデオでご参考ください
  • Display Suiteの応用に「シリーズ記事」をご参考ください
Embedded thumbnail for Drupalのモジュール（Display Suite）でコンテンツレイアウト変更、初期表示されていないフィールドの選択/設定が可能にする
drupal
video
customization
display suite
module usage

コンテンツ表示管理画面でモジュール（Display Suite）の「コードフィールド」内にあるTokey情報を利用して新規フィールド作成

  • コンテンツ管理画面（ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理）の下にある「Custom Fieldｓ」セクションで「コードフィールド追加」があります
  • 「コードフィールド追加」ボタンをクリックして、フィールドラベル、適応範囲などを入力します。フィールド作成ページの下にある「トーク」チェックボックスをチェックして、Tokenの利用が可能になります
    • 「利用可能なトークンを表示」リンクをクリックして、サイト内すべてのトークンが表示されます
    • 必要なものを検索して、トークン（例：[user:name]）をコピーして、Field Codeフォーム入力すればよいです
  • コードフィールドの修正はコンテンツ表示管理画面ではできません。DisplaySuiteの管理画面（ホーム » 管理 » サイト構築 » Display Suite » フィールド）で行います

新規作成したフィールドを画面表示させ、確認

  • コンテンツ表示管理画面（ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理）で新規新規作成しフィールを適切な場所に配置します
  • コンテンツ表示された画面で選択したトークンを確認します
  • 実際の操作はビデオでご確認ください

DSのコードフィールドで表示されたすべてのトークの利用はできません

  • ビデオに使用したトークン例：[user:name] と [current-user:name]があります
  • 実際に[user:name]が何にも出力しませんでした。利用可能なのは [current-user:name]でした

DSのコードフィールドいろいろな場所（例：User、Profileなど）で使用可能なので、すべてのトークンが表示されても、その場所で利用できないものがあります

  • DBが広範囲（コンテンツだけではない）で使用可能なので、当然コードフィールド内の利用可能なトークンを定義するのは難しいです。
  • トークン一覧のフィルタリングにできないため、すべてのトークンが表示されます
  • 利用場所を想定して、利用可能トークンの選択は必要となります

どんな場所でどのトークンが利用可能かのドキュメントはあまり見つかっていないです。

  • 経験での判断といろいろなトークンを出力してみて確認したほうが良いでしょう
Embedded thumbnail for Drupalのモジュール（Display Suite）のコードフィールド内のトークン（Token）利用不可のものが多い
drupal
display suite
Search

高度な検索オプションと検索結果を変更するために、モジュール(Display Suite)のサブモジュール(Display Suite Suite)を有効にします

  • モジュール（Display Suite）より、検索結果の表示変更、高度な検索オプション変更は可能
  • Display Suiteは表示上に非常に柔軟性のあるモジュールで、幅広く利用されています

検索結果に関する設定後に必ずキャッシュをクリアします

  • 一般的にモジュールより表示変更はサイトのキャッシュクリアする必要はありません
  • なぜかDisplay Suiteで検索結果画面の設定を変更したら、必ずキャッシュをクリアしなければならないです。

例１：検索結果をsearch-results.tpl.phpからTeaser表示に切り替えたい

  • 検索結果はテンプレート：search-results.tpl.phpで管理されているので、検索結果の変更には、このテンプレートの変更は一般的となります（ハードコーディング必要）
  • Display Suiteの導入より、上記テンプレートの変更必要はなくなります
  • ホーム » 管理 » 環境設定 » 検索とメタデータ » 検索の設定　管理画面で検索モジュールを「Display Suite Search」に切り替えます
  • ホーム » 管理 » サイト構築 » Display Suite » 検索 管理画面で「ビュー・モード」をティーザーに変えます

例2：高度な検索オプションの一部分を隠したい

  • 初期の「高度な検索オプション」に検索可能なコンテンツが含まれています
  • 一般ユーザーが一部分のコンテンツタイプを知らないので、これらのオプション（例：パネル）を隠したいです。
  • ホーム » 管理 » 環境設定 » 検索とメタデータ » 検索の設定　管理画面で「ADDITIONAL NODE SEARCH CONFIGURATION」をクリックして、「コンテンツタイプを限定 SETTINGS」リンクをクリックします
  • 「Hide the following content types from the コンテンツタイプを限定 filter」の「パネル」をチェックして隠します
  • 検索画面上にある「高度な検索オプション」に「パネル」選択肢が非表示になっていることを確認します

 

drupal
video
display suite
module usage

Drupalのコンテンツ表示設定にレイアウトの変更はできない。すべてのフィールド表示はしていない

  • Drupalのコンテンツ表示管理画面（例：Article： ホーム » 管理 » サイト構築 » コンテンツタイプ » Article の「表示管理」）にある表示タイプ（例：全文）のレイアウト変更はできない
  • そのレイアウトのコンテンツのすべてフィールドが表示されていない（例：投稿日付、投稿者など）

モジュール（Display Suite）導入で、同一表示タイプに複数のレイアウト選択可能、隠されたフィールドの表示/設定が可能になる

  • Drupalのコンテンツ表示には大きな役割を果たしたモジュール（Display Suite）がぜひ利用してください
  • 通常の方法でDisplay Suiteをインストール/有効化します
  • コンテンツの表示管理画面（例：Article： ホーム » 管理 » サイト構築 » コンテンツタイプ » Article の「表示管理」）でDisplay Suiteのレイアウトが表示され、表示必要に応じ選択します
  • また、初期隠されたフィールドも表示されます。表示必要に応じフィールドを表示場所に配置します
  • 具体的な操作法はビデオでご参考ください
  • Display Suiteの応用に「シリーズ記事」をご参考ください
Embedded thumbnail for Drupalのモジュール（Display Suite）でコンテンツレイアウト変更、初期表示されていないフィールドの選択/設定が可能にする
drupal
video
customization
display suite
module usage

コンテンツ表示管理画面でモジュール（Display Suite）の「コードフィールド」内にあるTokey情報を利用して新規フィールド作成

  • コンテンツ管理画面（ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理）の下にある「Custom Fieldｓ」セクションで「コードフィールド追加」があります
  • 「コードフィールド追加」ボタンをクリックして、フィールドラベル、適応範囲などを入力します。フィールド作成ページの下にある「トーク」チェックボックスをチェックして、Tokenの利用が可能になります
    • 「利用可能なトークンを表示」リンクをクリックして、サイト内すべてのトークンが表示されます
    • 必要なものを検索して、トークン（例：[user:name]）をコピーして、Field Codeフォーム入力すればよいです
  • コードフィールドの修正はコンテンツ表示管理画面ではできません。DisplaySuiteの管理画面（ホーム » 管理 » サイト構築 » Display Suite » フィールド）で行います

新規作成したフィールドを画面表示させ、確認

  • コンテンツ表示管理画面（ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理）で新規新規作成しフィールを適切な場所に配置します
  • コンテンツ表示された画面で選択したトークンを確認します
  • 実際の操作はビデオでご確認ください

DSのコードフィールドで表示されたすべてのトークの利用はできません

  • ビデオに使用したトークン例：[user:name] と [current-user:name]があります
  • 実際に[user:name]が何にも出力しませんでした。利用可能なのは [current-user:name]でした

DSのコードフィールドいろいろな場所（例：User、Profileなど）で使用可能なので、すべてのトークンが表示されても、その場所で利用できないものがあります

  • DBが広範囲（コンテンツだけではない）で使用可能なので、当然コードフィールド内の利用可能なトークンを定義するのは難しいです。
  • トークン一覧のフィルタリングにできないため、すべてのトークンが表示されます
  • 利用場所を想定して、利用可能トークンの選択は必要となります

どんな場所でどのトークンが利用可能かのドキュメントはあまり見つかっていないです。

  • 経験での判断といろいろなトークンを出力してみて確認したほうが良いでしょう
Embedded thumbnail for Drupalのモジュール（Display Suite）のコードフィールド内のトークン（Token）利用不可のものが多い
drupal
node
field
javascript
jQuery

モジュール(Background Images Formatter)を利用して、記事にアップロードした画像を記事のバックグランドにすることができます。本サイトでは、何らかの原因でBackground Images Formatterの表示設定時にエラーが発生して（Ajaxの設定なのでエラーメッセージも表示されなかった）、このモジュールの利用はできませんでした。

モジュールを利用せず、簡単なCSSとJavaScriptで対応することになりました。

やりたい事

  • Nodeタイプの記事にイメージフィールドを必須入力項目として定義します。
  • 記事ごとにアップロードしたイメージをバックグランドにセットして表示します。
  • どんなイメージがアップロードされるのは予測できないので、文書をはっきり読めるため、画像レイヤーと文書レイヤーの間に、半透明（25%の透明度）のレイヤーを入れます。

画像をバックグランドに

  • コンテンツのImageフィールド表示設定で、このフィールドのラッパーcssクラス名(例：content-background-div)を設定します
  • ページのcssファイル(style.css)で上記Imageフィールドを非表示(例：content-background-div{ display:none } )に設定します
  • 文書を表示するエリアのdivのcssにjQuieryでbackgroundを設定します
    • Panelsで以下のJSコードをこのページに追加します(JSコード追加にはPanels CSS & JSモジュールが必要です) 
        var img_url = $('#content-background-div img').attr('src');
  $('.page-content #block-system-main').css({     // 記事を表示するエリア
    'background-image': 'url("'+img_url+'")',
    'background-repeat': 'no-repeat',
    'background-size': '100% auto',
    '-moz-background-size': '100% auto',
    '-webkit-background-size':'100% auto' 
  });
    • Panelsを利用しなければ、Display Suiteモジュールのダイナミックフィールドを利用して、JSコードをパスすることができます

半透明なレイヤー追加

  • 上記バックグランド画像設定したdivの子divにbackground-colorをcssファイル(style.css)で設定します 
    #node.node-article{
    background-color:        rgba(255,255,255,0.75);
}

文書レイヤー

  • 文書フィールドはそのまま表示します
  • フィールドの表示に必要に応じて、cssて調整します
drupal
video
display suite
module usage

Drupalのコンテンツ表示設定にレイアウトの変更はできない。すべてのフィールド表示はしていない

  • Drupalのコンテンツ表示管理画面（例：Article： ホーム » 管理 » サイト構築 » コンテンツタイプ » Article の「表示管理」）にある表示タイプ（例：全文）のレイアウト変更はできない
  • そのレイアウトのコンテンツのすべてフィールドが表示されていない（例：投稿日付、投稿者など）

モジュール（Display Suite）導入で、同一表示タイプに複数のレイアウト選択可能、隠されたフィールドの表示/設定が可能になる

  • Drupalのコンテンツ表示には大きな役割を果たしたモジュール（Display Suite）がぜひ利用してください
  • 通常の方法でDisplay Suiteをインストール/有効化します
  • コンテンツの表示管理画面（例：Article： ホーム » 管理 » サイト構築 » コンテンツタイプ » Article の「表示管理」）でDisplay Suiteのレイアウトが表示され、表示必要に応じ選択します
  • また、初期隠されたフィールドも表示されます。表示必要に応じフィールドを表示場所に配置します
  • 具体的な操作法はビデオでご参考ください
  • Display Suiteの応用に「シリーズ記事」をご参考ください
Embedded thumbnail for Drupalのモジュール（Display Suite）でコンテンツレイアウト変更、初期表示されていないフィールドの選択/設定が可能にする
drupal
video
customization
display suite
module usage

コンテンツ表示管理画面でモジュール（Display Suite）の「コードフィールド」内にあるTokey情報を利用して新規フィールド作成

  • コンテンツ管理画面（ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理）の下にある「Custom Fieldｓ」セクションで「コードフィールド追加」があります
  • 「コードフィールド追加」ボタンをクリックして、フィールドラベル、適応範囲などを入力します。フィールド作成ページの下にある「トーク」チェックボックスをチェックして、Tokenの利用が可能になります
    • 「利用可能なトークンを表示」リンクをクリックして、サイト内すべてのトークンが表示されます
    • 必要なものを検索して、トークン（例：[user:name]）をコピーして、Field Codeフォーム入力すればよいです
  • コードフィールドの修正はコンテンツ表示管理画面ではできません。DisplaySuiteの管理画面（ホーム » 管理 » サイト構築 » Display Suite » フィールド）で行います

新規作成したフィールドを画面表示させ、確認

  • コンテンツ表示管理画面（ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理）で新規新規作成しフィールを適切な場所に配置します
  • コンテンツ表示された画面で選択したトークンを確認します
  • 実際の操作はビデオでご確認ください

DSのコードフィールドで表示されたすべてのトークの利用はできません

  • ビデオに使用したトークン例：[user:name] と [current-user:name]があります
  • 実際に[user:name]が何にも出力しませんでした。利用可能なのは [current-user:name]でした

DSのコードフィールドいろいろな場所（例：User、Profileなど）で使用可能なので、すべてのトークンが表示されても、その場所で利用できないものがあります

  • DBが広範囲（コンテンツだけではない）で使用可能なので、当然コードフィールド内の利用可能なトークンを定義するのは難しいです。
  • トークン一覧のフィルタリングにできないため、すべてのトークンが表示されます
  • 利用場所を想定して、利用可能トークンの選択は必要となります

どんな場所でどのトークンが利用可能かのドキュメントはあまり見つかっていないです。

  • 経験での判断といろいろなトークンを出力してみて確認したほうが良いでしょう
Embedded thumbnail for Drupalのモジュール（Display Suite）のコードフィールド内のトークン（Token）利用不可のものが多い