Drupal 7のビュー、ビュー-スライドショー、ページング


8

状況は次のとおりです。コンテンツタイプがSlideで、最新の3つのスライドをスライドショーに表示したい。スライドは循環する必要があり、スライドはページャーによって制御可能である必要もあります。スライドショーの特定のスライドにジャンプできるように、ポケットベルには3つの箇条書き/リンク/画像が必要です。ページャーには、スライドショーのスライドを増減するための左右の矢印も必要です。

この手法はWebのいたるところに使用されていますが、ビューとビュースライドショーを使用してこれを正しく設定する方法がわかりません。Drupalitesを経験している皆さんからのご意見をお待ちしています。

乾杯、レ。

回答:


14

(1)必要なモジュール(バージョン:Drupal7.0)

Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token

(2)モジュールのインストール

Drupal7では、adminセクションからモジュールをインストールできますが、Druaplサイトでモジュールリンクを検索してから、管理モジュールのインストールエリアに貼り付けてコピーする必要があるため、この新機能には意味がないと感じています。クレイジー。彼らがワードプレスのような小さな検索のごちそうのようなものにしていたなら、それはとても良かったでしょう。とにかく、ダウンロードして古い方法でインストールします(この古い方法をお勧めします)。

Drupalサイトからすべてのモジュールをダウンロードし、yoursitename / sites / all / modulesディレクトリにインストールします。http://www.yoursitename.com/node#overlay=admin/modulesに移動して、以下のようにこれらのモジュールを有効にします。

(1)ビュー(2)ビューUI(3)ビュースライドショー(4)ビュースライドショー:サイクル(5)カオスツール(6)リンク(7)ライブラリ(8)トークン(オプション)(3)イメージキャッシュの作成

Drupal7では、画像キャッシュはコアモジュールの一部であり、画像スタイルと呼ばれています。そこで、ここから2つの画像キャッシュを作成します。1つはフルサイズのスライダー画像用で、もう1つはサムネイル画像用です。このチュートリアルでは、フルサイズのスライダー画像に935x293(ピクセル)の寸法を使用し、サムネイル画像に210x100(ピクセル)の寸法を使用します。注:これらの構成は延期できますが、ニーズによって異なります。

  • フルサイズのスライダー画像設定

http://www.yoursitename.com/node#overlay=admin/config/media/image-stylesに移動し、[新しいスタイルを追加]リンクをクリックします(1)画像のスタイル名を入力し、[新しいスタイルを作成]ボタンをクリックします(2 )次の設定画面で新しいスタイルを選択し、[追加]ボタンをクリックします(このチュートリアルでは、サイズ変更スタイルを選択します)(3)次の画面で、幅と高さを設定し、[効果を追加]ボタンをクリックします。(設定は、選択したスタイルによって異なる場合があります)。幅を935、高さを293ピクセルに設定しました。

サムネイル画像についても同じプロセスを実行します。(サムネイル画像の寸法では、幅を210、高さを100ピクセルに設定しています。)(4)新しいコンテンツタイプを作成します。

新しいコンテンツタイプを作成してみましょう。ダッシュボードメニューバーの[構造]をクリックし、次にコンテンツタイプをクリックして、[新しいコンテンツタイプの追加]リンクをクリックします。

(1)人間が読める形式の名前を付けます。私はそれをおすすめスライダー(マシンの名前は人間が読める形式の名前に基づいて自動生成されます)と名付けました。(2)簡潔で関連性のある説明を入力します。デフォルト設定(4)公開オプション、公開のみをオンにしました(他のすべての設定はオフ)(5)表示設定、自動時刻と日付情報をオフにしました。(6)コメント設定、非表示(無効)に設定(7)メニュー設定、デフォルト設定のままにします。(8)[保存してフィールドを追加]ボタンをクリックします(5)新しいフィールドを作成します

