-
Notifications
You must be signed in to change notification settings - Fork 10
/
README.txt
executable file
·137 lines (98 loc) · 7.6 KB
/
README.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
# Dominant Colors Lazy Loading
Contributors: manuelwieser
Donate link: https://manu.ninja/
Tags: images, dominant colors, lazy loading, pinterest, javascript, optimization, performance, bandwidth
Requires at least: 4.4
Tested up to: 5.0
Stable tag: 0.8.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
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.
## 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](https://manu.ninja/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](https://manu.ninja/dominant-colors-for-lazy-loading-images) 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](https://co.wordpress.org/plugins/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/](http://www.karriere.at/blog/).
## Installation
1. Upload `dominant-colors-lazy-loading` folder to the `/wp-content/plugins/` directory.
2. Activate the plugin through the 'Plugins' menu in WordPress.
## Frequently Asked Questions
### 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"...
</div>
````
## Changelog
### 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, using `attachment_url_to_postid`. This should add support for plugins like WooCommerce, who don't output their images with `wp-image-*` classes. Thanks, [@ecksite](https://github.com/Lorti/dominant-colors-lazy-loading-wordpress-plugin/pull/21)!
### 0.6.3
* The first user interaction triggers a viewport check, that means the first `keydown`, `mousedown`, `mousemove` or `touchstart` event. Each `scroll` and `resize` events still triggers a viewport check.
### 0.6.2
* All filters are now disabled for Accelerated Mobile Pages when using Automattic's [AMP](https://wordpress.org/plugins/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 classic `array()` 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](http://codepen.io/shshaw/post/responsive-placeholder-image). 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 ;)