Description
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/.
Installation
- Upload
dominant-colors-lazy-loading
folder to the/wp-content/plugins/
directory. - Activate the plugin through the ‘Plugins’ menu in WordPress
FAQ
- 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"…“
Reviews
Contributors and Developers
“Dominant Colors Lazy Loading” is open source software. The following people have contributed to this plugin.
Contributors“Dominant Colors Lazy Loading” has been translated into 2 locales. Thank you to the translators for their contributions.
Translate “Dominant Colors Lazy Loading” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Change Log
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 😉