Merge branch '1-9-0-ui'

Conflicts:
	README.txt

README.txt

@@ -2,8 +2,8 @@
 Contributors: stefanledin
 Tags: responsive images, picture, srcset, sizes, picture element, picture markup, picturefill, images, mobile, performance, responsive, retina, responsive background
 Requires at least: 3.8.1
-Tested up to: 4.3
-Stable tag: 1.8.0
+Tested up to: 4.3 beta 3
+Stable tag: 1.9.0
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -183,11 +183,17 @@ But you don't want to send a big 1440px image to a mobile device. This can easil
 == Screenshots ==
 
 1. Select which filters that RWP should be applied on. Thumbnails (post_thumbnail_html) and content (the_content) is used by default.You can also select which markup pattern RWP should generate.
-2. You can also select which image sizes RWP should use, select if RWP should use retina images, ignore image formats and if Picturefill should be used or not.
-3. You can also use the Picture::create( 'style' ) function to generate CSS and media queries for large background images.
-4. A <style> tag will be created and contains the generated media queries for the background.
+2. 
+3. You can easily override the default media queries for each image size. You can specify different settings for different scenarios.
+4. 
 
 == Changelog ==
+= 1.9.0 =
+* Introducing a brand new user interface for managing custom media queries for the images.
+* New filter: rwp_edit_generated_element. It allows you to make changes to the generated element before it's inserted into the content.
+* Tested with WordPress 4.3 beta 3.
+* Improvements under the hood.
+
 = 1.8.0 =
 * Picture::create() has been replaced by rwp_img(), rwp_picture(), rwp_span(), rwp_style() and rwp_attributes(). (Picture::create() will still work)
 * New filter: rwp_edit_attributes. It allows you to edit the attributes before they are applied to the generated element.
@@ -272,6 +278,9 @@ But you don't want to send a big 1440px image to a mobile device. This can easil
 * The content filter now works on PHP 5.3
 
 == Upgrade Notice ==
+= 1.9.0 =
+Introducing a brand new user interface for managing custom media queries for the images. New filter: rwp_edit_generated_element.
+
 = 1.8.0 =
 Picture::create() has been replaced with new functions. Upgraded Picturefill to 2.3.1. Bugfixes and improvements. 
 

admin/css/responsify-wp.css

@@ -41,6 +41,11 @@ tr.ui-sortable-handle.rwp-setting-row-open {
 	cursor: default;
 }
 
