web-dev-qa-db-ja.com

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

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

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

乾杯、レ。

8
Lester Peabody

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

Views
Views Slideshow
Chaos tool suite
Libraries
Link Field
Token

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

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

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)簡潔で関連性のある説明を付けます(3)送信フォームの設定です。デフォルト設定(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)ビュー名を指定します、私はおすすめスライダー(マシン名は自動生成されます)として名前を付けましたタイプ名)。 (5)[ページの作成]チェックボックスをオフにして[ブロックを作成]をオンにします(6)ブロックタイトルを入力し、表示形式をページあたりの「フィールド」アイテムの「スライドショー」として選択します5(表示するアイテムの数を入力できます)(7 )[Continue&edit]ボタンをクリックしますビューフィールドの設定最初にリンクフィールドを追加しましょう(リンクがすべてを正しく機能させるためには最初のフィールドである必要があります)。追加アイコンをクリックし、フィルターグループから[コンテンツ] [コンテンツの追加:リンク]をクリックします。次の構成ウィンドウの「追加と構成ボタン」で「ラベルの作成」のチェックを外します。 「チェック」表示から除外します。 「適用ボタン」をクリックします

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

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

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

14
user842

このMustardseed Mediaポッドキャストをご覧ください: Views Slideshow Theming

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

2
Laxman13

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

1
gbwebservice