1-0

[教學] 如何為文章加入圖片

為文章加上適當的圖片,可以使文章增色不少。在Twincl網站上,如何為文章置入圖片呢?請看以下說明。

註:目前Twincl網站已可直接上傳圖片,請參考 [公告] 新功能:上傳圖片

一、尋找適當的圖片

網路上有許多可以合法使用的圖片資源,Flickr是我個人覺得最好的圖片來源之一。它提供了根據「授權類型」搜尋的功能,讓你直接尋找「創用CC授權」的圖片。(「創用CC授權」是鼓勵人們自由分享創作內容的一種授權型式,Twincl網站由使用者建立的內容即採用「創用CC BY 4.0」授權條款。)

以下以Flickr為例,說明如何尋找可以合法使用的圖片。

(一) 搜尋Flickr圖片

  1. 前往Flickr網站,用關鍵字搜尋,例如「lake」。(用中文搜尋也可以,但圖片可能會少一些。)
  2. 點選左側「任何授權」下拉式選單,顯示所有可搜尋的授權類型。
  3. 選取適當的授權類型、例如「所有創用CC」或「允許商業用途」,接著就可以開始尋找圖片了。


Screenshot by Arthur Liao (flickr)

(二) 取得Flickr圖片網址

  1. 找到適合的圖片之後,點選圖片右下角的下載圖示,以顯示不同圖片大小的選單。(「中」或「大」適合放在文章內,「小」適合當文章縮圖。)
  2. 在適當的圖片大小(例如「中」)選單上按「滑鼠右鍵」。注意!是滑鼠「右鍵」,不是「左鍵」。
  3. 用瀏覽器的「複製連結網址」功能,將網址複製到剪貼簿。(後面將圖片加入文章時,會用到這個網址。)



Screenshot by Arthur Liao (flickr)

二、將圖片加到文章裡

有了圖片網址之後,我們就可以將圖片加到文章裡了。要怎麼做呢?首先要了解,在Twincl網站編輯文章時,有兩種模式:

  • 淡黃底的文字模式,可編輯文件的Markdown語法
  • 白底的HTML模式,可呈現文件的完整樣貌

加入圖片需使用文字模式。要切換這兩種模式,請點編輯區上方的 ⇄切換 按鈕,或按下鍵盤的 Alt / 快速鍵(蘋果Mac電腦為 ⌘Command / )。有關Twincl編輯器的進一步說明,請參考這裡

加入圖片時,請用以下Markdown語法:

![](https://...)\
*圖片解說*

其中「https://...」為圖片網址,可以直接貼之前「複製連結網址」時取得的Flickr圖片網址,「圖片解說」則可以放圖片作者名字及連結。因為Flickr規定,若要在其他網站直接顯示Flickr圖片,需要在網頁上提供可連回該圖片Flickr頁面的連結。

我個人的做法,是在圖片下方顯示作者名字及連結,這樣一來既符合「創用CC授權」的要求(顯示創作者名字),又可同時符合Flickr的規定(提供連回Flickr的連結)。

例如以下的Markdown語法,是我昨天為一篇文章加入圖片時用的:

![](https://farm8.staticflickr.com/7368/13901881460_571037e344_z_d.jpg)\
*Photograph by [Laurent Lebaux](https://www.flickr.com/photos/laurent_kiruan/13901881460) (flickr)*

這兩行Markdown語法,在HTML模式顯示時就像這樣:

三、為文章加上縮圖

您也可以為文章加上縮圖,縮圖會顯示在Twincl網站的文章列表上。為文章加縮圖很簡單,請在編輯文章時:

  1. 按編輯區下方的 ▾更多 按鈕
  2. 貼上縮圖網址(縮圖大小不可超過320x320)


Screenshot by Arthur Liao (flickr)

文章儲存送出後,縮圖就會顯示在文章列表頁面。

四、使用自己拍攝或製作的圖片

要為文章加上自己拍攝的照片或圖片,只要先將圖片上傳到Flickr、Google+、Dropbox等可提供外部圖片連結的服務,再將圖片連結加進文件內容即可。因為每個服務各有不同的規定,在此不一一詳述。以Flickr為例,只要將圖片上傳到自己的Flickr帳號,便可仿照前面做法複製圖片連結,為文章加入圖片。(記得要遵照Flickr規定,提供連回Flickr頁面的連結。)

以上說明看起來很長,實際做起來是很快的。希望這篇教學,能對大家有些幫助!

0筆討論 回應文章