外掛說明
This plugin allows you to lazy load your images while showing the dominant color of each image as a placeholder – like Pinterest or Google Images. It also enables you to use tiny thumbnails as placeholders. If you want to know how it works read the article Dominant Colors for Lazy-Loading Images, where I explain the general concept.
To ensure the quality of the plugin please let me know if you encounter any issues. I will reply swiftly and fix them as soon as possible!
Features
- The plugin calculates the dominant color of an image upon upload.
- All images attached to posts and pages are automatically replaced with placeholders and load as soon as they enter the viewport to save bandwidth.
- Galleries added via the default
[gallery]
shortcode are also replaced and loaded as soon as they appear in the viewport. - A custom filter for lazy-loading thumbnails or featured images can be used in templates and themes (
apply_filters( 'dominant_colors', $image, $id )
). - Dominant colors can be calculated for all existing attachments in the plugin settings.
- This has already been tested with thousands of images.
- Until the calculation is done you can specify a fallback color for your placeholders.
- All files that can’t be processed are listed during calculation and link to the particular attachment in the media library.
- You can choose between GIF and SVG placeholders.
- SVG placeholders have the same pixel size and aspect ratio as the original images, instead of being a single square pixel. This way responsive images do not need a wrapper for preserving the original aspect ratio.
- GIF placeholders are small and have great browser compatibility. They also enable you to use tiny thumbnails as described on manu.ninja for your images.
- You can set the resolution of tiny thumbnails to 3×3 pixels (120 bytes), 4×4 pixels (128 bytes) or 5×5 pixels (204 bytes).
- The plugin is compatible with RICG Responsive Images, which has been added to WordPress 4.4 as default functionality.
Demo
You can see the plugin live at http://www.karriere.at/blog/.
螢幕擷圖
安裝方式
- Upload
dominant-colors-lazy-loading
folder to the/wp-content/plugins/
directory. - Activate the plugin through the ‘Plugins’ menu in WordPress.
常見問題集
- Why are no dominant colors and tiny thumbnails calculated?
-
Please make sure that you have installed and activated the
imagick
PHP extension. - How do I use the custom filter in my themes?
-
$image = get_the_post_thumbnail( $post_id );
$image = apply_filters( 'dominant_colors', $image, get_post_thumbnail_id ( $post_id ) );
echo $image;There is an optional third argument, you can use to specify the format. The available formats are stored as constants in the
Dominant_Colors_Lazy_Loading
class. If you do not specify a format the filter will use the format you have chosen in the plugin settings.FORMAT_GIF
will output GIF placeholders.FORMAT_SVG
will output SVG placeholders.-
FORMAT_WRAPPED
will output GIF placeholders with wrappers to preserve the aspect ratio of responsive images.`
<
div class=”dcll-wrapper” style=”padding-top: 56.25%;”>
<img class="dcll-image"…“
使用者評論
參與者及開發者
變更記錄
0.8.0
- Added an option for
<noscript>
tags to the admin interface. The tags add a lot of HTML, but they’re great for users with JavaScript disabled and can be good for SEO (your mileage may vary).
0.7.0
- Added a fallback for images without
wp-image-*
classes. The plugin can now determine the attachment ID from the image URL, usingattachment_url_to_postid
. This should add support for plugins like WooCommerce, who don’t output their images withwp-image-*
classes. Thanks, @ecksite!
0.6.3
- The first user interaction triggers a viewport check, that means the first
keydown
,mousedown
,mousemove
ortouchstart
event. Eachscroll
andresize
events still triggers a viewport check.
0.6.2
- All filters are now disabled for Accelerated Mobile Pages when using Automattic’s AMP plugin.
0.6.1
- Style attributes set for SVG placeholders are now purged after loading the original images. This fixes an issue where the background color is visible behind transparent PNGs.
0.6.0
- Added all the functionality needed for tiny thumbnails, including tests. Looking forward to any issues that will inevitably occur 😉
0.5.7
- Prior to this version wrappers created by the custom filter via
FORMAT_WRAPPED
were removed from the page after image load. This caused some page jumping, which is why they are now left untouched.
0.5.6
- Added an optional argument for specifying the placeholder format the custom filter returns.
- Added a third format (only available via the custom filter) that automatically wraps responsive images so that the placeholder has the right aspect ratio.
0.5.5
- All files that can’t be processed are now listed during calculation and link to the particular attachment in the media library.
0.5.4
- Calculation of missing colors should now be able to scale up to millions of images.
- Admin interface is now split into a tab for placeholder settings and a tab for calculation of missing colors.
- Replaced placeholders now trigger a viewport check, to see if relayout affected the position of any images.
0.5.3
- Fixed a bug in displaying whether calculation of an image failed or succeeded.
0.5.2
- Portuguese translation added by Pedro Mendonça.
- Simple test suite for admin functions added.
- Changed all
[]
array literals to the classicarray()
for compatibility.
0.5.1
- Admin interface now shows an error if no ImageMagick PHP extension was found.
- Admin interface is now ready for translation. There is a
.pot
file, go crazy 😉 - German translations for the admin interface added.
0.5.0
- Added a bulk operation in the settings for calculating missing dominant color meta values for existing images. Until recently colors were only calculated upon initial upload of an image.
0.4.0
- Filter for lazy-loading images in custom templates and themes added.
- Added an option to specify a fallback color if no dominant color was found.
0.3.0
- Added an option to use SVG placeholders as described by Shaw. SVG placeholders have the same pixel size and aspect ratio as the original images, instead of being a single square pixel. This way responsive images do not need a wrapper for preserving the original aspect ratio.
- Images with no dominant color stored in the database are now automatically skipped.
0.2.2
- Fixed a bug where responsive images weren’t revealed properly.
0.2
- Galleries added via the default
[gallery]
shortcode are now also lazy loaded while showing the dominant color of each image as a placeholder.
0.1
- Initial release — plugin seems to work 😉