AmigoDatabaseカスタマイズノート - 検索結果やデータ詳細に画像サムネイル表示（画像縮小表示）

User Menu

» ログイン » ユーザ登録

はじめに

» AmigoDatabase » カスタマイズの前に » ご利用上のご注意 » 基本トラブルFAQ

カスタマイズノート

サポート

» サポート・ご要望 » ADBファンフォーラム

検索結果やデータ詳細に画像サムネイル表示（画像縮小表示） - 複数画像対応版

分類：データ表示関連

人気度：

データファイルベースにて画像データとして登録したアップロードファイルを、検索結果表示時に指定する縦横サイズ内に自動縮小表示します。検索結果に表示される画像は縮小表示されているだけですので、サーバーからのファイル読込転送サイズはアップロードされた画像のファイルサイズのままです。よってあまり多くの画像を縮小表示されるとページ表示に時間がかかってしまいますのでご注意下さい。

【ご使用上のご注意】

画像データ登録時に縦横サイズを自動取得しデータ登録しますが、画像サイズ取得処理は「JPEG」「GIF」「PNG」ファイルのみが対象となっております。
画像サイズなどを登録時に自動データ登録するように改造しているため、CSVファイルのインポート機能には対応しておりません。この改造が有効であるのは、Web上から登録されたデータのみとなります。ご注意下さい。
画像サムネイル作成表示Imagae::Magick版と目的は同じですが全く別の機能となります。Imagae::Magickモジュールがご利用可能であれば表示処理が軽いImagae::Magick版をご利用されることをお勧めします。

Thank you very much!

このカスタマイズ方法は、KENT WEB様配布のDiary Noteの画像サイズ取得プログラムを参考にさせて頂き、掲載許可を頂いたカスタマイズ方法です。この場を借りてKENT WEB様に御礼申し上げます。有難うございました。

[ コメントを見る ]

対象バージョン及び更新履歴

対象バージョン： ver9.85

2009/11/19 ver9.85に合わせ全面修正

2007/01/11 ver9.60での作動を確認

2006/08/25 2.1)のプログラム記述を修正

2006/07/03 2.1)のプログラム記述を修正

2006/07/01 ver9.57対応版として見直し。と共に複数画像対応へ

2005-11-03 Wiki用に移植

2005-10-27 ver9.51用に修正

カスタマイズ方法

1. サムネイルライブラリファイル

1) ダウンロード

サムネイルライブラリファイル「db-image.cgi」を次のリンクよりダウンロードして下さい。
ダウンロードファイルは「db-image-reduction.txt(TEXT形式)」になっています。
ダウンロード後に「db-image.cgi」とファイル名を変更して下さい。

db-image-reduction.txt

2) db-image.cgi設定

画像縮小表示設定を行います。db-image.cgiの

### 設定 ##################################################

#画像ファイルのサムネイル最大表示の大きさ（単位：ピクセル）
#縦横何れかのサイズが↓を超える画像を縮小表示します
my$MaxW = 150; # 横幅
my$MaxH = 150; # 縦幅

###########################################################

部分の数値を縮小表示させたいサイズに変更します。

3) FTPアップロードとパーミッション

database/libディレクトリ

へアップロードします。
パーミッションは「644」又は「604」です。

2. database.cgiの修正

次の記述を修正します。

  ...
  sub dr { &Lrequire('./lib/db-dr.cgi'); &DataRegist }
- #sub dra{ &Lrequire('./lib/db-dr.cgi'); &DataRegistAct }
+ sub dra{ &Lrequire('./lib/db-image.cgi'); &FileSizeGet;
+   &Lrequire('./lib/db-dr.cgi'); &DataRegistAct }
  sub de { &Lrequire('./lib/db-de.cgi'); &DataEdit }
- #sub dep{ &Lrequire('./lib/db-de.cgi'); &DataEditPart }
+ sub dep{ &Lrequire('./lib/db-image.cgi'); &Lrequire('./lib/db-de.cgi'); &DataEditPart }
- #sub dea{ &Lrequire('./lib/db-de.cgi'); &DataEditAct }
+ sub dea{ &Lrequire('./lib/db-image.cgi'); &FileSizeGet('edit');
+   &Lrequire('./lib/db-de.cgi'); &DataEditAct }
  sub dda{ &Lrequire('./lib/db-dda.cgi'); &DataDeleteAct }
  ...
  sub lo { &Lrequire('./lib/db-lo.cgi'); &LogOut }
- #sub s  { &Lrequire('./lib/db-s.cgi'); &Search }
+ sub s  { &Lrequire('./lib/db-image.cgi'); &Lrequire('./lib/db-s.cgi'); &Search }
  sub dl { &Lrequire('./lib/db-s.cgi'); &DataList }
  sub aul{ &Lrequire('./lib/db-s.cgi'); &AdminUserList }
  sub adl{ &Lrequire('./lib/db-s.cgi'); &AdminDataList }
- #sub dp { &Lrequire('./lib/db-dp.cgi'); &DataPart }
+ sub dp { &Lrequire('./lib/db-image.cgi'); &Lrequire('./lib/db-dp.cgi'); &DataPart }
  ...

3. 管理者データ設定

1) データ種類追加

管理者ルームから、「データ種類追加」を選択し、「画像ファイル」及び「画像サイズ横」、「画像サイズ縦」のデータ種類を追加設定します。
このデータ設定には以下の法則があります。これを守られた上で設定して下さい。

