[WordPress] 外掛分享: Image Placeholder

首頁外掛目錄 › Image Placeholder
10+
安裝啟用
★★★★
4/5 分(1 則評價)
4802 天前
最後更新
問題解決
WordPress 3.3+ v1.0 上架:2013-04-24

內容簡介

使用簡碼

使用沒有任何可選屬性的簡碼 [image-placeholder] 將生成一個 300 像素寬、200 像素高的圖像,使用 Holder 的“social”主題,該主題默認為純藍色背景和白色文本,顯示圖像大小(“300 × 200”)。

設置寬度和高度

您可以設置佔位符圖像的寬度和高度(以像素為單位):

[image-placeholder width="500" height="100"]

更改顏色

您可以更改背景和文本顏色:

[image-placeholder colors="#000:#fff"]

這將創建一個黑色背景和白色文本的圖像。

更改文本

默認情況下,Holder.js 使用圖像大小進行文本顯示。您可以更改此內容:

[image-placeholder text="Foo bar"]

刪除高度和寬度樣式

默認情況下,Holder.js 將添加內聯樣式來指定圖像的高度和寬度。您可以刪除這些內聯樣式:

[image-placeholder auto="true"]

僅返回 URL

如果您想在自己的 <img> 標記中使用佔位符,或者作為背景風格,例如:

[image-placeholder url="true"]

添加類別

如果您希望在生成的 <img> 標記中添加一個類別:

[image-placeholder class="my-class"]

更改主題

Holder 目前提供三種內置主題:gray、industrial 和 social。您可以在簡碼中使用這些主題,例如:

[image-placeholder theme="industrial"]

您也可以創建自己的主題。每個主題定義了前景色、背景色、字體大小和字體家族。最簡單的方法就是包含一個腳本標記:

<script>Holder.add_theme("my-theme", { background: "#000", foreground: "#fff", size: 14 })</script>

有許多 自定義主題的其他選項。

學分

此外掛僅是 Holder.js 庫的 WordPress 簡碼封裝,該庫由 Ivan Malopinsky 構建。

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.0) 或搜尋安裝

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

原文外掛簡介

Using the Shortcode
Using the short code [image-placeholder] without any of the optional attributes will generate a 300px wide by 200px high image using Holder’s ‘social’ theme which defaults to a solid blue background with white text showing the size of the image (‘300×200’).
Set the width and height
You can set the width and height (in pixels) of your placeholder image:
[image-placeholder width="500" height="100"]

Change the colors
You can change the background and text colors:
[image-placeholder colors="#000:#fff"]

This will create an image with a black background and white text.
Change the text
By default holder.js uses the size of the image for the text. You can change this:
[image-placeholder text="Foo bar"]

Remove the height and width styles
By default, holder.js will add inline styles to specify the height and width of the image. You can remove these:
[image-placeholder auto="true"]

Only return the URL
If you want to use the placeholder in your own tag or as a background style, for example:
[image-placeholder url="true"]

Add a class
If you want to add a class to the tag that it generated:
[image-placeholder class="my-class"]

Change the theme
Holder currently provides three built-in themes: gray, industrial, and social. You can use these in the short code like this:
[image-placeholder theme="industrial"]

You can also create your own theme. Each theme defines the foreground color, the background color, the font size and the font family. The easiest approach is to simply include a script tag:

There are a lot of other options for customizing themes.
Credits
This plugin is merely a WordPress shortcode wrapper for the holder.js library built by Ivan Malopinsky.

延伸相關外掛

文章
Filter
Mastodon