Nucleus｜画像の縮小表示

Author : pushman｜Nucleus｜2006-05-11 Thu 01:19

プラグインを使用せず、画像を縮小表示する方法です。

サムネイル作成プラグインはこちらからお好みのものをご利用してください。
plugins_by_category [Nucleus CMS Japan Wiki]

Nucleus のファイルアップロード機能を利用すると、テキストエリアに Nucleus 変数が挿入されます。

<%image(test.png|100|100|テスト画像)%>

「()」内が画像表示に必要な情報です。

最初の「test.png」はファイル名です。共有ディレクトリ内のファイルを選択した場合は、ファイル名の前にディレクトリ名が追加されます。その次の数字はそれぞれ「幅」「高さ」、最後が代替テキストです。ここを編集し、テンプレートを工夫することで、画像の縮小表示が可能になります。

例えば幅を 50px で表示したい場合は次のように image 変数を修正します。

<%image(test.png|50|100|テスト画像)%>

そして、アイテムを表示するテンプレートの「インライン画像のコード」を次のようにします。

<a href="<%link%>"><img src="<%link%>" width="<%width%>" alt="<%text%>" /></a>

それぞれの変数は「画像とメディアのポップアップ」のヘルプを参照してください。img タグの height 要素を削除し、width 要素のみにすることで、ブラウザが width に合わせて高さを計算してくれるので、縦横比を保ったまま縮小することが可能になります。テンプレートがデフォルトの「<%image%>」ままだと、height も利用されるので上記の場合は「高さ 100px」「幅 50px」となってしまい縦横比が崩れます。

テンプレートで height を使用しないので高さの値をどうしても関係ないのですが、僕は心配性なので高さの値は削除しています。

<%image(test.png|50||テスト画像)%>

オプションの区切り線である「|」まで削除しないように注意しましょう。

Tag(s): Nucleus の使い方

Comments

Posted by ぶい｜2008-11-06 Thu 12:39

IEだと画像の高さを省略できないみたいです。

Posted by pushman｜2008-11-06 Thu 13:02

ぷいさん

はじめまして。そして、コメントありがとうございます。

ご指摘の通りIEで高さが空になると表示されなくなるみたいですね。
失礼しました。
確実にするには手動で幅と高さを指定するしか無いみたいです。

Nucleus｜画像の縮小表示

Nucleus｜画像の縮小表示

Comments

Comment Form (policy)