imageindex - クラウドでオンライン

プログラム：

NAME

imageindex - デジタル フォト ギャラリー ツール

SYNOPSIS

Imageindex は、デジタル画像ギャラリー プログラムです。 の自動生成を提供します。
画像や動画ファイルのサムネイルやその他のサイズのビュー、および W3C 準拠の HTML
サムネイルと画像またはビデオの表示を許可します。 また、すべてのモンタージュを作成します
HTML 内のディレクトリ エントリで使用される特定のディレクトリ内の画像。

DESCRIPTION

Imageindex は、単純なサムネイル生成プログラムから本格的なサムネイル生成プログラムへと進化しました。
ギャラリーアプリケーション。 それを使用すると、静的なサムネイルと「中」ビューを作成できます (
ダイヤルアップ Web ビューア) とともに、画像を時系列で表示する静的 HTML
順序 (Exif ヘッダーの日付またはファイル自体の日付スタンプに基づく)。 サポート
アニメーション GIF とビデオ ファイル用に追加されました (あらゆるファイル形式をサポートしています)。
mplayer のインストールがサポートされています)。

Imageindex は、さまざまな理由から、動的コンテンツではなく静的コンテンツを作成します。 何よりもまず
コンテンツが保存されている場合、定期的に CD-ROM に画像をアーカイブする方がはるかに簡単です。
ある種のデータベースに「閉じ込められた」のではなく、「そこに」あるだけです。 あなたはあなた自身を作成し​​ます
"database" を独自のディレクトリで作成し、imageindex にその表示を処理させます。
イメージを世界へ。 Imageindex は「モンタージュ」（またはすべてのサムネイルのサムネイル）を使用します
一緒に詰め込まれている) サブディレクトリが画像と一緒に発生する場合 (サンプルを参照)
imageindex Web サイトのページ - http://www.edwinh.org/imageindex/sample.html).

