Nucleus 画像のアップロードと配置


Nucleusで画像を表示する


右のような感じで画像を入れてみたい。

掲載される画像について

Nucleusは、画像サイズの変更、サムネールの制作を行わない。
アップロードした画像が素のまま掲載されるのであらかじめ画像サイズを調整しておく。
gdライブラリ使った画像アップロード用のプラグインがありそうだけど...?

画像アップロードの最初のステップ

  • 新規投稿なら左のナビの[アイテム追加]の下のブログを選択する。
    .....「アイテムの追加: 」ページが表示される。

  • すでに投稿したアイテムに画像を追加するなら、
     1.「あなたのアイテム」で「アイテム」(ページ)の一覧を表示する。
     2.画像を載せたいアイテムの「編集」をクリックする。
      .....「アイテムの編集」ページが表示される。

.....既に投稿したページに画像を追加する例で説明。


上の画面のアイコンで画像の配置の指定とアップロードができる。

    (1) ... 文字を強調する。<b>要素が挿入される。(<strong>がよさげだけど)
    (2) ... 文字を斜体にする。<i>要素が挿入される。
    (3) ... リンクが追加される。<a>要素が挿入される。
    (4) ... 左配置。<div style="text-align: left"</div>が挿入される。
    (5) ... 右配置。<div style="text-align: right"></div>が挿入される。
    (6) ... センター配置。<div style="text-align: center"></div>が挿入される。
    (7) ... 右画像の文字左流し込み。<div class="leftbox">></div>が挿入される。
    (8) ... 左画像の文字右流し込み。<div class="rightbox"></div>が挿入される。
    (9) ... 画像のアップロードにすすむ。

アップロード操作

上のアイコン(9)をクリックする。
.....すでにアップロードされている画像があれば表示される。
「埋め込み」は、アイテムに画像を埋め込んで表示する。(普通のやつ)
「ポップアップ」は、リンクが張られクリックで新しくウインドウを開いて画像を表示する。
さらに画像をアップロードするときは、「新規アップロード」をクリックする。
「ファイルを選択」をクリックし、アップロードするファイルを指定したら「アップロード」をクリックする
「フィルター適応」は表示ファイルの絞り込みに使う。
拡張子が「jpg」のファイルだけを表示したければ、「フィルター」窓に「jpg」と入力し、「フィルター適応」をクリックする。

「現在のコレクション」は、画像をしまっておくフォルダのこと。
「Private Collection」は今表示しているユーザがアクセスできる画像群。
「share」は他のユーザと共有する画像群のこと。
....この画面では「share」はないので「Private Collection」が固定されている。

アイテムへの画像掲載

画像をアイテムに掲載するときは、ファイル名をクリックする。
.....「Text to display?」の入力窓が表示される。

.......入力すると、img要素のalt属性に文字列が書かれる。
   alt属性=画像にカーソルをあわせたときに表示される文字列

「OK」をクリックすると、「アイテムの編集」ページの「本文」入力窓に画像を掲載するコードが自動的に入る。
画像の配置を行う場合は、アイコンの(7)、(8)をクリックして、「本文」入力窓に位置を指定するコードを入れてから調整する。

画像の削除

画像は、Nucleusのディレクトリの中の「media」の中のディレクトリ(例えば 「1」)にある。
rmコマンド、ftpなどで、このディレクトリの中の画像ファイルを削除する。

画像の手動追加

Nucleusのディレクトリの中の「media」の中のディレクトリにftpで画像をアップロードする。
mediaディレクトリとその下のディレクトリ(実際に画像ファイルが入るディレクトリ)は、httpでアクセスできてftpもできる所有者にすると、ブラウザでアップロードできてftpもできるので取り回しが楽になる。
例. #chown -R www:ftpgroup media



24 Feb, 2008 | mokimoc
« Prev item - Next Item »
---------------------------------------------

Comments



Leave comments

このアイテムは閲覧専用です。コメントの投稿、投票はできません。