この例では、2つのフィールドのみを作成します。それらは、画像フィールドとリンクフィールドです。スライダー画像のアップロードには画像フィールドを使用し、スライダーをリンクするカスタムリンクを作成するにはリンクフィールドを使用します。

画像フィールド設定

(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.

このフィールドを必要に応じて設定し、slider-imageというファイルディレクター名を追加して、この画像が他の画像から分離して配置されるようにしました。アップロードの最大サイズと解像度をここで設定できます。Altとタイトルフィールドを有効にし、最後に[設定を保存]ボタンをクリックします。

同じ方法を使用して、リンクフィールドも作成します。

リンクフィールドの設定(1)ラベル:スライダーリンク(2)フィールド:slider_link(3)フィールドタイプ:リンク(4)ウィジェット(フォーム要素):リンク(5)[保存]ボタンをクリックします。リンクフィールドの設定については、evrythingをデフォルト設定のままにします。以下に示すようにフィールドを再配置しました。タイトルフィールド画像フィールドリンクフィールド本文フィールド(必要に応じてこのフィールドを削除することもできます)ディスプレイの管理ディスプレイの管理タブで、フィールドの出力をどのように表示するかを設定できます。リンクフィールドを非表示に設定し、画像ラベルも非表示に設定しましたDrupal7:フィールドを管理します(6)機能スライダーコンテンツを作成します

このチュートリアルでは、4つのおすすめのスライダーコンテンツを作成しました。

(1)[コンテンツを追加]リンクをクリックします(2)注目のスライダーコンテンツを作成します(3)適切なタイトル名を付けます(4)スライダー画像をアップロードします(5)代替とタイトルフィールド名を付けます(6)リンクのタイトルとURLを好きな場所に付けますリンクするスライダー(7)SEOフレンドリーなURLエイリアスを指定する場合は、パスフィールドを除き、その他の設定はすべてデフォルトのままにします。(8)コンテンツを保存します。

同じ方法で、さらに注目のスライダーコンテンツを作成します(私は4つのコンテンツを作成しました)(7)新しいビューを作成します

次に、新しいスライドショービューを作成します。[ダッシュボード]メニューから構造をクリックし、[ビュー]をクリックします。

(1)[新しいビューを追加]リンクをクリックします(2)ビュー名を付けます、私はおすすめスライダーとして名前を付けました(マシン名は自動生成されます)(3)適切なビューの説明を付けます(4)[おすすめスライダータイプのコンテンツを表示]を選択します(コンテンツタイプ名)。(5)[ページの作成]チェックボックスをオフにし、[ブロックの作成]をオンにします(6)ブロックタイトルを入力し、表示形式をページあたりの「フィールド」アイテムの「スライドショー」として選択します5(表示するアイテムの数を入力できます)(7 )[Continue&edit]ボタンをクリックします。フィールドの設定最初にリンクフィールドを追加しましょう(リンクがすべてを正しく機能させるためには、最初のフィールドである必要があります)。追加アイコンをクリックし、[Groups]フィルターから[Content] [Content] [Add Content]を選択します。次の構成ウィンドウの「追加と構成ボタン」で「ラベルの作成」のチェックを外します。"小切手" 表示から除外します。「適用ボタン」をクリックします

次に、画像フィールドを追加してみましょう。追加アイコンをクリックし、フィルターグループからコンテンツを選択しますコンテンツの追加:画像フィールド(注:このスライダーコンテンツタイプに対してのみ作成した画像フィールドを選択してください。)[追加して構成]をクリックします。次の設定ウィンドウで「ラベルを作成」​​のチェックを外します。

フォーマッタ:画像(カラーボックスまたはライトボックスをインストールしている場合は、ここで選択できます!)画像のスタイル:フルサイズ(上記の手順で作成した画像キャッシュを選択)画像のリンク先:なしスタイルの設定:デフォルト設定のままにする結果の動作なし:残す既定の設定結果の書き換え:チェックこのフィールドをリンクとして出力リンクパス:[view_node](注:少しスクロールすると、コアトークンモジュールによって作成された置換パターンが表示されます(リンクフィールドを最初に設定しなかった場合)ここにはリンクフィールドオプションが表示されません)[view_node]のみをコピーしてから、上にスクロールしてリンクパスフィールドに貼り付けます。)[適用]ボタンをクリックします。