【アップファイル設定】
画像ファイルとして必要な数だけデータ設定して下さい。上限はありません。

追加対象 : データファイル (data.cgi)
データ種類 : DFile(画像ファイル番号)
※(画像ファイル番号)は任意の番号です。例："DFile1","DFile3"のように設定します。
※なお、"DFile"は固定です。変更してはいけません。
データ名称 : (任意の名前)
※ご自身が識別出来れば任意のテキストで結構です。

【画像サイズ設定】
1つの画像ファイルを設定すれば、その"横"と"縦"の2つのデータ設定が必要になります。設定漏れがないようご注意下さい。

追加対象 : データファイル (data.cgi)
データ種類 : DFW(画像ファイル番号) 及び DFH(画像ファイル番号) の二つを設定
※(画像ファイル番号)は"DFile"で設定した画像番号です。例："DFW1","DFH1"又は"DFW3","DFW3"のように設定します。
※なお、"DFW","DFH"は固定です。変更してはいけません。
データ名称 : (任意の名前)
※ご自身が識別出来れば任意のテキストで結構です。

2) データ種類削除

デフォルトで設定されている「DFile」は不要です。削除して下さい。

3) 環境設定

環境設定にて下記項目の設定を行って下さい。
ここでは"DFile1","DFile2"を設定したとしてご説明します。

アップロード可能ファイル形式 : DFile1==gif&jpeg&jpg&png,DFile2==gif&jpeg&jpg&png
アップロードファイルサイズ制限(KB) : DFile1==***,DFile2==***
※サイズ制限は任意で指定して下さい。
ファイルアップロード項目[デ] : DFile1,DFile2
未入力時の表示値[デ] : DFile1==space.gif,DFile2==space.gif

4. テンプレートHTML修正

1) data-regist.htmlの修正

ファイルアップロードフォームを設定。

<input size="30" type="file" name="DFile(画像ファイル番号)">

※設定した必要な数だけフォームを追加して下さい。
※デフォルトの"DFile"のフォームは不要ですので削除して下さい。

2) data-regist-preview.htmlの修正

<a href="$UpDir/tmp/$PREFORM{DFile(画像ファイル番号)}" target="_blank">$PREFORM{DFile(画像ファイル番号)}</a>

※設定した必要な数だけリンクを追加して下さい。

3) data-edit.htmlの修正

次の記述を追加します。

  <FORM action="$BaseDir/$MainCGI" method="POST" enctype="multipart/form-data">
  <INPUT type="hidden" name="cmd" value="dea">
  <INPUT type="hidden" name="SID" value="$PID">
  <INPUT type="hidden" name="DataNum" value="$FORM{DataNum}">
  <INPUT type="hidden" name="UserNum" value="$FORM{UserNum}">
  <INPUT type="hidden" name="Pass" value="$FORM{Pass}">
+ <!---ＨＴＭＬ--->
+ &FileSizeHidden;
+ print <<"<!---ＨＴＭＬ--->";
  <TABLE style="font-size : 9pt;" width="400">

次にアップロードフォームと削除チェックボックス等を必要な数だけ追加します。

<input size="30" type="file" name="DFile(画像ファイル番号)"> 
<font color="#ff0000">現在 > </font>
<a href="$UpDir/$DATA{DFile(画像ファイル番号)}" target="_blank">$DATA{DFile(画像ファイル番号)}</a> 
<input type="checkbox" name="fdel" value="DFile(画像ファイル番号)">削除

4) data-edit-preview.htmlを修正

次の記述を必要なだけ追加して下さい。

<a href="$UpDir/tmp/$PREFORM{DFile(画像ファイル番号)}" target="_blank">$PREFORM{DFile(画像ファイル番号)}</a>

5. db-html.cgiを修正

1) 基本設定

検索結果一覧の1当たりデータ表示設定であるサブルーチンを修正します。ここではHtml_Defaultサブルーチンを例としてご説明します。

- #sub Html_Default{ print <<EOM;
+ sub Html_Default{
+ &ImageSizeGet;
+ print <<EOM;
  <TR bgcolor="$TrColor">

2) 画像表示方法

次の様に設定します。

<a href="$UpDir/$VD[$REC{Data}{DFile(画像ファイル番号)}]" target="_blank"><img src="$UpDir/$VD[$REC{Data}{DFile(画像ファイル番号)}]" border="0" width="$DFW(画像ファイル番号)" height="$DFH(画像ファイル番号)" alt=""></a>

※表示させたい画像の数だけ任意に設定して下さい。

6. データ詳細ページで画像縮小表示させる

1) lib/template/data-part/data/****.htmlを修正

1行目に次の記述追加します。

+ &ImageSizeGet;
  print <<"<!---ＨＴＭＬ--->";
  <HTML><HEAD>

縮小画像を表示させるのは、前項検索結果一覧の表示方法と同様です。

引用文中の「+」や「-」についてはこちらをご覧下さい。引用文の「+」や「-」が正しく表示されていない場合があります。「view plain」をクリックして頂ければ正しい引用文が表示されます。

update at 2009/11/19(Thu) 17:54:29. DataNum 26 [ TOP ]

Comment Form: 投稿数(0)

カスタマイズへのご意見やご要望などのコメントにご利用下さい。
不適切な発言は即時削除致します。
管理人はコメントに対し一切お返事を致しませんの予めご了承下さい。
導入トラブルやご質問、バグの報告はAmigoDatabaseファンフォーラムまでお願いします。

[ TOP ]