imageindex が作成する XNUMX つの基本的な「ビュー」があります (デフォルトで有効になっています)。 「インデックス」
ビューは、ディレクトリ内のすべての画像のサムネイルを基本的な表形式で表示します (デフォルトは 3
列）。 テーブルの各セル内には、日付/時刻などの基本情報が含まれています。
画像とコメント (またはキャプション) が表示されます。 へのリンク
さまざまなサイズの画像と画像のその他のビューもデフォルトで表示されます。

表示される XNUMX 番目のビューは、「スライド ショー」ビューです。 このビューでは、「中」サイズの画像
日付/時刻、画像に埋め込まれたキャプションなどの情報とともに表示されます。
など。現在、ビデオ ファイルの場合、「メディア」スライドは実際のビデオ ファイルのみを指しています。
処理されます。 将来のバージョンでは、ブラウザ内で直接再生できるようになります (
YouTube）。 各ページには「前へ」と「次へ」のリンクがあり、閲覧者はすばやく移動できます
ブラウザの「戻る」を常に呼び出す必要なく、各「中」画像を循環します


ビデオ ファイルのキャプションは、
元の動画ファイルですが、拡張子は「.txt」です。 このファイルの内容は、
結果の HTML を処理するときに、JPG などの形式に埋め込まれたキャプションと同じように使用されます。

「スライドショー」ビューと連動して「フレームビュー」があります。 へのリンクを有効にすると、
フレーム ビューは、インデックス ビューのページの上部に表示されます。 フレームビューのとき
アクセスすると、ブラウザのペインが XNUMX つの部分に分割されます。 左側にすべてのサムネイルがあります
ぎっしりと並んでいます。 右側の部分には、同じ「スライド ショー」ページがロードされます。
ユーザーが左側のサムネイルをクリックすると、「スライド」ビューになります (「中」を含む)
画像）がフレームの右側に表示されます。 これにより、非常に便利な
多くの画像を閲覧するためのメカニズム。

最後に、「詳細」ビューが存在します。 この詳細ビューは、インデックス ビューによく似ています。
サムネイル（さらにサイズを縮小）は表形式で表示されますが、さらに多くの
各セルに情報が表示されます。 これは、次の画像に非常に役立ちます。
Exif ヘッダーが多くのきちんとした情報で満たされているデジタル カメラ。

imageindex の HTML 出力は、「.imageindexrc」を作成することでカスタマイズできます。
$HOME ディレクトリに配置し、そのファイルに特定の変数 (VARIABLES セクションを参照) を配置し、
あなたの好みに合わせて編集します。 変数の XNUMX つは、カスケード スタイル シートの出力を制御します。
最終的にブラウザに HTML のレンダリング方法を指示します。 すべての色、フォント、インデント、
などの変更は、このスタイル シート変数で行うことができます。

変数

$HOME ディレクトリに「.imageindexrc」ファイルを作成するときは、任意またはすべてを配置できます。
そこに次の変数を配置し、必要に応じて微調整します。 これは Perl コードそのものであり、
その後、実行時に imageindex に「含まれ」ます。

You しなければなりません 「1;」を付けてファイルを終了します。 それの終わりに。 それはPerlのものです！

これらの例に表示される値は、プログラムのデフォルトです。 デフォルトが好きなら
特定の変数の値を「.imageindexrc」ファイルに含める必要はありません。

サムネイル画像を保持するディレクトリの名前

$thumbnail_dir = 'サムネイル';

「x」方向のサムネイル画像のサイズ (ピクセル)。 imageindex は保持することに注意してください
サムネイルを形成するために元のサイズから縮小されたときの画像の縦横比
画像。 したがって、「x」の寸法が「y」の寸法よりも小さい場合、サムネイルには
$default_thumbnail_x より小さい "x" サイズ。

$default_thumbnail_x = 200;

サムネイル画像の「y」方向のサイズ (ピクセル)。 繰り返しますが、imageindex に注意してください。
画像を元のサイズから縮小して
サムネイル画像。 したがって、「y」の寸法が「x」の寸法よりも小さい場合、サムネイル
$default_thumbnail_y より小さい "y" サイズを持っている可能性があります。

$default_thumbnail_y = 200;

オリジナルの両方の寸法がサムネイルの寸法のこの範囲内にある場合、
サムネイルをスキップして、オリジナルを「サムネイル」として使用します。

$thumbnail_threshold = 1.0;

「中」画像の「x」方向のサイズ (ピクセル)。 imageindex は保持することに注意してください
元のサイズから「中間」を形成するために縮小されたときの画像の縦横比
画像。 したがって、「x」の寸法が「y」の寸法よりも小さい場合、「中」の画像は
$med_x より小さい "x" サイズを持っています。

$med_x = 800;

「中」画像の「y」方向のサイズ (ピクセル)。 imageindex は保持することに注意してください
元のサイズから「中間」を形成するために縮小されたときの画像の縦横比
画像。 したがって、「y」の寸法が「x」の寸法よりも小さい場合、「中」の画像は
$med_y より小さい "y" サイズを持っています。

$med_y = 600;

「中」画像を保持するディレクトリの名前

$med_dir = 'ミディアム';

元の両方の寸法が「中」寸法のこの範囲内にある場合、
中サイズのフォーマットの作成をスキップして、オリジナルをそのまま使用してください。 これは無駄に節約します
元のサイズにすでに近い場合は、「中」の画像を作成します。

$med_threshold = 1.6;

サブディレクトリに自動的に再帰しますか? 有効にするには 1 に設定します。

$do_recurse = 0;

「中」画像を生成しますか? 有効にするには 1 に設定します。

$do_medium = 1;

「スライド ショー」とフレーム ビューを生成しますか? 有効にするには 1 に設定します。

$do_slide = 1;

「詳細」ビューを生成しますか? 有効にするには 1 に設定します。

$do_captions = 1;

画像に保存されているキャプション情報を使用/表示しますか? 有効にするには 1 に設定します。

$do_detail = 1;

サブディレクトリを通常の「インデックス」および「詳細」ビューのエントリとして処理しますか? 1 ～ に設定
有効。 ディレクトリ階層全体が $do_montage を 1 に設定して処理された場合 (
以下)、特定のディレクトリのモンタージュ ファイルは、「サムネイル」として使用されます。
サブディレクトリ。

$do_dirs = 1;

すべての画像のモンタージュを作成しますか? 有効にすると、処理されるすべての画像が
タイル パターンの非常に小さなサムネイルの NxM モンタージュに変わりました。 結果として
画像は $default_thumbnail_x x $default_thumbnail_y の寸法に縮小されて保存されます
$thumbnail_dir ディレクトリにあります。 タイルのサイズは、画像の数に応じて大きくなります
ディレクトリは増加しますが、以下に概説する変数によって制限される可能性があります。 有効にするには 1 に設定します。

$do_montage = 1;

画像のコメント内に埋め込まれた ASCII の「スマイリー」パターンを実際の「絵文字」にマッピングします
画像？ :) や :-)、ウィンク ;) や ;-) などの ASCII スマイリー フェイスを有効にすると、
眉をひそめる :( と :-( は、伝えられる感情を表示する小さな PNG 画像にマッピングされます。
有効にするには 1 に設定します。

$do_emoticons = 1;

タイムスタンプを逆順に並べ替えます。

$do_reverse = 1;

ビデオファイルを処理します。 これは、かなり最近のバージョンの mplayer がインストールされていることに依存しています。
あなたのシステム。 0.99.8 までテスト済みです。 サポートされているビデオ ファイルの種類
システムにインストールされた mplayer でコンパイルおよび使用されるコーデックに依存します。

$do_video_files = 1;

サムネイル ビューと中サイズ ビューのいずれかの隅に小さなアイコンをオーバーレイします。
ビデオ ファイルの最初のフレームを処理します。 これにより、ファイルが
ブラウザに表示されるのは動画ファイルであり、静止画像ではありません。

$do_video_thumbnail_icons = 1;

以下を正規表現として使用して、動画ファイルを拡張子で識別します。 為に
特定の技術的な理由により、この迅速かつ効果的な方法に頼る方が現実的でした。
方法。 カメラ（または何でも）からのファイルが異なる拡張子で終わる場合は、
ここにもその拡張機能があります。

$video_regexp = '(avi|mov|mpg|mpeg|mjpeg|m1v|m2v|wmv|fli|nuv|vob|ogm|vcd|svcd|mp4|qt)';

上記のビデオ ファイルの「ビジュアル キュー」アイコンを有効にすると、次のようになります。
変数は、配置されるコーナーを決定します。 許容値は次のとおりです。
NorthWest、NorthEast、SouthEast (大文字と小文字が区別されます)。

$video_icon_gravity = '南西';

上記のビデオ ファイルの「ビジュアル キュー」アイコンを有効にすると、次の XNUMX つのアイコンが表示されます。
（現在）から選択します。 「再生」矢印の付いた黄色のドットの場合は、1 (デフォルト) に設定します。 2に設定
ビデオカメラの紫がかったアイコン。 これらは今後のリリースでさらに作成される予定です。

$video_icon = 1;

次の XNUMX つの変数は、HTML 出力の「ポイント」するハイパーリンクを制御します。 彼ら
以下に設定できます。

index : インデックス ビュー内の画像の名前参照を指します
fullsize : 実際の画像自体を指します
medium : 画像の「中」バージョンを指します
サムネイル : 画像のサムネイル バージョンを指します。
slide : 画像用に作成された「スライド ショー」HTML ページを指します。
details : 詳細内の画像の名前参照を指します
ビュー

次の変数は、インデックス ビューのサムネイル イメージのハイパーリンクを制御します。
に指差す：

$index_linkto = 'スライド';

次の変数は、詳細内のサムネイル画像のハイパーリンクを制御します
ビューポイント:

$details_linkto = 'インデックス';

次の変数は、スライド ビューの「中」画像のハイパーリンクを制御します。
に指差す：

$slide_linkto = 'フルサイズ';

インデックス ビューと詳細ビューで使用する既定の列数

$default_columns = 3;

スライド フレームの向きを「水平」または「垂直」に設定します。 「垂直」の場合
ブラウザ ペインが縦に分割され、すべてのサムネイルが左側に表示されます。 いつ
'horizo​​ntal' ブラウザ ペインが水平方向に分割され、サムネイルが
上部

$frame_orient = '垂直';

次の XNUMX つの変数は、次の XNUMX つの値のいずれかに設定できます。

top : レンダリング時に問題のアイテムをページの上部に配置します
bottom : 問題の項目をページの下部に配置する場合
レンダリングされた
none : HTML 出力から項目を省略します

画像に埋め込まれた画像キャプション (またはコメント) を取得するかどうかを制御し、
HTML 出力に書き込まれます。 デフォルトでは、提示された「中」の画像の上に書かれています
「スライド」ビューで。

$slide_caption = 'トップ';

画像の日付/時刻を HTML 出力に書き込むかどうかを制御します。 デフォルトでは
「スライド」ビューに表示される「中」画像の下に書かれています。

$slide_date = '下';

「詳細」ビューでは、サムネイル画像が通常よりも小さいサイズに縮小されます
サムネイル (貴重なスペースを節約するため)。 これにより、縮小される回数が設定されます。
デフォルトでは、2 倍に縮小されます。

$詳細シュリンク = 2;

サムネイルと「中」の画像は JPEG ファイルとして書き出されます (元の画像が
画像は JPEG ではありません)。 次の XNUMX つの変数は、生成される「品質」を制御します。
画像。 値の範囲は 0 から 100 で、100 は「優先的に品質を失わない」ことを意味します
ファイルサイズの。」

書き出されるサムネイルの品質を調整する

$thumb_quality = 50;

書き出した「中」画像の品質を調整する

$med_quality = 80;

モンタージュ イメージに含まれるタイルの最小数を調整します。 数の場合
ディレクトリ内の画像がこの値よりも小さい場合、画像は繰り返されるか空白になります
が挿入されます ($montage_fill を参照)。

$montage_min = 4;

モンタージュで見つかるタイルの最大数を調整します。 数の場合
ディレクトリ内の画像がこの数よりも多い場合、モンタージュは「均等に」作成されます
ディレクトリ内の $montage_max 画像を選択し、それらのみを使用します。

$montage_max = 36;

モンタージュ イメージ (ピクセル) 間のスペースを調整します。

$montage_whitespace = 2;

ディレクトリと完全な NxM タイル モンタージュに「偶数」の画像がない場合
形成できない場合、画像を再度使用する場合、または空きスペースを使用する場合があります。 「繰り返す」に設定
空のスペースを使用するには、画像と「空白」を再利用します。

$montage_fill = '空白';

次の変数は、HTML 出力がレンダリングされる方法のすべての側面を制御します。
標準準拠のブラウザ。 この変数の内容は、
カスケード スタイル シートとその中にあるプロパティは、HTML がどのように表示されるかを制御します。
レンダリングされます。 すべての色、フォント、サイズ、配置などのプロパティの変更を行うことができます。 これ
カスケード スタイル シートの知識が必要な場合があります。 優れた入門書は次の場所にあります。

http://www.w3schools.com/css/css_reference.asp

$stylesheet = '
本体{色:黒; 背景: 白; }

/* タイトルのフォント */
h1.title { font-family: "Comic Sans MS",Helvetica,sans-serif;
フォントサイズ: 200%; フォントの太さ: 太字; テキスト整列: 中央; }
h2.daterange { フォントファミリー: Arial、Helvetica、サンセリフ;
フォントサイズ: 125%; テキスト整列: 中央; }
h3 { font-family: Arial、Helvetica、sans-serif; フォントサイズ: 90%;
テキスト整列: 中央; }

/* 写真のキャプションとディレクトリのタイトル */
div.caption { フォントファミリー: Arial、Helvetica、サンセリフ;
フォントサイズ: 100%; フォントの太さ: 太字; 余白: 1em; }

/* 目次と詳細ページ全体のフォント */
div.index { font-family: Arial、Helvetica、sans-serif;
フォントサイズ: 80%; }
div.detail { font-family: Arial、Helvetica、sans-serif;
フォントサイズ: 80%; }
div.credits { font-family: Arial、Helvetica、sans-serif;
フォントサイズ: 80%; テキスト整列: 右; 余白: 10px }

/* テーブル属性 */
table.index { 背景: #ffffff; ボーダー: なし;
ボーダー間隔: 8px; }
td.index { ボーダー: なし; パディング: 3px }
table.frame { 背景: #ffffff; ボーダー: なし}
td.frame { ボーダー: なし; パディング: 0px }

/* 画像属性 */
img.index { ボーダー: なし; }
img.slide { ボーダー: なし; }
img.frame { ボーダー: なし; }

/* リンク属性 */
a:link { 色: 青; }
a: 訪問済み { color: green; }
a:hover { 色: 赤; }
a: アクティブ { 色: 赤; }

';

「偶数」の数がない場合に「空の」テーブル セルに表示される内容を調整します。
ディレクトリ内の画像。

$emptycell = "空";

親ディレクトリへのハイパーリンクのテキストを制御します。 このリンクを希望しない場合
インデックスと「詳細」ビューに存在する 変数を「undef」します (undef $updirtext;)

$updirtext = "XNUMX つ上のディレクトリ";

フレーム ビューへのハイパーリンクのテキストを制御します。 このリンクを希望しない場合
インデックスおよび「詳細」ビューに存在する変数を「undef」します (undef $framelinktext;)

$framelinktext = "スライドショー ビュー (フレーム)";

詳細ビューへのハイパーリンクのテキストを制御します。 このリンクを希望しない場合
インデックスビューに存在する "undef" 変数 (undef $detaillinktext;)

$detaillinktext = "詳細インデックス";

インデックス ビューへのハイパーリンクのテキストを制御します。 このリンクを希望しない場合
詳細ビューに存在する "undef" 変数 (undef $indexlinktext;)

$indexlinktext = "メイン インデックス";

特定のディレクトリの HTML に書き出されるデフォルトの TITLE 文字列を制御します。 これは
ほとんどの場合、コマンドラインを介してディレクトリごとに指定され、ディレクトリ内で「記憶」されます
インデックス HTML ファイル自体内の META データ。

$default_titletext = "画像ディレクトリ";

次の XNUMX つの変数は、インデックス内のアンカー コンストラクトの TITLE 属性を制御します。
およびフレーム ビュー。 TITLE 属性が指定されると、通常は「ツールチップ」としてレンダリングされます
カーソルがアクティブなリンクの上に移動して停止したときにテキストを表示するバブル。 私たちはそれらを使用します
ここで、画像に関する視覚的な手がかりを提供します。 これらの変数は次のように機能します printf(1)
文字列。 特定の画像に対して補間できる値は次のとおりです。

%f => 画像のファイル名に置き換え
%d => 画像の日付/時刻 (またはファイルの mtime) に置き換えられます
%s => ファイルのサイズ (Kb) に置き換えられます
%r => 元の画像の解像度 (XxY) に置き換え
%c => 画像のキャプションに置き換え (保存されている場合)
%% => リテラル '%' 文字に置換

次のコードは、ディレクトリが処理されるときに補間され、そのモンタージュ
ディレクトリは、サブディレクトリのサムネイルとして使用されます。

%n => ディレクトリ内の画像数に置き換え
%b => 画像のディレクトリからの「開始」日付に置き換えられます
%e => 画像のディレクトリからの「終了」日付に置き換えられます
%t => 画像のディレクトリの「タイトル」に置き換え

その他の文字 (スペースを含む) はリテラルです。 「.imageindexrc」でこれらを「undef」します
TITLE 属性を HTML に書きたくない場合は、ファイルを変更してください。 「日時」
関連する構造は、以下で定義されている日付/時刻形式の変数を使用して補間されます。

フレーム ビュー内のサムネイル イメージへのハイパーリンクの TITLE 属性を制御します。 の
デフォルトは「 - " 画像の場合

$framethumbtitle = "%f - %d";

インデックス ビュー内のサムネイル イメージへのハイパーリンクの TITLE 属性を制御します。 の
デフォルトは「 ( )" 画像の場合

$indexthumbtitle = "%f (%s)";

スライド ビュー内のサムネイル イメージへのハイパーリンクの TITLE 属性を制御します。 の
デフォルトは「 ( )" 画像の場合

$slidethumbtitle = "%f (%s)";

詳細ビュー内のサムネイル イメージへのハイパーリンクの TITLE 属性を制御します。
画像に埋め込まれている場合、デフォルトは画像のキャプション (またはコメント) です。

$detailthumbtitle = "%c";

インデックス ビュー内のモンタージュ イメージへのハイパーリンクの TITLE 属性を制御します。
サブディレクトリが提示されています。 デフォルトでは、サブディレクトリに含まれる画像の数が表示されます
had とまたがる日付範囲。

$montagetitle = "%n 画像 %b から %e";

生成された html ページが持つべき文字セットを制御します。 これはデフォルトで UTF-8 ですが、
ISO-8859-1 またはその他のエンコーディングのいずれかです。

$file_charset = "ISO-8859-1";

次の XNUMX つの変数は、日付と時刻がどのようにフォーマットされるかを制御します。
HTML。 繰り返しますが、使用しています printf(1)コードが補間されるような変数
ユーザーの好みによる。

エスケープ シーケンスの定義は、POSIX に由来します。 ストラフタイム(3) 定義。 いいえ
すべての ストラフタイム(3) 明白な理由でサポートされています。

%S は、00 進数 (60-XNUMX) としての秒に置き換えられます。
%M は、00 進数 (59-XNUMX) としての分に置き換えられます。
%I は、12 進数 (01-12) としての時間 (XNUMX 時間制) に置き換えられます。
%H は、24 進数 (00-23) としての時間 (XNUMX 時間制) に置き換えられます。
%p は、"ante meridiem" または
必要に応じて「post meridiem」（現在は米国の「am」または「pm」のみ）
%R は "%H:%M" と同等です (*timeformat 変数のみ)。
%r は "%I:%M:%S %p" と同等です (*timeformat 変数のみ)。

%Y は、XNUMX 進数として世紀を含む年に置き換えられます。
%y は、00 進数 (99 から XNUMX) としての世紀なしの年に置き換えられます。
%m は 01 進数の月 (12 から XNUMX) に置き換えられます。
%d は 01 進数 (31 から XNUMX) の日付に置き換えられます。
%F は "%Y-%m-%d" と同等です (*dateformat 変数のみ)。
%D は "%m/%d/%y" と同等です (*dateformat 変数のみ)。
%% はリテラル "%" に置き換えられます。

フレーム ビューでの日付の形成方法を制御する

$framedateformat = "%m/%d/%Y";

フレーム ビューでの時間の形成方法を制御する

$frametimeformat = "%r";

インデックス ビューでの日付の形成方法を制御する

$indexdateformat = "%m/%d/%Y";

インデックス ビューで時間の形成方法を制御する

$indextimeformat = "%r";

スライド ビューでの日付の形成方法を制御する

$slidedateformat = "%m/%d/%Y";

スライド ビューで時間の形成方法を制御する

$slidetimeformat = "%r";

詳細ビューでの日付の形成方法を制御する

$detaildateformat = "%m/%d/%Y";

詳細ビューでの日付の形成方法を制御する

$detailtimeformat = "%I:%M %p";

インデックス ビューの HTML ファイル名を制御する

$indexfile = 'index.html';

詳細ビューの HTML ファイル名を制御する

$detailfile = 'details.html';

フレーム ビューの HTML ファイル名を制御する

$framefile = 'frame.html';

スライド ビューの HTML ファイル名を制御する

$slidefile = 'slides.html';

すべての「スライド ビュー」HTML ファイルが保存されるディレクトリの名前を制御します
(画像ごとに XNUMX つ)

$slide_dir = 'スライド';

各ディレクトリに書き出されるカスケーディング スタイル シートの名前を制御する

$stylefile = 'style.css';

有効な場合、モンタージュ イメージの名前を制御します

$montagefile = 'モンタージュ.jpg';

絵文字の PNG 画像ファイル名のプレフィックスを制御する

$emoticonprefix = 'ii_';

例

例として、日付/時刻のフォーマット文字列を変更したいとします。 完了
この場合の「.imageindexrc」ファイルは次のようになります。

$framedateformat = "%F";
$frametimeformat = "%R";

$indexdateformat = "%F";
$indextimeformat = "%R";

$slidedateformat = "%F";
$slidetimeformat = "%R";

$detaildateformat = "%m/%y";

1; # これをファイルの最後の行として取得しないでください!

謝辞

Perl の作成者である Larry Wall 氏の「スイス軍のチェーンソー」に感謝します。
スクリプト言語 (および何年にもわたって Perl をハッキングしてきたすべての人)。 私達
また、ImageMagick とそのコンパニオン モジュールに貢献してくれたすべての人に感謝します。
パールマジック。 PerlMagick がなければ、このソフトウェアの堅牢性は非常に低くなります。
さらに、mplayer の作成者 (およびすべての貢献者) に感謝します。
mplayer がなければ、ビデオ ファイルのサポートが導入されることはありませんでした。

作者

エドウィン・ハフスタットラー
ジョン・レイノルズ

onworks.net サービスを使用してオンラインで imageindex を使用する