最後に、サムネイル用にもう1つのフィールドが必要なので、追加アイコンをクリックし、フィルターの[グループ]から[コンテンツ] [コンテンツの追加:画像フィールド]を選択します(注:このスライダーコンテンツタイプに対してのみ作成した画像フィールドを選択してください)。次の構成ウィンドウで[追加と構成]ボタンをクリックし、[ラベルの作成]チェックボックスをオフにして、表示から除外、フォーマッタ:画像(カラーボックスまたはライトボックスをインストールしている場合は、ここで選択できます!)画像スタイル:サムネイル(画像キャッシュを選択します)上記の手順で作成しました)リンク画像:なしスタイル設定:デフォルト設定のまま結果の動作なし:デフォルト設定のまま結果の書き換え:チェックこのフィールドをリンクとして出力リンクパス:[view_node](注:ダウを少しスクロールしてCore Tokenモジュールによって作成された置換パターンを見ることができます(私たちがしなかった場合t最初にここにリンクフィールドオプションが表示されないようにリンクフィールドを設定します)[view_node]のみをコピーし、上にスクロールしてリンクパスフィールドに貼り付けます。)[適用]ボタンをクリックします。

ビューフィルター設定

views3では、フィルターは最初に作成され、コンテンツタイプやその他の設定を選択します!追加のファイタリングが必要な場合は、ここで作成できます。

ビューのスタイル設定

[スライドショーのフォーマット]をクリックします。settigsおよび次のように設定された次の設定ウィンドウで; (1)リストタイプ:順不同リスト(2)ラッパークラス:デフォルト設定のままにします(3)スタイル>スキン:デフォルト(4)スライド>スライドショータイプ:サイクル(5)サイクルオプションjQueryサイクルプラグインをダウンロードしてjqueryをコピーする必要があります。 cycle.all.min.js to sites / all / libraries / jquery.cycleプラグインはhttp://malsup.com/jquery/cycleにあります。

簡単な英語site / allディレクトリに「libraries」という名前のフォルダーを作成してから、そのディレクトリに「jquery.cycle」という名前の別のフォルダーを作成し、最後に「jquery.cycle.all.min.js」のみをコピーして貼り付けますこのディレクトリ。

(6)トランジション:フェード(7)アクション:ホバーで一時停止(8)Internet Explorerの微調整:デフォルト(9)ウィジェット:上部または下部のいずれかまたは両方を選択できます(ここでは下部を選択し、以下のように詳細設定を行います)。 (10)下部ウィジェット>ページャー>ページャータイプ:フィールド(11)ページャーフィールド:コンテンツ:画像(注:親指用に最後に追加したもの、両方のフィールドに同じ名前が付けられるため、間違えないでください。)(12)スライドをアクティブ化ポケットベルホブで一時停止:オン、コントロール、スライダーカウンターをオフのままにします。(13)「適用」ボタンをクリックします。

書式表示フィールド設定

