メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • Drupalのインライン画像と画像フィールドの違いおよび選択

Drupalのインライン画像と画像フィールドの違いおよび選択

Drupalのフィールドがコンテンツのすべての基本構成となる

  • Drupalのコンテンツ基本構成の単位はフィールドです
    • 例:コンテンツタイプ:「記事」(article)の場合以下のフィールドが初期にセットされ
      • タイトル(title)
      • ボディ(body)
      • タグ(tags)
      • 画像(image)
    • ボディは記事の内容を記述、表示するフィールドとなります。これは「記事」タイプの最も重要なフィールドであり、このフィールドがなければ、記事でなくなります。
    • もちろん、いろいろな別タイプのフィールド(例:ファイル、数字など)の追加ができます
      drupalの各種フィールド
  • 当然のこと、表示上では各フィールドの別々で表示されます
    • よいこと:各フィールドが独立なので、表示上で必要に応じていろいろな場所で表示させることができます
    • 困ること:コンテンツ内に特定なフィールド(例:画像、ファイルなど)を表示させたいが、場所の指定は難しいです
      • 例:記事コンテンツ(bodyフィールド)にImageフィールドを指定さいた場所に表示
        コンテンツにimageフィールドの内容を表示させる

Bodyフィールド内にリッチエディタ(ckEditor)で必要な要素(例:画像など)を直接に挿入

  • 記事タイプのBodyを編集するのは、ckEditorをよく利用されます
  • ckEditorでは、画像、ファイル、リンクなどを直接に挿入することができますckEditorのimage追加
    • これらの画像、ファイルなどがフィールドではなく、別のフォルダーで管理されます
    • これらの画像、ファイルがフィールドとしての検索、単独管理ができません

Bodyフィールド内に各フィールド要素の表示する方法が様々あります

  • フィールドに画像、ファイルなどをアップロードして、そのurlをBodyに挿入します
    • 一番簡単な方法ですが、少し面倒な作業
  • フィールド ➡ Bodyフィールドに挿入モジュール: Insert などがあります
    • 「Drupal8のモジュール(Insert)の利用」を参考 
    • Insertモジュールはフィールドでアップロードした要素を直接にBodyに挿入させます
    • この方法ではアップロードした要素のurl操作する必要がないので、少しは楽です
  • Bodyフィールドで要素を挿入すると同時にフィールドにも連携するモジュールを導入します
    • モジュール:Inline Body Image to Image Field
    • Bodyフィールドで編集時にImageを挿入した同時に、連携したフィールドにもImageも登録されます(このモジュールを試したことはない)

各要素がフィールドで管理するメリットは検索、表示上に柔軟性があります

  • フィールドとして、各要素を管理する再度のメリットは検索、表示上に柔軟性があります
  • Bodyフィールド内ですべのの画像、リンクを一体して管理すると、表示は編集結果のようなものしか表示されないです。
    • 一覧表示(Teaser)、全記事表示(Full)の場合、画像、ファイルの表示方法がそれぞれ違うかもしれませんが、これで対応できないです。
  • フィールドで管理する場合、記事の分類、検索に役に立ちます

Drupal8のモジュール(Insert)の利用

モジュール:Insertは画像/ファイルフィールドをコンテンツに挿入するツール

  • Drupalではフィールド単位でコンテンツ(記事のようなもの)、画像フィールド、ファイルフィールドなどから構成されます
  • コンテンツ(例:記事)にフィールドとして管理する画像、ファイルリンクを挿入したいことがありますが、そのフィールドにアップロードし画像、ファイルの扱いは面倒です
  • モジュール:Insert は画像、ファイルのフィールドとコンテンツにの挿入するツールです
  • Drupal7からこのモジュールをよく利用してきたので、Drupal8にも対応してくれましてありがたいです

Insertの設定方法はDrupal7より少し複雑

  • Drupal8でモジュール(Insert)を通常にインストール、有効化します
  • ホーム >> 管理 >> 環境設定 >> コンテンツ作成 >> Insert module でモジュール(Insert)のグローバル設定を行います
    • この機能はDrupal7にありません
    • この設定よりどのテキストフォーマットに有効化を限定することができますInsertグローバル設定
    • かつ、画像/ファイルのタグに修飾するcssクラスの追加ができます(このcssクラスはstyles.cssで定義すればよい)

コンテンツの各フィールドでInserの詳細設定

  • ホーム >> 管理 >> サイト構築 >> コンテンツタイプ >> 記事 >> フォームディスプレイの管理 へ
  • 画像、ファイルタイプのウィジェットを「Image Insert」、「File Insert」として設定
    Insertフィールド設定
  • さらに、画像/ファイルの初期表示スタイル、挿入時のスタイルなどの設定ができます
    Insertフィールドスタイル設定
  • 豊富な挿入オプションがあって、使いやすいモジュールです

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads