[WordPress] 外掛分享： Simple Thumbs

前言介紹

  • 這款 WordPress 外掛「Simple Thumbs」是 2010-10-24 上架。
  • 目前有 10 個安裝啟用數。
  • 上一次更新是 2011-07-12，距離現在已有 5045 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
  • 外掛最低要求 WordPress 3.0 以上版本才可以安裝。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

eskapism | marsapril |

外掛標籤

gd | image | photos | thumbs | thumbnails |

內容簡介

** 這個外掛已經不再更新。 **

這個外掛有三個功能：

它創建重寫規則，讓你為圖像創建漂亮的 URL，像是“http://example.com/image/55/DSC_0001.jpg” 而不是 “http://example.com/wordpress/wp-content/uploads/2010/02/DSC_0001.jpg”
它讓你調整圖像大小和裁剪圖像。而且你還可以在圖像上增加 unsharp 的濾鏡效果。
它新增了一個名為 simple_thumbs_img() 的函數，你可以使用這個函數建立預先設定好的 IMG 標籤，
即使你選擇調整大小或裁剪圖像，它也可以輸出正確的寬度和高度。

重寫規則 / 漂亮的圖像 URL 範例

比起這個 URL：
http://example.com/wordpress/wp-content/uploads/2010/02/DSC_0001.jpg

你的圖像可以由下列 URL，其中55是附件 ID：
http://example.com/image/55/DSC_0001.jpg

簡潔而明瞭。
但這還不是全部！你還可以傳入一些參數:

將圖像調整為寬度為 150 像素：
http://example.com/image/55:w150/DSC_0001.jpg

將圖像調整為寬度為 150 像素，並為其指定另一個名稱 (你可以為圖像命名為任何你想要的名字)
http://example.com/image/55:w150/my-cool-image.jpg

將圖像調整為高度為 150 像素：
http://example.com/image/55:h150/DSC_0001.jpg

將圖像調整為保持在 150 像素的高度和寬度之內：
http://example.com/image/55:w150:h150/DSC_0001.jpg

將圖像裁剪為確切的 150 像素寬度和高度：
http://example.com/image/55:w150:h150/DSC_0001.jpg

製作一個小型縮略圖，並添加 unsharp 濾鏡：
http://example.com/image/55:w175:h75:c1:u1/DSC_0001.jpg

製作一個小型縮略圖，並添加 unsharp 濾鏡，並以 png 格式輸出：
http://example.com/image/55:w175:h75:c1:u1:fp/DSC_0001.jpg

與上面相同，但是分隔符為 | (你可以在 ,._- 和 | 中進行選擇):
http://example.com/image/55|w175|h75|c1|u1|fp/DSC_0001.jpg

請注意，所有調整大小的東西都是在不添加任何查詢字串的情況下進行的。
這對於搜索引擎優化 (SEO) 和快取是有好處的。
例如，Google Page Speed 會因為這樣而給你更高的分數！ 🙂

所有生成的圖像都會進行緩存，因此對每個 URL 的第一次調用結果是實際調整圖像。
圖像還具有遠期期限標頭，因此如果用戶返回到您的頁面，所有圖像應該加載得非常快。

simple_thumbs_img()：神奇的函數

simple_thumbs_img() 會為您生成 IMG 標籤，並設置正確的寬度和高度屬性，即使調整大小後也是如此。

如果沒有設置寬度和高度值，頁面可能會重繪多次，導致非常 “混亂”
使用 Simple Thumb 建立您的圖像標記將解決此問題。

在 img 标记中缺乏寬度和高度标记也会导致
JavaScript ondomready 計算在圖片還在加載時發生錯誤，因為它無法確定圖像的大小。

// 為 ID 為 55 的圖像獲取 img 標籤，並設置正確的寬度和高度屬性。
// 你可以做任何你想做的事情
$img_src = simple_thumbs_img("id=55&tag=1");

// 印出 ID 為 55 的圖像的漂亮 URL img 標記，而且還設置了正確的寬度和高度屬性。
echo simple_thumbs_img("id=55&tag=1");

// 印出 ID 為 55 的圖像的漂亮 URL img 標記，並將其調整為最大尺寸為75x75的縮略圖

原文外掛簡介

** This plugin will no longer be updated. **
This plugin does three things:

It creates rewrite rules that let you create nice urls for your images,
like “http://example.com/image/55/DSC_0001.jpg” instead of “http://example.com/wordpress/wp-content/uploads/2010/02/DSC_0001.jpg””
It let’s you resize and crop images. And you can add unsharp filter to them too.
It adds a function, simple_thumbs_img() and with this function you can create ready-to-go IMG-tags
that outputs the correct width and height, even if you choose to resize or crop your image.