Inline fields: Choose the thumbnail field as inline.
Click Apply button. (Note: Well it actually doesn't change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)

(8)カスタムリージョンの作成(オプションのステップ)

(1)yoursフォルダーでyour_theme_name.infoファイルを開き、以下に示すような新しいリージョンを追加します。regions [featured_slider] =注目のスライダーで、.infoファイルを保存します。(2)以下のように、テーマのpage.tpl.phpファイルを開き、スライドを表示する場所にこれらのコードを追加します。

page--front.tpl.phpのようなカスタムフロントページテンプレートを作成して、デフォルトのpage.tpl.phpテンプレートに変更を加える必要がないようにすることもできます。[9]ブロックを有効にして構成する

これで、このブロックはブロック無効化領域に表示されるので、ダッシュボードメニューから[構造]> [ブロック]に移動し、ブロックをテーマのデフォルト領域または作成したカスタム領域(featured_slider)に対して有効にします。(地域は、使用しているテーマによって異なります。)

ブロック構成設定ブロックを有効にすると、ブロックを構成するためのリンクが表示されるので、[構成]リンクをクリックし、以下のように設定セクションを設定します。

(1)ブロックタイトル(ブロブタイトルを表示したくない場合は、と入力するだけです)(2)ここでも、有効なテーマ固有の地域設定がすべて取得されます。表示設定(3)[ページ]> [特定のページにブロックを表示]を選択:[リストされたページのみ]を選択して入力すると、このブロックはフロントページにのみ表示されます。サムネイルをインラインで表示するためのCSSヒント

これらのCSSコードをテーマのスタイルシートに追加して、サムネイルをインラインで表示します。.views-slideshow-controls-bottom .views-slideshow-pager-field-item {float:left; マージン:20px 6px; }必要な調整を行います。


4
この(素晴らしくて徹底した)投稿の長さは、なぜ私がドルーパルを習おうとしていらいらしているのかを示していると思います
デイモン

1
Drupalは本当に簡単でパワフルですが、時々あなたは愚かなシンプルなものを見つけて、それを作るのに2日かかり、コードを
掘り下げる

ああところで、私は最初から最後まであなたのチュートリアルに従いました、そして私はstackexchangeに2回以上投票する方法があったらいいのにと思います。本当にありがとうございます。あなたは本当に私を助けてくれました!
Dinaiz

2
お役に立てて嬉しいです。また、Drupal.orgでのリリースが現在レビューされているFeatureモジュールも作成しました。上記で概説したすべての手順をパッケージ化し、さらに1歩進んで完全に応答性を高め、Omegaなどのテーマで使用するクライアント側のアダプティブイメージを使用します。drupal.org/sandbox/nicoz/1538528を

1
ディナイズ、バウンティを開始し、「既存の回答に報酬を
与える

2

このMustardseed Mediaポッドキャストをご覧ください:ビュースライドショーのテーマ

ポッドキャスト中、ボブはビュースライドショーの基本の一部と、出力のテーマを設定する方法を実行します。それはDrupal 6をベースにしていますが、基本とレッスンのほとんどは同じだと思います。少しだけCSSを使用すると、スライドショーを見ることができますトンをより良いです。見栄えの良いスライドショーが必要な場合は、このポッドキャストをご覧になることを強くお勧めします。


このビデオは質問に答えることがありますが、ここに答えの本質的な部分を含め、参照用のリンクを提供することをお勧めします。リンクされたページが変更されると、リンクのみの回答が無効になる可能性があります。meta.drupal.stackexchange.com/questions/585/...
user1359

1

ビューのスライドショー(サムネイルなど)についてもっと知りたい場合は、次の優れたチュートリアルを参照する必要があります。http//www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on-drupal7


これは、@ Nigelが投稿した記事と同じです
Laxman13

私はナイジェルがそのページをコピーして答えに貼り付けたと思います:)これはもっとすっきりしているので、これに投票しました:)数分前にオフィスに入ったので、座って試してみるつもりです今朝、このスライドショーを始めましょう。うまくいったら、これを受け入れます。ありがとう。
レスターピーボディ

わかりましたので、すべてのことを言って完了したので、私は実際に彼がそのチュートリアルで行うようにあなたに言ったほとんどのことをすでに行っていました。ただし、私が望んでいた方法でページングを実際に操作したわけではありません。これを機能させるには、本格的なCSSとjQueryのハッキングを行う必要があります。
レスターピーボディ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.