小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

画像欄にファイルをアップロードする方法

最終更新日: 2014-12-13

画像とファイルアップロードの概要

「すぐ使えるCGI」のVer. 4.4 以上の製品では、「画像」欄に画像以外のファイルもアップロードできます。

製品やバージョンによっては画像以外がアップロードできないように制限してありますが、この制限を解除する方法のご説明です。

画像とファイル切り替えの仕組み

表示用テンプレート(templates/article/ 配下のファイル)からその画像の <img> タグがすべて無くなると、ファイル(=拡張子が png/gif/jpg/jpeg 以外のファイル※1)がアップロードできるようになります。

なお、製品によっては既にファイルに切り替えた設定になっている場合があります。

※1 Ver. 4.8 以上の製品は、svg と svgz も画像としてアップロードできます。

画像・ファイル切り替え可能製品

画像欄にファイルをアップロードする方法

1.テンプレートから画像タグを削除

一覧テンプレート templates/article/article_list.txt

templates/article/article_list.txt から該当する画像の<img>タグを削除し、代わりにファイルダウンロード用のリンクを追加して下さい。

下記のような画像タグが削除対象です(「#」は数字)。

<img src="%_d_%/%_imagename_escaped_#_%">


<img src="%_d_%/%_thumbnail_escaped_#_%">


追加するファイルリンクの例)

※青字は番号に変更

<a href="%_d_%/%_imagename_escaped_#_%" title="%_imagetext_#_%" 
class="%_icon_class_#_%">%_imagetext_#_%</a>

記事ページテンプレート templates/article/article_image_#.txt

※製品によってはこのファイルはありません。「#」は数字。

templates/article/article_image_#.txt から該当する画像の<img>タグを削除し、代わりにファイルダウンロード用のリンクを追加して下さい。

削除する画像タグの例)

<img src="%_d_%/%_filename_escaped_%" alt="%_imagetext_%">


<img src="%_d_%/%_thumbnail_escaped_%" alt="%_imagetext_%">


追加するファイルリンクの例)

<a href="%_d_%/%_filename_escaped_%" title="%_imagetext_%" 
class="%_icon_class_%">%_imagetext_%</a>


2.テンプレートファイルアップロード

編集した下記のテンプレートをサーバに上書きアップロードして下さい。
templates/article/article_list.txt
templates/article/article_image_#.txt

3.確認

管理画面からファイルがアップロードできるか確認して下さい。

4.管理画面のテンプレート調整

管理画面には項目名として「画像」という表示が残っていますので以下のテンプレートファイルを編集して「ファイル」などに変更して下さい。

templates/admin/2.html (入力画面)
templates/admin/3.html (確認画面)

テンプレートを変更したらサーバに上書きアップロードして管理画面の表示をご確認下さい。

アイコン表示について

ファイル種別を表すクラス名

ファイルに関しては、「%_icon_class_#_%」または「%_icon_class_%」というテンプレート変数が使用できます。
ここにはファイルの種別に応じて以下のいずれかが出力されます。

xls  doc  ppt  pdf  txt  zip  gif  general


これらはスタイルシートのクラス指定として利用できます。

スタイルシートの設定例

a.doc {
	padding-left: 20px;
	background: url(./icons/doc.gif) no-repeat top left;
}


アイコンを画像タグで表示する場合

ファイルのアイコンを画像タグで表示したい場合はテンプレートに以下のように追加して下さい。

※青字は番号に変更

<img src="icons/%_icon_class_#_%.gif" alt="">

関連リンク

さらに詳しく