[WordPress] 外掛分享: Simple Thumbs

首頁外掛目錄 › Simple Thumbs
10+
安裝啟用
尚無評分
5364 天前
最後更新
問題解決
WordPress 3.0+ v0.4.1 上架:2010-10-24

內容簡介

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

這個外掛有三個功能:

它創建重寫規則,讓你為圖像創建漂亮的 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 計算在圖片還在加載時發生錯誤,因為它無法確定圖像的大小。

<?php

// 為 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的縮略圖

外掛標籤

開發者團隊

⬇ 下載最新版 (v0.4.1) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Simple Thumbs」→ 直接安裝(推薦)

原文外掛簡介

** 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.

延伸相關外掛

文章
Filter
Mastodon