フォトギャラリー2

サイドバー＋複数ページ連動型のフォトギャラリー2

以前ご紹介したフォトギャラリーはページ内で完結するサンプルhtml埋め込み型のものでした。

今回は、htmlを全く扱う事なく、しかもサイドバー＋複数ページ連動型のフォトギャラリー2をご紹介します。

サイドバーに表示されたサムネイルをクリックするとメインページに該当する写真を含むコンテンツが表示されます。

サイドバーに表示されるサムネイルのサイズや件数、並び方は自由に設定できます。

サムネイルをクリックして表示されるコンテンツの表示内容も自由に設定できます。

慣れてくると以下の方法で同様のコンテンツを幾らでも設置可能ですが、最初の一つ、あるいは慣れるまでは弊社がお手伝いします。

では定義方法です。

画像サイズ等の設定

アップロードした画像から自動的に生成されるサムネイルとページ用画像のサイズを設定します。

管理セクション≫サイトの構築≫画像キャッシュページを開き、[新しいプリセットを追加]タブをクリックします。
プリセットの名前空間：にsmallと入力し、[新しいプリセットを作成]をクリックします。
新規に作成されたプリセットの定義画面に移ります。
[Scaleを追加]をクリックします。
自動的に調整すべき画像サイズ（この場合は90x90ピクセル）を入力し、[アクションを追加]をクリックします。
更にもう一つページ内表示用のプリセットを、追加します。（Ex.middle、500x500）

写真を格納するフィールド（カラム）を含んだ新コンテンツタイプを作成

管理セクション≫コンテンツの管理≫コンテンツタイプページで[コンテンツタイプの追加]タブをクリックします。
名前：Photos と入力します。
タイプ：photos と入力します。
説明：Imagefieldを含んだコンテンツと入力します。
（2．～4．は自分で解る言葉を入力して下さい。)
[コンテンツタイプの保存]をクリックします。
管理セクション≫コンテンツの管理≫コンテンツタイプページに戻ります。
先ほど追加したPhtos行の [manage fields]をクリックします。
New field：にphoto。
field_name：にphoto。
Select afield type-で画像を選択し、[保存]をクリックします。
（8.～9.は別の名称でもOKです）
[保存]するとフィールドの管理画面になります。以下の内容を設定します。
Permitted upload file extentions.:
アップロード可能なファイル拡張子をスペース区切りで入力します。
デフォルトで「jpg jpeg png gif」が入っています。
Minimum resolution for Images:
アップロード可能な最小画像サイズを指定します。「200x200」位を指定します。
Maximum resolution for Image:
アップロード可能な最大画像サイズを指定します。「800x800」位を指定します。
Path settings File path:
アップロード先のサーバディレクトリの指定です。空欄にしておいて下さい。
File size restrictions
Maximum upload size per file:
アップロードファイルの最大サイズです。「2M」にして下さい。
Maximum upload size per node:
ノードに付きの最大サイズです。「2M」にして下さい。
ALT text settings
Enable custom alternate text:
画像アップロード時、画像のALT属性の変更を許可する場合はチェックします。
Default ALT text:
デフォルトのALT属性値を入力します。
Title text settings
Enable custom title text:
画像アップロード時、画像のTitle属性の変更を許可する場合はチェックします。
Default Title text:
デフォルトのTitle属性値を入力します。
全般の設定
必須：
画像のアップロードを必須とする場合チェックします。
値の数：
説明では「Maximum number of values users can enter for this field.'Unlimited' will provide an 'Add mode' button so the users can add as many values as they like.」となっています。アップロード可能な最大値を入力します。（1以外の値は未検証です。1が安全です）
Default list value:
ノードとして表示したときに本文等と一緒に表示するかどうかのデフォルト設定を選択します。（リスト＝表示、Hidden＝非表示）
[フィールド設定の保存]をクリックします。

表示形式を設定します

管理セクション≫サイトの構築≫ビューページで[追加]タブをクリックします。
ビューの名前：を入力します。
ビューの説明：、ビューのタグ：を必要に応じて入力します。特に必要はありません。
◎ノード を選択し[次へ]をクリックします。
ビューの編集画面になります。
デフォルトのままで フィールドの右にある[+]をクリックします。
画面下の方にデフォルト：フィールドの追加エリアが表示されます。
ここに全ての表示可能な項目が表示されています。表示に必要な項目を選択し[追加]をクリックします。
先ほど追加したフィールドphoto(field_photo)を[追加]します。
他にタイトルや、本文など、表示したい項目を[追加]して下さい。
フィルタの右にある[+]をクリックします。
画面下にデフォルト：フィルタの追加エリアが表示されます。
ノード：タイプとノード：掲載をチェックし[追加]をクリックします。
ノード：タイプ、ノード：掲載各々、Photo、掲載する。を選択します。
上記定義はこれから作成するページ用、ブロック（サイドバー）用のデフォルト設定になります。
デフォルト ≫の下にあるプルダウンメニューで[ページ]を選択し[ディスプレイの追加]をクリックします。
デフォルト値がコピーされページ用ビューの設定が右の方に展開します。
基本設定：
名前：Photo Galleryページ。
タイトル：なし。
スタイル：フォーマットなし。
行スタイル：フィールド。
JAXの使用：いいえ。
ページャの使用：いいえ。
表示アイテム数：10。
重複行の削除：いいえ。
アクセス：無制限。
ブロックへのフォーム表示：いいえ。
ヘッダ：なし。
フッタ：なし。
結果が殻の場合のテキスト：なし。
テーマ：インフォメーション。
ページ設定：
パス：photo-gallery。
メニュー：メニューなし。
リレーションシップ：未定義。
アーギュメント：未定義。
フィールド：
photoにmiddleサイズ選択。
ノード：タイトル表示。
ノード：本文表示。
並べ替えの順：未定義。
フィルタ：デフォルトのまま。
デフォルト ≫の下にあるプルダウンメニューで[ブロック]を選択し[ディスプレイの追加]をクリックします。
デフォルト値がコピーされブロック（サイドバー）用ビューの設定が右の方に展開します。
基本設定：
名前：Photo Galleryブロック。
タイトル：なし。
スタイル：グリッド。
行スタイル：フィールド。
AJAXの使用：いいえ。
ページャの使用：いいえ。
表示アイテム数：6。
続き...リンク：はい。
重複行の削除：いいえ。
アクセス：無制限。
ブロックへのフォーム表示：いいえ。
ヘッダ：なし。
フッタ：なし。
結果が殻の場合のテキスト：なし。
テーマ：インフォメーション。
ブロック設定：
管理：Photo Gallery。
リレーションシップ：未定義。
アーギュメント：未定義。
フィールド：
photoにsmallサイズ選択。
ノード：タイトルを非表示に設定。
ノード：本文を非表示に設定。
並べ替えの順：未定義。
フィルタ：デフォルトのまま。
画面下の方でライブプレビューで表示を確認し[保存]します。