Nucleus｜画像の縮小表示

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

サムネイル作成プラグインはこちらからお好みのものをご利用してください。
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||テスト画像)%>

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

関連記事

• Nucleus｜アイテムの追加方法
• Nucleus｜アイテムの編集方法
• Nucleus｜アイテムの日付を変更
• Nucleus｜画像（ファイル）のアップロード

Keyword: Nucleusの使い方

Search

Keyword » 182