Avoid confusion between source sets and image sources.

README.md

@@ -31,47 +31,48 @@ function mytheme_add_image_sizes() {
 add_action( 'after_setup_theme', 'mytheme_add_image_sizes' );
 ```
 
-What if we took a similar approach to defining breakpoints and source sets?
+What if we took a similar approach to defining breakpoints and image sources?
 
 ### Defining Breakpoints
 
 ```php
 function mytheme_add_breakpoints() {
-    rad_add_breakpoint( 'large', '(min-width: 1000px)' );
-    rad_add_breakpoint( 'medium', '(min-width: 480px)' );
+    rad_add_breakpoint( 'mytheme_large', '(min-width: 1000px)' );
+    rad_add_breakpoint( 'mytheme_medium', '(min-width: 480px)' );
+    rad_add_breakpoint( 'mytheme_small', '(max-width: 479px)' );
 }
 add_action( 'after_setup_theme', 'mytheme_add_breakpoints' );
 ```
 
 A breakpoint consists of a name, and a media query that attribute.
 
-### Defining Source Sets
+### Defining Image Sources
 
 ```php
-function mytheme_add_source_sets() {
-    rad_add_source_set( 'source_size1', array(
-        'rad_large' => array(
+function mytheme_add_image_sources() {
+    rad_add_image_source( 'source_size1', array(
+        'mytheme_large' => array(
             'custom1_large_size',
         ),
-        'rad_medium' => array(
+        'mytheme_medium' => array(
             'custom1_medium_size',
         ),
-        'rad_small' => array(
+        'mytheme_small' => array(
             'custom1_small_size',
         ),
         'default' => array(
             'custom1_default_size',
         ),
     ) );
 }
-add_action( 'after_setup_theme', 'mytheme_add_breakpoints' );
+add_action( 'after_setup_theme', 'mytheme_add_image_sources' );
 ```
 
-A source set is a name and a multidimensional array. The key of each array
+An image source is a name and a multidimensional array. The key of each array
 index represents the breakpoint it belongs to, and the values in each array
 represent the registered image sizes that belong to that breakpoint.
 
-The source set name is a sort of pseudo image name. If you request markup using
-a source set as the image size, it will replace the markup with a `<picture>`
-tag properly populated with `<source>` tags. based on the registered
-breakpoints and image sizes.
+The image source name is a sort of pseudo image name. If you request markup
+using a source set as the image size, it will replace the markup with a
+`<picture>` tag properly populated with `<source>` tags. based on the
+registered breakpoints and image sizes.

functions-display.php

@@ -18,7 +18,7 @@
  * @return mixed
  */
 function rad_post_thumbnail_html( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
-	if ( ! rad_image_size_is_source_set( $size ) ) {
+	if ( ! rad_image_size_is_image_source( $size ) ) {
 		return $html;
 	}
 
@@ -35,11 +35,11 @@ function rad_post_thumbnail_html( $html, $post_id, $post_thumbnail_id, $size, $a
  * @return string Image HTML markup.
  */
 function rad_the_post_thumbnail_with_art_direction( $image_id, $source_size = '' ) {
-	global $source_sizes;
+	global $image_sources;
 
 	$html = '<picture>';
 
-	foreach ( $source_sizes[ $source_size ] as $breakpoint => $size ) {
+	foreach ( $image_sources[ $source_size ] as $breakpoint => $size ) {
 		$sources = array();
 		$breakpoint_info = rad_get_breakpoint( $breakpoint );
 

functions-image-sources.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * Image source functionality.
+ *
+ * @package Respect_Art_Direction
+ */
+
+/**
+ * Register a new image source.
+ *
+ * @param string $source_set_name Name of an image source.
+ * @param array  $image_sizes     List of image sizes for the sourcesource.
+ */
+function rad_add_image_source( $source_set_name, $image_sizes = array() ) {
+	global $image_sources;
+
+	$image_sources[ $source_set_name ] = $image_sizes;
+}
+
+/**
+ * Checks if an image size is a registered image source.
+ *
+ * @param string $image_size Image size name to check.
+ *
+ * @return bool Whether the image size is a source.
+ */
+function rad_image_size_is_image_source( $image_size ) {
+	global $image_sources;
+
+	return isset( $image_sources[ $image_size ] );
+}

respect-art-direction.php

@@ -12,13 +12,13 @@
  * @package     Respect_Art_Direction
  */
 
-include_once( 'functions-source-set.php' );
+include_once( 'functions-image-sources.php' );
 include_once( 'functions-breakpoints.php' );
 include_once( 'functions-display.php' );
 
-global $source_sizes, $breakpoints;
+global $image_sources, $breakpoints;
 
-$source_sizes = array();
+$image_sources = array();
 $breakpoints = array();
 
 /**
@@ -33,16 +33,18 @@ function rad_plugins_loaded() {
 	rad_add_breakpoint( 'rad_small', '(max-width: 619px)' );
 
 	/*
-	 * First source set.
+	 * First image source.
 	 */
-	rad_add_source_set( 'source_size1', array(
+	rad_add_image_source( 'source_size1', array(
 		'rad_large' => array(
 			'custom1_large_size',
 		),
 		'rad_medium' => array(
 			'custom1_medium_size',
+			'custom1_small_size'
 		),
 		'rad_small' => array(
+			'custom1_medium_size',
 			'custom1_small_size',
 		),
 		'default' => array(
@@ -51,9 +53,9 @@ function rad_plugins_loaded() {
 	) );
 
 	/*
-	 * Second source set.
+	 * Second image source.
 	 */
-	rad_add_source_set( 'source_size2', array(
+	rad_add_image_source( 'source_size2', array(
 		'rad_large' => array(
 			'custom2_large_size',
 		),
@@ -76,7 +78,7 @@ function rad_plugins_loaded() {
 function rad_after_setup_theme() {
 	add_image_size( 'custom1_large_size', 1200, 300, true );
 	add_image_size( 'custom1_medium_size', 600, 300, true );
-	add_image_size( 'custom1_small_size', 200, 200, true );
+	add_image_size( 'custom1_small_size', 300, 150, true );
 	add_image_size( 'custom1_default_size', 1200, 300, true );
 
 	add_image_size( 'custom2_large_size', 1600, 400, true );