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

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

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

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

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

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

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

※1 「ファイル」は、ここでは画像を表す拡張子( png/gif/jpg/jpeg )を持たないファイルを指します。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;
}

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

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

※青字は番号に変更

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

関連記事

画像の数を増やす方法

基本のマニュアル ホームページ画面
「すぐ使えるCMS」はテンプレートの編集でアップロードできる画像の個数を増やすことができます。画像の追加方法のご説明。

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

基本のマニュアル ホームページ画面
「すぐ使えるCMS」のファイル欄を画像アップロード用に変更する方法。数の制限無く画像がアップロードできるようになります。