Rewrite Rules/Nice Image URLs example
Instead of this URL:
http://example.com/wordpress/wp-content/uploads/2010/02/DSC_0001.jpg
Your image can have this URL, where 55 is the Attachment ID:
http://example.com/image/55/DSC_0001.jpg
Shorter and sweeter.
But there’s more! You can also send in some arguments:
Resize the image to be 150px in width:
http://example.com/image/55:w150/DSC_0001.jpg
Resize the image to be 150px in width, and give it another name (you can name the image to whatever you want)
http://example.com/image/55:w150/my-cool-image.jpg
Resize the image to 150px in height:
http://example.com/image/55:h150/DSC_0001.jpg
Resize the image to stay within 150px in height and width:
http://example.com/image/55:w150:h150/DSC_0001.jpg
Crop the image to exactly 150px in width and height:
http://example.com/image/55:w150:h150/DSC_0001.jpg
Make a small thumb, and also add an unsharp filter:
http://example.com/image/55:w175:h75:c1:u1/DSC_0001.jpg
Make a small thumb, and also add an unsharp filter, and output as png:
http://example.com/image/55:w175:h75:c1:u1:fp/DSC_0001.jpg
Same as above, but with pipe as the delimeter (you can choose between ,._- and |):
http://example.com/image/55|w175|h75|c1|u1|fp/DSC_0001.jpg
Please note that all the resize stuff where made without adding any querystring to the URL.
This is good for Search Engine Optimization (SEO) reasones, but also for caching reasons.
Google Page Speed will for example give you a higher score because of this! 🙂
All generated images will be cached, so only the first call to each URL restults in an actual resize of the image.
Images are also sent with far future expires headers, so if a user returns to your page all images should load blazingly fast.
simple_thumbs_img(): The Magic Function
simple_thumbs_img() generates IMG tags for you, with the correct width & height attributes set, even after resize.
With no width and height values set, the page may be redrawn several times, resulting in a very “jumpy” page.
Using Simple Thumb to create your image tag will solve this problem.
Lack of width and height atributes in img-tags can also lead to
errors when JavaScript ondomready calculations are made while images are still loading, since
it can’t determine the size of the image.

Resize modes
Control the way the thumbs are created by adding parameter “m”, as in “mode”.
To learn how they work just experiment a bit.

within = mw
crop = mc
portrait = mp
landscape = ml
auto = ma

Filters

unsharp mask – good for making small thumbnails appear to have more detail. Once you’ve gone unsharp, you don’t want to go back! 🙂
u0 for note, u3 for sharpest

Donation and more plugins

If you like this plugin don’t forget to donate to support further development.
More WordPress CMS plugins by the same author.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Simple Thumbs」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

最新版本

延伸相關外掛（你可能也想知道）

  • Thumbs Rating 》我需要一個簡單且輕量的外掛程式，以添加拇指評分，但我找不到任何內建的，所以我就自己建立了。 , 此外掛可讓您在內容（文章、頁面和自訂文章類型）上添加拇...。
  • BuddyPress Like 》這個WordPress外掛能讓使用者在你的BuddyPress網站上對內容進行「喜歡」的動作。。
  • WP-Choose-Thumb 》一個簡單的方法來為您的文章選擇一個預設的縮圖。, 與特色圖像核心功能一起運作。, 可用於佈景主題使用：, 在您想要出現縮圖的地方加入以下函數,
  • Webcam Gallery for WP 》Webcam Gallery for WP 可以透過讀取您網路空間的目錄中的圖片，建立一個圖片庫。, 透過簡短代碼 {wpcam}，您可以在 WordPress 網站的任何內容中插入圖片，無...。
  • Tui's Category Intro For Archive 》這個外掛提供了為每個封存檔案添加類別介紹的功能。不需要編輯主題即可使用此外掛，安裝後會設置一個預設佈局。您可以嘗試修改 HTML 佈局，直到達到你真正想...。
  • Tui's Author Intro For Post 》這個外掛給你添加每篇文章的作者介紹的能力。使用此外掛無需編輯主題，安裝時已設置了默認佈局。您可以根據需要更改 HTML 佈局，使用提供的多個標籤來訪問作...。
  • Tui's Author Intro For Archive 》這個外掛能讓您在每個封存頁面中加入作者介紹，不需要編輯佈景主題，安裝時已提供預設版面配置。您可以根據需要調整 HTML 配置，此外，也提供了多個標籤以便...。
  • Thumbar Rating Plugin 》即時全面統計數據, , 每個 Thumbar 顯示了「讚」、「踩」、總計數和讚比例, 自動調整大小的兩色條形圖可立即提供讚和踩投票的視覺化摘要, 可自定義的條形圖顏...。
  • Recent Post Lazy Load 》, , 擁有多種選項的小工具。此外掛基於著名的 WordPress 預設小工具「最新文章」，並增強以顯示文章的縮略圖。, 縮略圖來自文章內容中的特色圖片。如果沒有特...。
  • Dynamic-Photo-Album 》此外掛創建一個小型相片集於你的網誌側邊欄，透過視覺效果（javascript）顯示縮圖。獨特的功能是特殊的洗牌模式和/或循環模式，確保相片集中圖片的順序在頁面...。
  • Deviant Thumbs 》在您的 WordPress 博客上顯示來自 deviantART 的已連結縮略圖。, 功能：, , 可滾動的輪播：您的縮略圖可以以 dA 樣式的輪播方式顯示, 內嵌作品：在文章中使用...。
  • Tui’s Find Thumb 》許多 WordPress 主題都嚴重依賴「特色圖片」作為縮略圖，讓主題看起來更好。這很棒，但這會增加很多額外的工作，需要設置這些縮略圖參考，但同樣地，如果你趕...。
  • Tui's Category Intro For Post 》這個外掛提供了為每篇文章添加分類介紹的功能。我們在撰寫各種主題的文章時，通常都希望能分享所屬的分類，讓讀者更好地理解文章內容。使用該外掛不需要更改...。
  • Pegleg Ratings 》Pegleg Ratings 是一個針對文章使用的「讚」或「噓」式評分小工具。, 功能包括：, , 簡單的「讚」或「噓」評分。, 評分使用 AJAX 提交。, 使用者可以更新他們...。

文章
Filter
Apply Filters
Close
Mastodon