內容簡介
當從媒體庫或媒體上傳程式將圖片插入文章時,只有 <img> 標籤的 HTML 和包含該標籤(如果有的話)的連結被保存。這意味著希望更改內容中圖片標記方式的佈景主題沒有一種簡單的方法可以實現。
Image Shortcake 嘗試通過將圖片保存為短碼而不是 HTML 來解決這個問題。短碼的輸出可以在主題、外掛和模板中輕鬆地進行篩選,並且由於原始附件數據被保存為短碼的屬性,因此在主題中更改圖片標記方式變得更加容易。
為了獲得最佳效果,建議與 Shortcake (短碼 UI) 外掛一起使用。Shortcake 提供了一個易於使用的介面來管理文章內容中的短碼。
您可以用 Image Shortcake 實現什麼功能?在 Fusion,我們使用此短碼來實現以下功能:
響應式圖片。通過篩選 [img] 短碼圖像標籤的輸出,我們可以插入 srcset 屬性,以便所有圖像都能夠在支持此功能的瀏覽器中響應式顯示。
內嵌共享按鈕。我們將共享連結添加到網站上的每個圖片。由於這些共享連結是通過篩選器插入到短碼中而不是在文章內容中,因此很容易在運行時進行修改。且輸出短碼的邏輯在模板文件中而不是在頁面載入後運行的 on-page javascript 中,這使得使用更快捷。
圖片來源。我們添加了「credit」作為圖像元數據欄位,並在「img_shortcode_output_after_linkify」篩選器上使用它在所有圖像上顯示出來。
有關自定義圖片模板的更多想法和提示,請參見安裝一節。也歡迎您在 Github 上 參與該專案。
外掛標籤
開發者團隊
原文外掛簡介
When images are inserted into posts from the media library or media uploader, only the html of the tag and the link around it (if any) are preserved. This means that themes which want to change the way images are marked up in content don’t have an easy way of doing this.
Image Shortcake is an attempt to solve this problem, by saving images in post content as shortcodes rather than HTML. The output of shortcodes can be easily filtered in themes, plugins and templates, and since the original attachment data is preseved as attributes on the shortcode, it becomes much easier for modify the way images are marked up in themes.
For best results, use this with the Shortcake (Shortcode UI) plugin. Shortcake offers an easy to use interface to manage shortcodes in post content.
What could you use this for? Well, at Fusion we use this shortcode for:
Responsive Images. By filtering the output of the [img] shortcode image tag, we’re able to insert the srcset attribute, so that all of
the images on our site are served responsively to browsers that support that.
Inline sharing buttons. We’ve added share links to each of the images on our site. Because these are inserted through a filter on a shortcode and not in the post content, it’s easy to modify them on the fly. And having this logic in template files rather in on-page javascript that runs after page load makes it quicker for users.
Photo credits. We’ve added “credit” as an image meta field, and we use a filter on ‘img_shortcode_output_after_linkify’ to display it on all images.
See the Installation section for more ideas and tips for custom image templates. Get involved with the project on Github.
