{"id":42980,"date":"2016-04-05T14:57:29","date_gmt":"2016-04-05T14:57:29","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/dominant-colors-lazy-loading\/"},"modified":"2018-12-13T13:56:56","modified_gmt":"2018-12-13T13:56:56","slug":"dominant-colors-lazy-loading","status":"publish","type":"plugin","link":"https:\/\/mlt.wordpress.org\/plugins\/dominant-colors-lazy-loading\/","author":14896434,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"0.8.0","stable_tag":"0.8.0","tested":"5.0.25","requires":"4.4","requires_php":"","requires_plugins":"","header_name":"Dominant Colors Lazy Loading","header_author":"Manuel Wieser","header_description":"","assets_banners_color":"723f22","last_updated":"2018-12-13 13:56:56","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/manu.ninja\/","header_plugin_uri":"https:\/\/manu.ninja\/dominant-colors-for-lazy-loading-images","header_author_uri":"https:\/\/manu.ninja\/","rating":5,"author_block_rating":0,"active_installs":100,"downloads":7228,"num_ratings":2,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":"2"},"assets_icons":[],"assets_banners":{"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":"1387288","resolution":"772x250","location":"assets"}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["0.2.0","0.2.1","0.2.2","0.3.0","0.5.0","0.5.1","0.5.2","0.5.3","0.5.4","0.5.5","0.5.6","0.5.7","0.6.0","0.6.1","0.6.2","0.6.3","0.7.0","0.8.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":"1453669","resolution":"1","location":"assets"},"screenshot-2.png":{"filename":"screenshot-2.png","revision":"1453669","resolution":"2","location":"assets"},"screenshot-3.png":{"filename":"screenshot-3.png","revision":"1453669","resolution":"3","location":"assets"},"screenshot-4.png":{"filename":"screenshot-4.png","revision":"1453669","resolution":"4","location":"assets"}},"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[24491,163,229,1464,312],"plugin_category":[50,56,59],"plugin_contributors":[93953],"plugin_business_model":[],"class_list":["post-42980","plugin","type-plugin","status-publish","hentry","plugin_tags-dominant-colors","plugin_tags-images","plugin_tags-javascript","plugin_tags-lazy-loading","plugin_tags-pinterest","plugin_category-media","plugin_category-social-and-sharing","plugin_category-utilities-and-tools","plugin_contributors-manuelwieser","plugin_committers-manuelwieser"],"banners":{"banner":"https:\/\/ps.w.org\/dominant-colors-lazy-loading\/assets\/banner-772x250.jpg?rev=1387288","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/dominant-colors-lazy-loading_723f22.svg","icon_2x":false,"generated":true},"screenshots":[{"src":"https:\/\/ps.w.org\/dominant-colors-lazy-loading\/assets\/screenshot-1.png?rev=1453669","caption":""},{"src":"https:\/\/ps.w.org\/dominant-colors-lazy-loading\/assets\/screenshot-2.png?rev=1453669","caption":""},{"src":"https:\/\/ps.w.org\/dominant-colors-lazy-loading\/assets\/screenshot-3.png?rev=1453669","caption":""},{"src":"https:\/\/ps.w.org\/dominant-colors-lazy-loading\/assets\/screenshot-4.png?rev=1453669","caption":""}],"raw_content":"<!--section=description-->\n<p>This plugin allows you to lazy load your images while showing the dominant color of each image as a placeholder \u2013 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 <a href=\"https:\/\/manu.ninja\/dominant-colors-for-lazy-loading-images\">Dominant Colors for Lazy-Loading Images<\/a>, where I explain the general concept.<\/p>\n\n<p>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!<\/p>\n\n<h3>Features<\/h3>\n\n<ul>\n<li>The plugin calculates the dominant color of an image upon upload.<\/li>\n<li>All images attached to posts and pages are automatically replaced with placeholders and load as soon as they enter the viewport to save bandwidth.<\/li>\n<li>Galleries added via the default <code>[gallery]<\/code> shortcode are also replaced and loaded as soon as they appear in the viewport.<\/li>\n<li>A custom filter for lazy-loading thumbnails or featured images can be used in templates and themes (<code>apply_filters( 'dominant_colors', $image, $id )<\/code>).<\/li>\n<li>Dominant colors can be calculated for all existing attachments in the plugin settings.\n\n<ul>\n<li>This has already been tested with thousands of images.<\/li>\n<li>Until the calculation is done you can specify a fallback color for your placeholders.<\/li>\n<li>All files that can't be processed are listed during calculation and link to the particular attachment in the media library.<\/li>\n<\/ul><\/li>\n<li>You can choose between GIF and SVG placeholders.\n\n<ul>\n<li>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.<\/li>\n<li>GIF placeholders are small and have great browser compatibility. They also enable you to use tiny thumbnails as described on <a href=\"https:\/\/manu.ninja\/dominant-colors-for-lazy-loading-images\">manu.ninja<\/a> for your images.<\/li>\n<li>You can set the resolution of tiny thumbnails to 3\u00d73 pixels (120 bytes), 4\u00d74 pixels (128 bytes) or 5\u00d75 pixels (204 bytes).<\/li>\n<\/ul><\/li>\n<li>The plugin is compatible with <a href=\"https:\/\/co.wordpress.org\/plugins\/ricg-responsive-images\/\">RICG Responsive Images<\/a>, which has been added to WordPress 4.4 as default functionality.<\/li>\n<\/ul>\n\n<h3>Demo<\/h3>\n\n<p>You can see the plugin live at <a href=\"http:\/\/www.karriere.at\/blog\/\">http:\/\/www.karriere.at\/blog\/<\/a>.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload <code>dominant-colors-lazy-loading<\/code> folder to the <code>\/wp-content\/plugins\/<\/code> directory.<\/li>\n<li>Activate the plugin through the 'Plugins' menu in WordPress.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt>Why are no dominant colors and tiny thumbnails calculated?<\/dt>\n<dd><p>Please make sure that you have installed and activated the <code>imagick<\/code> PHP extension.<\/p><\/dd>\n<dt>How do I use the custom filter in my themes?<\/dt>\n<dd><p><code>$image = get_the_post_thumbnail( $post_id );\n$image = apply_filters( 'dominant_colors', $image, get_post_thumbnail_id ( $post_id ) );\necho $image;<\/code><\/p>\n\n<p>There is an optional third argument, you can use to specify the format. The available formats are stored as constants in the <code>Dominant_Colors_Lazy_Loading<\/code> class. If you do not specify a format the filter will use the format you have chosen in the plugin settings.<\/p>\n\n<ul>\n<li><code>FORMAT_GIF<\/code> will output GIF placeholders.<\/li>\n<li><code>FORMAT_SVG<\/code> will output SVG placeholders.<\/li>\n<li><p><code>FORMAT_WRAPPED<\/code> will output GIF placeholders with wrappers to preserve the aspect ratio of responsive images.<\/p>\n\n<p>`<\/p><\/li>\n<\/ul>\n\n<p>&lt;<\/p>\n\n<p>div class=\"dcll-wrapper\" style=\"padding-top: 56.25%;\"&gt;\n    &lt;img class=&quot;dcll-image&quot;...\n\n    ``<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h3>0.8.0<\/h3>\n\n<ul>\n<li>Added an option for <code>&lt;noscript&gt;<\/code> 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).<\/li>\n<\/ul>\n\n<h3>0.7.0<\/h3>\n\n<ul>\n<li>Added a fallback for images without <code>wp-image-*<\/code> classes. The plugin can now determine the attachment ID from the image URL, using <code>attachment_url_to_postid<\/code>. This should add support for plugins like WooCommerce, who don't output their images with <code>wp-image-*<\/code> classes. Thanks, <a href=\"https:\/\/github.com\/Lorti\/dominant-colors-lazy-loading-wordpress-plugin\/pull\/21\">@ecksite<\/a>!<\/li>\n<\/ul>\n\n<h3>0.6.3<\/h3>\n\n<ul>\n<li>The first user interaction triggers a viewport check, that means the first <code>keydown<\/code>, <code>mousedown<\/code>, <code>mousemove<\/code> or <code>touchstart<\/code> event. Each <code>scroll<\/code> and <code>resize<\/code> events still triggers a viewport check.<\/li>\n<\/ul>\n\n<h3>0.6.2<\/h3>\n\n<ul>\n<li>All filters are now disabled for Accelerated Mobile Pages when using Automattic's <a href=\"https:\/\/wordpress.org\/plugins\/amp\/\">AMP<\/a> plugin.<\/li>\n<\/ul>\n\n<h3>0.6.1<\/h3>\n\n<ul>\n<li>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.<\/li>\n<\/ul>\n\n<h3>0.6.0<\/h3>\n\n<ul>\n<li>Added all the functionality needed for tiny thumbnails, including tests. Looking forward to any issues that will inevitably occur ;)<\/li>\n<\/ul>\n\n<h3>0.5.7<\/h3>\n\n<ul>\n<li>Prior to this version wrappers created by the custom filter via <code>FORMAT_WRAPPED<\/code> were removed from the page after image load. This caused some page jumping, which is why they are now left untouched.<\/li>\n<\/ul>\n\n<h3>0.5.6<\/h3>\n\n<ul>\n<li>Added an optional argument for specifying the placeholder format the custom filter returns.<\/li>\n<li>Added a third format (only available via the custom filter) that automatically wraps responsive images so that the placeholder has the right aspect ratio.<\/li>\n<\/ul>\n\n<h3>0.5.5<\/h3>\n\n<ul>\n<li>All files that can't be processed are now listed during calculation and link to the particular attachment in the media library.<\/li>\n<\/ul>\n\n<h3>0.5.4<\/h3>\n\n<ul>\n<li>Calculation of missing colors should now be able to scale up to millions of images.<\/li>\n<li>Admin interface is now split into a tab for placeholder settings and a tab for calculation of missing colors.<\/li>\n<li>Replaced placeholders now trigger a viewport check, to see if relayout affected the position of any images.<\/li>\n<\/ul>\n\n<h3>0.5.3<\/h3>\n\n<ul>\n<li>Fixed a bug in displaying whether calculation of an image failed or succeeded.<\/li>\n<\/ul>\n\n<h3>0.5.2<\/h3>\n\n<ul>\n<li>Portuguese translation added by Pedro Mendon\u00e7a.<\/li>\n<li>Simple test suite for admin functions added.<\/li>\n<li>Changed all <code>[]<\/code> array literals to the classic <code>array()<\/code> for compatibility.<\/li>\n<\/ul>\n\n<h3>0.5.1<\/h3>\n\n<ul>\n<li>Admin interface now shows an error if no ImageMagick PHP extension was found.<\/li>\n<li>Admin interface is now ready for translation. There is a <code>.pot<\/code> file, go crazy ;)<\/li>\n<li>German translations for the admin interface added.<\/li>\n<\/ul>\n\n<h3>0.5.0<\/h3>\n\n<ul>\n<li>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.<\/li>\n<\/ul>\n\n<h3>0.4.0<\/h3>\n\n<ul>\n<li>Filter for lazy-loading images in custom templates and themes added.<\/li>\n<li>Added an option to specify a fallback color if no dominant color was found.<\/li>\n<\/ul>\n\n<h3>0.3.0<\/h3>\n\n<ul>\n<li>Added an option to use SVG placeholders as described by <a href=\"http:\/\/codepen.io\/shshaw\/post\/responsive-placeholder-image\">Shaw<\/a>. 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.<\/li>\n<li>Images with no dominant color stored in the database are now automatically skipped.<\/li>\n<\/ul>\n\n<h3>0.2.2<\/h3>\n\n<ul>\n<li>Fixed a bug where responsive images weren't revealed properly.<\/li>\n<\/ul>\n\n<h3>0.2<\/h3>\n\n<ul>\n<li>Galleries added via the default <code>[gallery]<\/code> shortcode are now also lazy loaded while showing the dominant color of each image as a placeholder.<\/li>\n<\/ul>\n\n<h3>0.1<\/h3>\n\n<ul>\n<li>Initial release -- plugin seems to work ;)<\/li>\n<\/ul>","raw_excerpt":"This plugin allows you to lazy load your images while showing the dominant color of each image as a placeholder \u2013 like Pinterest or Google Images.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/42980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=42980"}],"author":[{"embeddable":true,"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/manuelwieser"}],"wp:attachment":[{"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=42980"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=42980"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=42980"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=42980"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=42980"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/mlt.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=42980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}