+tr.rwp-setting-row-open > td {
+	border-top: 2px solid #ccc;
+	border-bottom: 2px solid #ccc;
+}
+
 .option-message {
 	display: inline-block;
 	line-height: 19px;

includes/custom_media_queries.php

@@ -42,9 +42,8 @@ protected function check_rule_for_post( $post_object )
 		foreach ( $this->custom_media_queries as $media_query ) {
 			if ( $media_query['rule']['default'] == 'true' ) {
 				$this->apply_custom_media_queries( $media_query );
-				return;
+				continue;
 			}
-
 			$key = $media_query['rule']['when']['key'];
 			if ( $key == 'image' ) return;
 			$value = $media_query['rule']['when']['value'];
@@ -55,17 +54,15 @@ protected function check_rule_for_post( $post_object )
 			if ( call_user_func( array($this->rules, $rule_to_check), $post_object, $value ) ) {
 				$this->apply_custom_media_queries( $media_query );
 			}
-
 		}
 	}
 
 	protected function check_rule_for_image( $attributes )
 	{
 		foreach ( $this->custom_media_queries as $media_query ) {
-			if ( $media_query['rule']['default'] == 'true' ) {
-				$this->apply_custom_media_queries( $media_query );
-				return;
-			}
+			// Ignore default settings. It has already been set in check_rule_for_post()
+			if ( $media_query['rule']['default'] == 'true' ) continue;
+
 			$key = $media_query['rule']['when']['key'];
 			if ( $key != 'image' ) return;
 			$value = $media_query['rule']['when']['value'];

readme.md

@@ -142,8 +142,7 @@ if ( $query->have_posts() ) {
 ````
 
 ###<a name="settings-sizes-attribute"></a>Sizes attribute
-By default, ``<img>`` tags with ``sizes``/``srcset`` is the selected markup pattern. ``100vw`` is the default value of 
-the ``sizes`` attribute, but it's possible to specify your own. 
+By default, ``<img>`` tags with ``sizes``/``srcset`` is the selected markup pattern. You can override the calculated value of the ``sizes`` attribute by doing this:   
 ````php
 <?php
 $posts = get_posts(array(
@@ -282,9 +281,6 @@ the generated markup looks like:
 	sizes="(min-width: 300px) 1024px, (min-width: 150px) 300px, 150px">
 ````
 
-Notice that this is the first version of the retina feature, so if you comes across any bug or unexpected behavior, 
-please notify me at the [support forum](https://wordpress.org/support/plugin/responsify-wp) or here at Github.
-
 ###<a name="retina-setup"></a>Setup  
 If you want to use retina images, they has to be generated first. This requires you to manually add custom image sizes 
 using the [`add_image_size`](http://codex.wordpress.org/Function_Reference/add_image_size) function.  

responsify-wp.php

@@ -1,7 +1,7 @@
 <?php
 /*
 Plugin Name: Responsify WP
-Version: 1.8.0
+Version: 1.9.0
 Description: Responsify WP is the WordPress plugin that cares about responsive images.
 Author: Stefan Ledin
 Author URI: http://stefanledin.com
@@ -26,7 +26,7 @@
 
 class Responsify_WP
 {
-	const VERSION = '1.8.0';
+	const VERSION = '1.9.0';
 
 	protected static $instance = null;
 

tests/test-custom-media-queries.php

@@ -67,6 +67,58 @@ function test_when_rule_is_default()
 		$this->assertTrue( $custom_media_queries->should_be_applied_when('post', $wp_post_object) );
 	}
 
+	function test_default_is_ignored()
+	{
+		$custom_media_queries = array(
+			'cid' => array(
+				'rule' => array(
+	                'default' => 'true',
+	                'when' => array(
+                    	'key' => 'page_id'
+	                )
+				),
+				'smallestImage' => 'thumbnail',
+				'breakpoints' => array(
+					array( 'image_size' => 'medium', 'property' => 'min-width', 'value' => '500px' ),
+					array( 'image_size' => 'large', 'property' => 'min-width', 'value' => '900px' ),
+					array( 'image_size' => 'full', 'property' => 'min-width', 'value' => '1440px' )
+				)
+            ),
+            'cid2' => array(
+            	'rule' => array(
+            		'default' => 'false',
+            		'when' => array(
+            			'key' => 'page_slug',
+            			'value' => 'test',
+            			'compare' => 'equals'
+        			),
+        		),
+    			'smallestImage' => 'medium',
+    			'breakpoints' => array(
+    				array( 'image_size' => 'large', 'property' => 'min-width', 'value' => '1024px' ),
+					array( 'image_size' => 'full', 'property' => 'min-width', 'value' => '1337px' )
+				)
+        	)
+      	);
+      	$wp_post_object = (object) array(
+      		'ID' => 13,
+      		'post_name' => 'test',
+      		'post_title' => 'Test'
+  		);
+  		$expected = array(
+			'sizes' => array('medium', 'large', 'full'),
+			'media_queries' => array(
+				'large' => array( 'property' => 'min-width', 'value' => '1024px' ),
+				'full' => array( 'property' => 'min-width', 'value' => '1337px' )
+			)
+		);
+
+		$custom_media_queries = new Custom_Media_Queries( $custom_media_queries );
+
+		$this->assertTrue( $custom_media_queries->should_be_applied_when('post', $wp_post_object) );
+		$this->assertEquals( $expected, $custom_media_queries->get_settings() );
+	}
+
 	function test_when_media_queries_should_not_be_applied()
 	{
 		$custom_media_queries = array(
@@ -271,4 +323,72 @@ function test_when_image_size_is_medium()
 		$this->assertEquals($expected, $custom_media_queries->get_settings());
 	}
 
+	function test_default_settings_should_not_override_other_settings_when_checking_image()
+	{
+		$custom_media_queries = array(
+			'cid' => array(
+				'rule' => array(
+	                'default' => 'true',
+	                'when' => array(
+                    	'key' => 'page_slug',
+                    	'compare' => 'equals',
+                    	'value' => 'test'
+	                )
+				),
+				'smallestImage' => 'thumbnail',
+				'breakpoints' => array(
+					array( 'image_size' => 'medium', 'property' => 'min-width', 'value' => '300px' ),
+					array( 'image_size' => 'large', 'property' => 'min-width', 'value' => '1024px' ),
+					array( 'image_size' => 'full', 'property' => 'min-width', 'value' => '2048px' )
+				)
+            ),
+            'cid1' => array(
+				'rule' => array(
+	                'default' => 'false',
+	                'when' => array(
+                    	'key' => 'page_slug',
+                    	'compare' => 'equals',
+                    	'value' => 'test'
+	                )
+				),
+				'smallestImage' => 'thumbnail',
+				'breakpoints' => array(
+					array( 'image_size' => 'medium', 'property' => 'min-width', 'value' => '500px' ),
+					array( 'image_size' => 'large', 'property' => 'min-width', 'value' => '900px' ),
+					array( 'image_size' => 'full', 'property' => 'min-width', 'value' => '1440px' )
+				)
+            )
+      	);
+      	$wp_post_object = (object) array(
+      		'ID' => 13,
+      		'post_name' => 'test',
+      		'post_title' => 'Test'
+  		);
+  		$attributes = array(
+			'img' => array(
+				'class' => 'wp-image size-medium',
+				'alt' => 'Some image alt'
+			)
+		);
+
+		$custom_media_queries = new Custom_Media_Queries( $custom_media_queries );
+
+		$expected = array(
+			'sizes' => array('thumbnail', 'medium', 'large', 'full'),
+			'media_queries' => array(
+				'medium' => array( 'property' => 'min-width', 'value' => '500px' ),
+				'large' => array( 'property' => 'min-width', 'value' => '900px' ),
+				'full' => array( 'property' => 'min-width', 'value' => '1440px' )
+			)
+		);
+		if ( $custom_media_queries->should_be_applied_when('post', $wp_post_object) ) {
+			$settings = $custom_media_queries->get_settings();
+		}
+		if ( $custom_media_queries->should_be_applied_when('image', $attributes) ) {
+			$settings = $custom_media_queries->get_settings();
+		}
+
+		$this->assertEquals($expected, $settings);
+	}
+
 }