web-dev-qa-db-ja.com

コンテンツにキャプションを含む画像の一般的な戦略

これは「一般的な方向性」のトピックです。 Drupal.orgのモジュール開発フォーラムに進む前に、いくつかの戦略と哲学的ガイダンスを探しています。

私はDrupalを使い始めたばかりで、アーキテクチャー（フレームワーク全体の柔軟性とパワー）に非常に感銘を受けています。

ただし、多くの「新人」と同様に、新しいDrupalサイトを作成するには、計画と投資が必要であることをすぐに発見しました（これは明らかに、未来を形作っている多くの議論の主題です） Drupal自体- http：//www.lullabot.com/articles/understanding-8-where-drupal-and-where -... ）。

現時点では、少なくとも私にとっては、欠けている部分は1つしかありません。これは、コンテンツ作成者（サイト所有者）がキャプション付きの1つ以上の画像をノードのコンテンツ（ニュース記事など）に挿入できるようにするための非JavaScriptメソッドですまたはブログ投稿）。

また、セマンティックな純粋さの観点から、ノードのコンテンツが多くの追加のマークアップなしでクリーンで整頓されていればいいと思うので、画像/キャプションの問題を解決するための雄弁な方法を探しています。

私は他のいくつかの解決策に注ぎました-ここの新しいポスターとして、私はこの投稿で2つのリンクしか共有できません:(

そして...

http://purewebmedia.biz/articles/2013-01-10/how-insert-and-float-inline- ...-これは、使用の違いを説明する優れた記事です画像フィールド（画像ストアのカスタムの場所/フォルダーを使用）、メディアマネージャーの比較-キャプションの問題には対応していません。

また、DR7の新しいエンティティモデルについて少し読んだところ、ファイルエンティティが不思議に思われるようになりました。なんらかのトークンの置き換えが適切なアプローチである可能性があります。 （記事やニュース記事のメインテキストのように、トークンをノードのフリーテキスト/コンテンツフィールドに配置できるかどうかはまだ完全には理解していませんが、告白します）。

私が探しているのは、ユーザーが任意のコンテンツタイプ（記事、基本ページなど、コンテンツタイプにフィールド/関数が定義されていると想定）のコンテンツ領域に1つ以上の画像を挿入できるメソッドです。また、その画像をアップロードして挿入するときに、タイトル、著作権、キャプション、日付などの追加情報を入力できるようになっています。

WYSIWYGエディターで画像を「見る」ことができるはずです（ただし、メタデータではない可能性があります）。ノードが公開されると、必要なメタデータが取得され、フック、プリプロセッサーなどを介して挿入されます。 div内の画像、および必要なメタデータを画像の上または下（おそらく追加のdivまたは要素内）に配置-必要に応じて、タイトル、キャプションなどのスタイルをCSSのみに要求します。

Drupal=の画像スタイル機能も本当に気に入っているので、これをどのようにまとめることができるか疑問に思っています。

明らかに、これはギャラリーモジュールではありません。ここでの要件は、キャプション（およびその他のメタデータフィールド）を含む1つ以上の画像をコンテンツ/本文またはストーリー、ニュース記事、ブログ投稿などに挿入できることです。結果のスタイルを設定するにはCSSのみが必要です（フォーマットキャプション、左または右にフロートなど）

考え？

これから始める方法についてのポインタはありますか？

7medianodes
4
Blue Waters

「非Javascript」ソリューションに対する欲求は、ユーザーがWYSIWYGエディターで画像を「表示」できるようにしたいという欲求と相容れないものです。したがって、「JavaScript以外」の要件を削除するか、本体の上または下に表示される画像フィールドに満足する必要があります。 [注1：ノード本体の「上」にある画像は、左フロートまたは右フロートに設定できるため、テキスト内に表示されます。注2：「非JavaScript」とは、レンダリング時の非JavaScriptを意味する場合、問題ありません。]

どちらの方法でも、WYSIWYGエディターに埋め込まれた画像でも、ファイルフィールドとしての画像でも、どちらの方法もサポートできるため、おそらく media モジュールを使用することをお勧めします。

Drupalで画像を作成するための「道」になりつつあるメディアモジュールには、利用可能な多くの情報があります。多くの追加のcontribモジュールはメディアと互換性があります。次の2つの構成ガイドをご覧ください。

Media 2.0クイックスタート

メディアとwysiwygモジュールを使用した埋め込み画像の構成

ここで一歩下がって、私の経験がメディア2.0-unstable7であることを忘れないでください。 phpコードの調整にどの程度慣れているかに応じて、現在7.x-1.2の安定版リリースを使用することをお勧めします。 WYSIWYG画像の任意の画像メタデータの編集をサポートしていないという事実を除いて、2.0-unstable7ではそれほど問題はなかったので、現時点では画像ファイルフィールドのみを使用しています。画像に添付したい唯一のメタデータがキャプションである場合、私は7.x-1.2でうまくいくと思いますが、私自身は試していません。

いずれにしても、提供された「タイトル」フィールドを使用して、それをキャプションとして表示することをお勧めします。これは、admin/structure/file-typesにアクセスして、イメージファイルタイプの[表示の管理]をクリックするだけで簡単に行えます。このページは、cckの「表示の管理」ページと同じように機能します。 「タイトル」フィールドを上にドラッグして「ファイル」フィールドの下に移動し、cssを使用してキャプションとしてスタイルを設定できます。 entity_view_mode モジュールをダウンロードして有効にすることもできます。これにより、画像ファイルの追加の表示モードを定義できます。

先ほど述べたように、現時点ではWYSIWYGエディターに画像を埋め込むつもりはありませんが、あなたが引用した記事はそれについての良いアドバイスを提供しています。メディアモジュールを使用している場合でも、ファイルフィールドを使用しているかWYSIWYGを使用しているかに関係なく、タイトルフィールドをキャプションとしてフォーマットできます。

2
greg_1_anderson

解決済み-新しいファイルエンティティモジュール、新しいメディアモジュール（2.x）、および新しいエンティティビューモードモジュール（ http://drupal.org/project/entity_view_mode ）を使用-基本ここでの手順... http://drupal.org/node/1699054 -左揃え、中央揃え、または右揃えの画像、および対応するCSSクラスと画像のカスタムエンティティビューモードを作成できます。スタイル。

結果は次のとおりです。

enter image description here

1
Blue Waters

私も、すべてではないにしても、ほとんどの画像キャプションモジュールがJavaScriptを必要とする理由がわかりません。動的コンテンツの場合、スクリプトは問題ありません。ここでは、不要な複雑さを追加するだけです。

Drupalはネイティブでフィルタリング機能を提供し、HTMLコードコンテンツをクライアントに配信する前にサーバー側でオンザフライで編集できるようにします。 IMOこれは画像のタイトルをキャプションに変換する最も自然な場所であり、実行することも非常に簡単です！

  1. 以下に示すような2つの関数を定義するモジュールを作成します。

    /**
 * Implements hook_filter_info().
 * Add a new text filter implementing images captions.
 */
function my_module_filter_info() {
  $filters = array();
  $filters['image_caption'] = array(
    'title' => t('Display image title as caption'),
    'process callback' => 'filter_image_caption_callback',
  );    
  return $filters;
}

/**
 * Callback for my_module_filter_info().
 * Takes a content text as input, edit all <IMG> tags and reuse the  `title'
 * parameter as caption.
 */
function filter_image_caption_callback($text, $filter, $format, $langcode, $cache, $cache_id) {
  $text = preg_replace(
    '%<img ([^>]*(?:(style="[^"]+")[^>]*)?title="([^"]+)"[^>]*(?:(style="[^"]+")[^>]*)?)/?>(?:</img>)?%iU',
    '<div class="image" $2$4><img $1/><div class="caption">$3</div></div>',
    $text       
  );    
  return $text;
}

    これらの関数は、 "Display image title as caption。"というラベルの付いた新しいテキストフィルターを追加し、コンテンツ画像のtitle属性をキャプションを生成します。

    画像とキャプションはCSSスタイルの<DIV>コンテナにカプセル化され、最も外側のものが元の<IMG>タグスタイル（float属性など）を継承します。

    生成された<DIV>タグクラスをパーソナライズするか、HTML5 <FIGURE>および<FIGCAPTION>タグで置き換えることができます。

  2. Drupalキャッシュを更新して、これらの新しい関数を考慮に入れてください。

  3. 構成>テキスト形式に移動して、テキスト形式を編集し、
  4. 新しく作成したテキストフィルターを追加します。
    • Afterキャプションを必要とする<IMG>タグを生成する可能性のある他のフィルタ、
    • Beforeセキュリティおよびファイル構造チェックフィルター。
0
WhiteWinterWolf