diff --git a/core/core.libraries.yml b/core/core.libraries.yml index 525b6c1..769ac28 100644 --- a/core/core.libraries.yml +++ b/core/core.libraries.yml @@ -834,7 +834,7 @@ normalize: picturefill: remote: https://github.com/scottjehl/picturefill - version: 2.2.0 + version: 2.2.1 license: name: MIT url: https://github.com/scottjehl/picturefill/blob/2.2.0/LICENSE diff --git a/core/modules/responsive_image/config/schema/responsive_image.schema.yml b/core/modules/responsive_image/config/schema/responsive_image.schema.yml index c6a33c6..fb3b9a0 100644 --- a/core/modules/responsive_image/config/schema/responsive_image.schema.yml +++ b/core/modules/responsive_image/config/schema/responsive_image.schema.yml @@ -1,8 +1,8 @@ # Schema for the configuration files of the Responsive Image module. -responsive_image.mappings.*: +responsive_image.styles.*: type: config_entity - label: 'Responsive image mapping' + label: 'Responsive image style' mapping: id: type: string @@ -10,12 +10,12 @@ responsive_image.mappings.*: label: type: label label: 'Label' - mapping_definitions: + image_style_mappings: type: sequence - label: 'Mapping definitions' + label: 'Image style mappings' sequence: - type: mapping - label: 'Mapping definition' + label: 'Image style mapping' mapping: # Image mapping type. Either 'sizes' (using the 'sizes' attribute) # or 'image_style' (using a single image style to map to this @@ -58,9 +58,9 @@ field.formatter.settings.responsive_image: type: mapping label: 'Responsive image list format settings' mapping: - responsive_image_mapping: + responsive_image_style: type: string - label: 'Responsive image mapping' + label: 'Responsive image style' fallback_image_style: type: string label: 'Fallback image style' diff --git a/core/modules/responsive_image/responsive_image.info.yml b/core/modules/responsive_image/responsive_image.info.yml index dec6fee..00304ef 100644 --- a/core/modules/responsive_image/responsive_image.info.yml +++ b/core/modules/responsive_image/responsive_image.info.yml @@ -7,4 +7,4 @@ core: 8.x dependencies: - breakpoint - image -configure: entity.responsive_image_mapping.collection +configure: entity.responsive_image_style.collection diff --git a/core/modules/responsive_image/responsive_image.links.action.yml b/core/modules/responsive_image/responsive_image.links.action.yml index 6308cd1..349eea4 100644 --- a/core/modules/responsive_image/responsive_image.links.action.yml +++ b/core/modules/responsive_image/responsive_image.links.action.yml @@ -1,5 +1,5 @@ -responsive_image.mapping_page_add: - route_name: responsive_image.mapping_page_add - title: 'Add responsive image mapping' +responsive_image.style_page_add: + route_name: responsive_image.style_page_add + title: 'Add responsive image style' appears_on: - - entity.responsive_image_mapping.collection + - entity.responsive_image_style.collection diff --git a/core/modules/responsive_image/responsive_image.links.menu.yml b/core/modules/responsive_image/responsive_image.links.menu.yml index c72d4ee..e361e25 100644 --- a/core/modules/responsive_image/responsive_image.links.menu.yml +++ b/core/modules/responsive_image/responsive_image.links.menu.yml @@ -1,6 +1,6 @@ -entity.responsive_image_mapping.collection: - title: 'Responsive image mappings' - description: 'Manage responsive image mappings' +entity.responsive_image_style.collection: + title: 'Responsive image styles' + description: 'Manage responsive image styles' weight: 10 - route_name: entity.responsive_image_mapping.collection + route_name: entity.responsive_image_style.collection parent: system.admin_config_media diff --git a/core/modules/responsive_image/responsive_image.links.task.yml b/core/modules/responsive_image/responsive_image.links.task.yml index 602182e..d5e69d6 100644 --- a/core/modules/responsive_image/responsive_image.links.task.yml +++ b/core/modules/responsive_image/responsive_image.links.task.yml @@ -1,5 +1,5 @@ -entity.responsive_image_mapping.edit_form: +entity.responsive_image_style.edit_form: title: Edit - route_name: entity.responsive_image_mapping.edit_form - base_route: entity.responsive_image_mapping.edit_form + route_name: entity.responsive_image_style.edit_form + base_route: entity.responsive_image_style.edit_form weight: -10 diff --git a/core/modules/responsive_image/responsive_image.module b/core/modules/responsive_image/responsive_image.module index c383d4d..b4731f9 100644 --- a/core/modules/responsive_image/responsive_image.module +++ b/core/modules/responsive_image/responsive_image.module @@ -11,9 +11,10 @@ use \Drupal\Core\Template\Attribute; use Drupal\image\Entity\ImageStyle; use Drupal\Core\Url; -use Drupal\responsive_image\Entity\ResponsiveImageMapping; +use Drupal\responsive_image\Entity\ResponsiveImageStyle; use Drupal\Core\Image\ImageInterface; use Drupal\Component\Utility\String; +use Drupal\breakpoint\BreakpointInterface; /** * The machine name for the empty image breakpoint image style option. @@ -31,15 +32,15 @@ function responsive_image_help($route_name, RouteMatchInterface $route_match) { $output .= '

' . t('The Responsive Image module provides an image formatter and breakpoint mappings to output responsive images using the HTML5 picture tag. For more information, see the online documentation for the Responsive Image module.', array( '!responsive_image' => 'https://drupal.org/documentation/modules/responsive_image')) . '

'; $output .= '

' . t('Uses') . '

'; $output .= '
'; - $output .= '
' . t('Defining responsive image mappings') . '
'; - $output .= '
' . t('By creating responsive image mappings you define the image styles that are being used to output images at certain breakpoints. On the Responsive image mappings page, click Add responsive image mapping to create a new mapping. First chose a label and a breakpoint group and click Save. After that you can choose the image styles that will be used for each breakpoint. Image styles can be defined on the Image styles page that is provided by the Image module. Breakpoints are defined in the configuration files of the theme. See the help page of the Breakpoint module for more information.', array('!responsive_image_mapping' => \Drupal::url('entity.responsive_image_mapping.collection'), '!image_styles' => \Drupal::url('entity.image_style.collection'),'!image_help' => \Drupal::url('help.page', array('name' => 'image')), '!breakpoint_help' => \Drupal::url('help.page', array('name' => 'breakpoint')))) . '
'; - $output .= '
' . t('Using responsive image mappings in Image fields') . '
'; - $output .= '
' . t('After defining responsive image mappings, you can use them in the display settings for your Image fields, so that the site displays responsive images using the HTML5 picture tag. Open the Manage display page for the entity type (content type, taxonomy vocabulary, etc.) that the Image field is attached to. Choose the format Responsive image, click the Edit icon, and select one of the responsive image mappings that you have created. For general information on how to manage fields and their display see the Field UI module help page. For background information about entities and fields see the Field module help page.', array('!field_ui' => \Drupal::url('help.page', array('name' => 'field_ui')),'!field_help' => \Drupal::url('help.page', array('name' => 'field')))) . '
'; + $output .= '
' . t('Defining responsive image styles') . '
'; + $output .= '
' . t('By creating responsive image styles you define the image styles that are being used to output images at certain breakpoints. On the Responsive image styles page, click Add responsive image style to create a new style. First chose a label and a breakpoint group and click Save. After that you can choose the image styles that will be used for each breakpoint. Image styles can be defined on the Image styles page that is provided by the Image module. Breakpoints are defined in the configuration files of the theme. See the help page of the Breakpoint module for more information.', array('!responsive_image_style' => \Drupal::url('entity.responsive_image_style.collection'), '!image_styles' => \Drupal::url('entity.image_style.collection'),'!image_help' => \Drupal::url('help.page', array('name' => 'image')), '!breakpoint_help' => \Drupal::url('help.page', array('name' => 'breakpoint')))) . '
'; + $output .= '
' . t('Using responsive image styles in Image fields') . '
'; + $output .= '
' . t('After defining responsive image styles, you can use them in the display settings for your Image fields, so that the site displays responsive images using the HTML5 picture tag. Open the Manage display page for the entity type (content type, taxonomy vocabulary, etc.) that the Image field is attached to. Choose the format Responsive image, click the Edit icon, and select one of the responsive image styles that you have created. For general information on how to manage fields and their display see the Field UI module help page. For background information about entities and fields see the Field module help page.', array('!field_ui' => \Drupal::url('help.page', array('name' => 'field_ui')),'!field_help' => \Drupal::url('help.page', array('name' => 'field')))) . '
'; $output .= '
'; break; - case 'entity.responsive_image_mapping.collection': - $output .= '

' . t('A responsive image mapping associates an image style with each breakpoint defined by your theme.') . '

'; + case 'entity.responsive_image_style.collection': + $output .= '

' . t('A responsive image style associates an image style with each breakpoint defined by your theme.') . '

'; break; } @@ -52,19 +53,19 @@ function responsive_image_help($route_name, RouteMatchInterface $route_match) { function responsive_image_menu() { $items = array(); - $items['admin/config/media/responsive-image-mapping'] = array( - 'title' => 'Responsive image mappings', - 'description' => 'Manage responsive image mappings', + $items['admin/config/media/responsive-image-style'] = array( + 'title' => 'Responsive image styles', + 'description' => 'Manage responsive image styles', 'weight' => 10, - 'route_name' => 'entity.responsive_image_mapping.collection', + 'route_name' => 'entity.responsive_image_style.collection', ); - $items['admin/config/media/responsive-image-mapping/%responsive_image_mapping'] = array( - 'title' => 'Edit responsive image mapping', - 'route_name' => 'entity.responsive_image_mapping.edit_form', + $items['admin/config/media/responsive-image-style/%responsive_image_style'] = array( + 'title' => 'Edit responsive image style', + 'route_name' => 'entity.responsive_image_style.edit_form', ); - $items['admin/config/media/responsive-image-mapping/%responsive_image_mapping/duplicate'] = array( - 'title' => 'Duplicate responsive image mapping', - 'route_name' => 'entity.responsive_image_mapping.duplicate_form', + $items['admin/config/media/responsive-image-style/%responsive_image_style/duplicate'] = array( + 'title' => 'Duplicate responsive image style', + 'route_name' => 'entity.responsive_image_style.duplicate_form', ); return $items; @@ -84,7 +85,7 @@ function responsive_image_theme() { 'alt' => '', 'title' => NULL, 'attributes' => array(), - 'mapping_id' => array(), + 'responsive_image_style_id' => array(), ), ), 'responsive_image_formatter' => array( @@ -92,7 +93,7 @@ function responsive_image_theme() { 'item' => NULL, 'url' => NULL, 'image_style' => NULL, - 'mapping_id' => array(), + 'responsive_image_style_id' => array(), ), 'function' => 'theme_responsive_image_formatter', ), @@ -106,14 +107,14 @@ function responsive_image_theme() { * An associative array containing: * - item: An ImageItem object. * - image_style: An optional image style. - * - mapping_id: The ID of the responsive image mapping. + * - responsive_image_style_id: The ID of the responsive image style. * - url: An optional \Drupal\Core\Url object. * * @ingroup themeable */ function theme_responsive_image_formatter($variables) { $item = $variables['item']; - if (!isset($variables['mapping_id']) || empty($variables['mapping_id'])) { + if (!isset($variables['responsive_image_style_id']) || empty($variables['responsive_image_style_id'])) { $image_formatter = array( '#theme' => 'image_formatter', '#item' => $item, @@ -128,7 +129,7 @@ function theme_responsive_image_formatter($variables) { '#width' => $item->width, '#height' => $item->height, '#style_name' => $variables['image_style'], - '#mapping_id' => $variables['mapping_id'], + '#responsive_image_style_id' => $variables['responsive_image_style_id'], ); if (isset($item->uri)) { $responsive_image['#uri'] = $item->uri; @@ -164,7 +165,7 @@ function theme_responsive_image_formatter($variables) { * popular browsers. * - attributes: Associative array of attributes to be placed in the img tag. * - style_name: The name of the style to be used as a fallback image. - * - mapping_id: The ID of the responsive image mapping. + * - responsive_image_style_id: The ID of the responsive image style. * * @ingroup themeable */ @@ -182,7 +183,14 @@ function template_preprocess_responsive_image(&$variables) { } $image = \Drupal::service('image.factory')->get($variables['uri']); - $variables['sources'] = responsive_image_build_source_attributes($image, $variables); + $responsive_image_style = ResponsiveImageStyle::load($variables['responsive_image_style_id']); + // All breakpoints and multipliers. + $breakpoints = \Drupal::service('breakpoint.manager')->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup()); + foreach ($responsive_image_style->getKeyedImageStyleMappings() as $breakpoint_id => $multipliers) { + if (isset($breakpoints[$breakpoint_id])) { + $variables['sources'][] = responsive_image_build_source_attributes($image, $variables, $breakpoints[$breakpoint_id], $multipliers); + } + } // Prepare the fallback image. Use srcset in the fallback image to avoid // unnecessary preloading of images in older browsers. See // http://scottjehl.github.io/picturefill/#using-picture and @@ -210,24 +218,24 @@ function template_preprocess_responsive_image(&$variables) { * tag. In other words, this function provides the attributes for each * tag in a tag. * - * In a responsive image mapping, each breakpoint has a mapping definition for - * each of its multipliers. A mapping definition can be either of two types: + * In a responsive image style, each breakpoint has an image style mapping for + * each of its multipliers. An image style mapping can be either of two types: * 'sizes' (meaning it will output a tag with the 'sizes' attribute) or * 'image_style' (meaning it will output a tag based on the selected - * image style for this breakpoint and multiplier). A responsive image mapping - * can contain mapping definitions of mixed types (both 'image_style' and + * image style for this breakpoint and multiplier). A responsive image style + * can contain image style mappings of mixed types (both 'image_style' and * 'sizes'). For example: * @code - * $responsive_img_mapping = ResponsiveImageMapping::create(array( - * 'id' => 'mapping_one', - * 'label' => 'Mapping One', + * $responsive_img_style = ResponsiveImageStyle::create(array( + * 'id' => 'style_one', + * 'label' => 'Style One', * 'breakpoint_group' => 'responsive_image_test_module', * )); - * $responsive_img_mapping->addMappingDefinition('responsive_image_test_module.mobile', '1x', array( + * $responsive_img_style->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array( * 'image_mapping_type' => 'image_style', * 'image_mapping' => 'thumbnail', * )) - * ->addMappingDefinition('responsive_image_test_module.narrow', '1x', array( + * ->addImageStyleMapping('responsive_image_test_module.narrow', '1x', array( * 'image_mapping_type' => 'sizes', * 'image_mapping' => array( * 'sizes' => '(min-width: 700px) 700px, 100vw', @@ -239,7 +247,7 @@ function template_preprocess_responsive_image(&$variables) { * )) * ->save(); * @endcode - * The above responsive image mapping will result in a tag like this: + * The above responsive image style will result in a tag like this: * @code * * @@ -281,8 +289,8 @@ function template_preprocess_responsive_image(&$variables) { * need to be the same in order to set the 'mime-type' attribute but not all * MIME types within the tag need to be the same. * - * For mappings of the type 'sizes', a width descriptor is added to each source. - * For example: + * For image style mappings of the type 'sizes', a width descriptor is added to + * each source. For example: * @code * * @endcode @@ -310,9 +318,10 @@ function template_preprocess_responsive_image(&$variables) { * @endcode * to support the 'sizes' attribute. * - * In theory people could add a mapping for the same breakpoint (but different - * multiplier) so the array contains an entry for breakpointA.1x and - * breakpointA.2x. If we would output those we will end up with something like + * In theory people could add an image style mapping for the same breakpoint + * (but different multiplier) so the array contains an entry for breakpointA.1x + * and breakpointA.2x. If we would output those we will end up with something + * like * @code * * @endcode @@ -328,74 +337,71 @@ function template_preprocess_responsive_image(&$variables) { * The image to build the tags for. * @param array $variables * An array with the following keys: - * - mapping_id: The \Drupal\responsive_image\Entity\ResponsiveImageMapping + * - responsive_image_style_id: The \Drupal\responsive_image\Entity\ResponsiveImageStyle * ID. * - width: The width of the image (if known). * - height: The height of the image (if known). + * @param \Drupal\breakpoint\BreakpointInterface $breakpoint + * The breakpoint for this source tag. + * @param array $multipliers + * An array with multipliers as keys and image style mappings as values. + * + * @return \Drupal\Core\Template\Attribute[] + * An array of attributes for the source tag. */ -function responsive_image_build_source_attributes(ImageInterface $image, $variables) { - $sources = array(); +function responsive_image_build_source_attributes(ImageInterface $image, array $variables, BreakpointInterface $breakpoint, array $multipliers) { $width = isset($variables['width']) && !empty($variables['width']) ? $variables['width'] : $image->getWidth(); $height = isset($variables['height']) && !empty($variables['height']) ? $variables['height'] : $image->getHeight(); $extension = pathinfo($image->getSource(), PATHINFO_EXTENSION); - $responsive_image_mapping = ResponsiveImageMapping::load($variables['mapping_id']); - // All breakpoints and multipliers. - $breakpoints = \Drupal::service('breakpoint.manager')->getBreakpointsByGroup($responsive_image_mapping->getBreakpointGroup()); - foreach ($responsive_image_mapping->getKeyedMappingDefinitions() as $breakpoint_id => $multipliers) { - if (isset($breakpoints[$breakpoint_id])) { - $breakpoint = $breakpoints[$breakpoint_id]; - $sizes = array(); - $srcset = array(); - $derivative_mime_types = array(); - foreach ($multipliers as $multiplier => $mapping_definition) { - switch ($mapping_definition['image_mapping_type']) { - // Create a tag with the 'sizes' attribute. - case 'sizes': - // Loop through the image styles for this breakpoint and multiplier. - foreach ($mapping_definition['image_mapping']['sizes_image_styles'] as $image_style_name) { - // Get the dimensions. - $dimensions = responsive_image_get_image_dimensions($image_style_name, array('width' => $width, 'height' => $height)); - // Get MIME type. - $derivative_mime_type = responsive_image_get_mime_type($image_style_name, $extension); - $derivative_mime_types[] = $derivative_mime_type; - - // Add the image source with its width descriptor. When a width - // descriptor is used in a srcset, we can't add a multiplier to - // it. Because of this, the image styles for all multipliers of - // this breakpoint should be merged into one srcset and the sizes - // attribute should be merged as well. - if (is_null($dimensions['width'])) { - throw new \LogicException(String::format('Could not determine image width for @file using image style with ID: @image_style_name. This image style can not be used for a responsive image mapping definition using the \'sizes\' attribute.', array('@file' => $image->getSource(), '@image_style_name' => $image_style_name))); - } - $srcset[floatval($dimensions['width'])] = file_create_url(_responsive_image_image_style_url($image_style_name, $image->getSource())) . ' ' . $dimensions['width'] . 'w'; - $sizes = array_merge(explode(',', $mapping_definition['image_mapping']['sizes']), $sizes); - } - break; + $sizes = array(); + $srcset = array(); + $derivative_mime_types = array(); + foreach ($multipliers as $multiplier => $image_style_mapping) { + switch ($image_style_mapping['image_mapping_type']) { + // Create a tag with the 'sizes' attribute. + case 'sizes': + // Loop through the image styles for this breakpoint and multiplier. + foreach ($image_style_mapping['image_mapping']['sizes_image_styles'] as $image_style_name) { + // Get the dimensions. + $dimensions = responsive_image_get_image_dimensions($image_style_name, array('width' => $width, 'height' => $height)); + // Get MIME type. + $derivative_mime_type = responsive_image_get_mime_type($image_style_name, $extension); + $derivative_mime_types[] = $derivative_mime_type; - case 'image_style': - // Get MIME type. - $derivative_mime_type = responsive_image_get_mime_type($mapping_definition['image_mapping'], $extension); - $derivative_mime_types[] = $derivative_mime_type; - // Add the image source with its multiplier. - $srcset[floatval(Unicode::substr($multiplier, 0, -1))] = file_create_url(_responsive_image_image_style_url($mapping_definition['image_mapping'], $image->getSource())) . ' ' . $multiplier; - break; + // Add the image source with its width descriptor. When a width + // descriptor is used in a srcset, we can't add a multiplier to + // it. Because of this, the image styles for all multipliers of + // this breakpoint should be merged into one srcset and the sizes + // attribute should be merged as well. + if (is_null($dimensions['width'])) { + throw new \LogicException(String::format('Could not determine image width for @file using image style with ID: @image_style_name. This image style can not be used for a responsive image style mapping using the \'sizes\' attribute.', array('@file' => $image->getSource(), '@image_style_name' => $image_style_name))); + } + $srcset[floatval($dimensions['width'])] = file_create_url(_responsive_image_image_style_url($image_style_name, $image->getSource())) . ' ' . $dimensions['width'] . 'w'; + $sizes = array_merge(explode(',', $image_style_mapping['image_mapping']['sizes']), $sizes); } - } - ksort($srcset); - $source_attributes = new \Drupal\Core\Template\Attribute(array( - 'srcset' => implode(', ', array_unique($srcset)), - 'media' => $breakpoint->getMediaQuery(), - )); - if (count(array_unique($derivative_mime_types)) == 1) { - $source_attributes->setAttribute('type', $derivative_mime_types[0]); - } - if (!empty($sizes)) { - $source_attributes->setAttribute('sizes', implode(',', array_unique($sizes))); - } - $sources[] = $source_attributes; + break; + + case 'image_style': + // Get MIME type. + $derivative_mime_type = responsive_image_get_mime_type($image_style_mapping['image_mapping'], $extension); + $derivative_mime_types[] = $derivative_mime_type; + // Add the image source with its multiplier. + $srcset[floatval(Unicode::substr($multiplier, 0, -1))] = file_create_url(_responsive_image_image_style_url($image_style_mapping['image_mapping'], $image->getSource())) . ' ' . $multiplier; + break; } } - return $sources; + ksort($srcset); + $source_attributes = new \Drupal\Core\Template\Attribute(array( + 'srcset' => implode(', ', array_unique($srcset)), + 'media' => $breakpoint->getMediaQuery(), + )); + if (count(array_unique($derivative_mime_types)) == 1) { + $source_attributes->setAttribute('type', $derivative_mime_types[0]); + } + if (!empty($sizes)) { + $source_attributes->setAttribute('sizes', implode(',', array_unique($sizes))); + } + return $source_attributes; } /** diff --git a/core/modules/responsive_image/responsive_image.routing.yml b/core/modules/responsive_image/responsive_image.routing.yml index 0ea9e75..6a00ff6 100644 --- a/core/modules/responsive_image/responsive_image.routing.yml +++ b/core/modules/responsive_image/responsive_image.routing.yml @@ -1,39 +1,39 @@ -entity.responsive_image_mapping.collection: - path: '/admin/config/media/responsive-image-mapping' +entity.responsive_image_style.collection: + path: '/admin/config/media/responsive-image-style' defaults: - _entity_list: 'responsive_image_mapping' - _title: 'Responsive image mappings' + _entity_list: 'responsive_image_style' + _title: 'Responsive image styles' requirements: _permission: 'administer responsive images' -responsive_image.mapping_page_add: - path: '/admin/config/media/responsive-image-mapping/add' +responsive_image.style_page_add: + path: '/admin/config/media/responsive-image-style/add' defaults: - _entity_form: 'responsive_image_mapping.add' - _title: 'Add responsive image mapping' + _entity_form: 'responsive_image_style.add' + _title: 'Add responsive image style' requirements: _permission: 'administer responsive images' -entity.responsive_image_mapping.edit_form: - path: '/admin/config/media/responsive-image-mapping/{responsive_image_mapping}' +entity.responsive_image_style.edit_form: + path: '/admin/config/media/responsive-image-style/{responsive_image_style}' defaults: - _entity_form: 'responsive_image_mapping.edit' - _title: 'Edit responsive image mapping' + _entity_form: 'responsive_image_style.edit' + _title: 'Edit responsive image style' requirements: _permission: 'administer responsive images' -entity.responsive_image_mapping.duplicate_form: - path: '/admin/config/media/responsive-image-mapping/{responsive_image_mapping}/duplicate' +entity.responsive_image_style.duplicate_form: + path: '/admin/config/media/responsive-image-style/{responsive_image_style}/duplicate' defaults: - _entity_form: 'responsive_image_mapping.duplicate' - _title: 'Duplicate responsive image mapping' + _entity_form: 'responsive_image_style.duplicate' + _title: 'Duplicate responsive image style' requirements: _permission: 'administer responsive images' -entity.responsive_image_mapping.delete_form: - path: '/admin/config/media/responsive-image-mapping/{responsive_image_mapping}/delete' +entity.responsive_image_style.delete_form: + path: '/admin/config/media/responsive-image-style/{responsive_image_style}/delete' defaults: - _entity_form: 'responsive_image_mapping.delete' + _entity_form: 'responsive_image_style.delete' _title: 'Delete' requirements: _permission: 'administer responsive images' diff --git a/core/modules/responsive_image/src/Entity/ResponsiveImageMapping.php b/core/modules/responsive_image/src/Entity/ResponsiveImageStyle.php similarity index 48% rename from core/modules/responsive_image/src/Entity/ResponsiveImageMapping.php rename to core/modules/responsive_image/src/Entity/ResponsiveImageStyle.php index 0e9dc14..aee5a70 100644 --- a/core/modules/responsive_image/src/Entity/ResponsiveImageMapping.php +++ b/core/modules/responsive_image/src/Entity/ResponsiveImageStyle.php @@ -2,45 +2,45 @@ /** * @file - * Contains \Drupal\responsive_image\Entity\ResponsiveImageMapping. + * Contains \Drupal\responsive_image\Entity\ResponsiveImageStyle. */ namespace Drupal\responsive_image\Entity; use Drupal\Core\Config\Entity\ConfigEntityBase; -use Drupal\responsive_image\ResponsiveImageMappingInterface; +use Drupal\responsive_image\ResponsiveImageStyleInterface; /** - * Defines the responsive image mapping entity. + * Defines the responsive image style entity. * * @ConfigEntityType( - * id = "responsive_image_mapping", - * label = @Translation("Responsive image mapping"), + * id = "responsive_image_style", + * label = @Translation("Responsive image style"), * handlers = { - * "list_builder" = "Drupal\responsive_image\ResponsiveImageMappingListBuilder", + * "list_builder" = "Drupal\responsive_image\ResponsiveImageStyleListBuilder", * "form" = { - * "edit" = "Drupal\responsive_image\ResponsiveImageMappingForm", - * "add" = "Drupal\responsive_image\ResponsiveImageMappingForm", + * "edit" = "Drupal\responsive_image\ResponsiveImageStyleForm", + * "add" = "Drupal\responsive_image\ResponsiveImageStyleForm", * "delete" = "Drupal\Core\Entity\EntityDeleteForm", - * "duplicate" = "Drupal\responsive_image\ResponsiveImageMappingForm" + * "duplicate" = "Drupal\responsive_image\ResponsiveImageStyleForm" * } * }, - * list_path = "admin/config/media/responsive-image-mapping", + * list_path = "admin/config/media/responsive-image-style", * admin_permission = "administer responsive images", - * config_prefix = "mappings", + * config_prefix = "styles", * entity_keys = { * "id" = "id", * "label" = "label" * }, * links = { - * "edit-form" = "/admin/config/media/responsive-image-mapping/{responsive_image_mapping}", - * "duplicate-form" = "/admin/config/media/responsive-image-mapping/{responsive_image_mapping}/duplicate", - * "delete-form" = "/admin/config/media/responsive-image-mapping/{responsive_image_mapping}/delete", - * "collection" = "/admin/config/media/responsive-image-mapping", + * "edit-form" = "/admin/config/media/responsive-image-style/{responsive_image_style}", + * "duplicate-form" = "/admin/config/media/responsive-image-style/{responsive_image_style}/duplicate", + * "delete-form" = "/admin/config/media/responsive-image-style/{responsive_image_style}/delete", + * "collection" = "/admin/config/media/responsive-image-style", * } * ) */ -class ResponsiveImageMapping extends ConfigEntityBase implements ResponsiveImageMappingInterface { +class ResponsiveImageStyle extends ConfigEntityBase implements ResponsiveImageStyleInterface { /** * The responsive image ID (machine name). @@ -57,29 +57,28 @@ class ResponsiveImageMapping extends ConfigEntityBase implements ResponsiveImage protected $label; /** - * The responsive image mapping definitions. + * The image style mappings. * - * Each mapping definition array contains the following keys: + * Each image style mapping array contains the following keys: * - image_mapping_type: Either 'image_style' or 'sizes'. * - image_mapping: * - If image_mapping_type is 'image_style', the image style ID (a * string). * - If image_mapping_type is 'sizes', an array with following keys: - * - sizes: If image_mapping_type is 'sizes', the value for the 'sizes' - * attribute. + * - sizes: The value for the 'sizes' attribute. * - sizes_image_styles: The image styles to use for the 'srcset' * attribute. - * - breakpoint_id: The breakpoint ID for this mapping definition. - * - multiplier: The multiplier for this mapping definition. + * - breakpoint_id: The breakpoint ID for this image style mapping. + * - multiplier: The multiplier for this image style mapping. * * @var array */ - protected $mapping_definitions = array(); + protected $image_style_mappings = array(); /** * @var array */ - protected $keyedMappingDefinitions; + protected $keyedImageStyleMappings; /** * The responsive image breakpoint group. @@ -91,72 +90,72 @@ class ResponsiveImageMapping extends ConfigEntityBase implements ResponsiveImage /** * {@inheritdoc} */ - public function __construct(array $values, $entity_type_id = 'responsive_image_mapping') { + public function __construct(array $values, $entity_type_id = 'responsive_image_style') { parent::__construct($values, $entity_type_id); } /** * {@inheritdoc} */ - public function addMappingDefinition($breakpoint_id, $multiplier, array $mapping_definition) { + public function addImageStyleMapping($breakpoint_id, $multiplier, array $image_style_mapping) { // If there is an existing mapping, overwrite it. - foreach ($this->mapping_definitions as &$mapping) { + foreach ($this->image_style_mappings as &$mapping) { if ($mapping['breakpoint_id'] === $breakpoint_id && $mapping['multiplier'] === $multiplier) { $mapping = array( 'breakpoint_id' => $breakpoint_id, 'multiplier' => $multiplier, - ) + $mapping_definition; + ) + $image_style_mapping; return $this; } } - $this->mapping_definitions[] = array( + $this->image_style_mappings[] = array( 'breakpoint_id' => $breakpoint_id, 'multiplier' => $multiplier, - ) + $mapping_definition; - $this->keyedMappingDefinitions = NULL; + ) + $image_style_mapping; + $this->keyedImageStyleMappings = NULL; return $this; } /** * {@inheritdoc} */ - public function hasMappingDefinitions() { - $mappings = $this->getKeyedMappingDefinitions(); + public function hasImageStyleMappings() { + $mappings = $this->getKeyedImageStyleMappings(); return !empty($mappings); } /** * {@inheritdoc} */ - public function getKeyedMappingDefinitions() { - if (!$this->keyedMappingDefinitions) { - $this->keyedMappingDefinitions = array(); - foreach($this->mapping_definitions as $mapping) { - if (!$this->isEmptyMappingDefinition($mapping)) { - $this->keyedMappingDefinitions[$mapping['breakpoint_id']][$mapping['multiplier']] = $mapping; + public function getKeyedImageStyleMappings() { + if (!$this->keyedImageStyleMappings) { + $this->keyedImageStyleMappings = array(); + foreach($this->image_style_mappings as $mapping) { + if (!static::isEmptyImageStyleMapping($mapping)) { + $this->keyedImageStyleMappings[$mapping['breakpoint_id']][$mapping['multiplier']] = $mapping; } } } - return $this->keyedMappingDefinitions; + return $this->keyedImageStyleMappings; } /** * {@inheritdoc} */ - public function getMappingDefinitions() { - return $this->get('mapping_definitions'); + public function getImageStyleMappings() { + return $this->image_style_mappings; } /** * {@inheritdoc} */ public function setBreakpointGroup($breakpoint_group) { - // If the breakpoint group is changed then the mapping definitions are + // If the breakpoint group is changed then the image style mappings are // invalid. if ($breakpoint_group !== $this->breakpoint_group) { - $this->removeMappingDefinitions(); + $this->removeImageStyleMappings(); } - $this->set('breakpoint_group', $breakpoint_group); + $this->breakpoint_group = $breakpoint_group; return $this; } @@ -164,15 +163,15 @@ public function setBreakpointGroup($breakpoint_group) { * {@inheritdoc} */ public function getBreakpointGroup() { - return $this->get('breakpoint_group'); + return $this->breakpoint_group; } /** * {@inheritdoc} */ - public function removeMappingDefinitions() { - $this->mapping_definitions = array(); - $this->keyedMappingDefinitions = NULL; + public function removeImageStyleMappings() { + $this->image_style_mappings = array(); + $this->keyedImageStyleMappings = NULL; return $this; } @@ -191,19 +190,19 @@ public function calculateDependencies() { /** * {@inheritdoc} */ - public static function isEmptyMappingDefinition(array $mapping_definition) { - if (!empty($mapping_definition)) { - switch ($mapping_definition['image_mapping_type']) { + public static function isEmptyImageStyleMapping(array $image_style_mapping) { + if (!empty($image_style_mapping)) { + switch ($image_style_mapping['image_mapping_type']) { case 'sizes': - // The mapping definition must have a sizes attribute defined and one + // The image style mapping must have a sizes attribute defined and one // or more image styles selected. - if ($mapping_definition['image_mapping']['sizes'] && $mapping_definition['image_mapping']['sizes_image_styles']) { + if ($image_style_mapping['image_mapping']['sizes'] && $image_style_mapping['image_mapping']['sizes_image_styles']) { return FALSE; } break; case 'image_style': - // The mapping definition must have an image style selected. - if ($mapping_definition['image_mapping']) { + // The image style mapping must have an image style selected. + if ($image_style_mapping['image_mapping']) { return FALSE; } break; @@ -215,8 +214,8 @@ public static function isEmptyMappingDefinition(array $mapping_definition) { /** * {@inheritdoc} */ - public function getMappingDefinition($breakpoint_id, $multiplier) { - $map = $this->getKeyedMappingDefinitions(); + public function getImageStyleMapping($breakpoint_id, $multiplier) { + $map = $this->getKeyedImageStyleMappings(); if (isset($map[$breakpoint_id][$multiplier])) { return $map[$breakpoint_id][$multiplier]; } diff --git a/core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveImageFormatter.php b/core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveImageFormatter.php index d491614..0cf8d8a 100644 --- a/core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveImageFormatter.php +++ b/core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveImageFormatter.php @@ -16,7 +16,7 @@ use Drupal\Core\Url; use Drupal\image\Plugin\Field\FieldFormatter\ImageFormatterBase; use Symfony\Component\DependencyInjection\ContainerInterface; -use Drupal\responsive_image\Entity\ResponsiveImageMapping; +use Drupal\responsive_image\Entity\ResponsiveImageStyle; use Drupal\image\Entity\ImageStyle; /** @@ -35,7 +35,7 @@ class ResponsiveImageFormatter extends ImageFormatterBase implements ContainerFa /** * @var EntityStorageInterface */ - protected $responsiveImageMappingStorage; + protected $responsiveImageStyleStorage; /** * Constructs a ResponsiveImageFormatter object. @@ -54,13 +54,13 @@ class ResponsiveImageFormatter extends ImageFormatterBase implements ContainerFa * The view mode. * @param array $third_party_settings * Any third party settings. - * @param \Drupal\Core\Entity\EntityStorageInterface $responsive_image_mapping_storage - * The responsive image mapping storage. + * @param \Drupal\Core\Entity\EntityStorageInterface $responsive_image_style_storage + * The responsive image style storage. */ - public function __construct($plugin_id, $plugin_definition, FieldDefinitionInterface $field_definition, array $settings, $label, $view_mode, array $third_party_settings, EntityStorageInterface $responsive_image_mapping_storage) { + public function __construct($plugin_id, $plugin_definition, FieldDefinitionInterface $field_definition, array $settings, $label, $view_mode, array $third_party_settings, EntityStorageInterface $responsive_image_style_storage) { parent::__construct($plugin_id, $plugin_definition, $field_definition, $settings, $label, $view_mode, $third_party_settings); - $this->responsiveImageMappingStorage = $responsive_image_mapping_storage; + $this->responsiveImageStyleStorage = $responsive_image_style_storage; } /** @@ -75,7 +75,7 @@ public static function create(ContainerInterface $container, array $configuratio $configuration['label'], $configuration['view_mode'], $configuration['third_party_settings'], - $container->get('entity.manager')->getStorage('responsive_image_mapping') + $container->get('entity.manager')->getStorage('responsive_image_style') ); } @@ -84,7 +84,7 @@ public static function create(ContainerInterface $container, array $configuratio */ public static function defaultSettings() { return array( - 'responsive_image_mapping' => '', + 'responsive_image_style' => '', 'fallback_image_style' => '', 'image_link' => '', ) + parent::defaultSettings(); @@ -95,19 +95,19 @@ public static function defaultSettings() { */ public function settingsForm(array $form, FormStateInterface $form_state) { $responsive_image_options = array(); - $responsive_image_mappings = $this->responsiveImageMappingStorage->loadMultiple(); - if ($responsive_image_mappings && !empty($responsive_image_mappings)) { - foreach ($responsive_image_mappings as $machine_name => $responsive_image_mapping) { - if ($responsive_image_mapping->hasMappingDefinitions()) { - $responsive_image_options[$machine_name] = $responsive_image_mapping->label(); + $responsive_image_styles = $this->responsiveImageStyleStorage->loadMultiple(); + if ($responsive_image_styles && !empty($responsive_image_styles)) { + foreach ($responsive_image_styles as $machine_name => $responsive_image_style) { + if ($responsive_image_style->hasImageStyleMappings()) { + $responsive_image_options[$machine_name] = $responsive_image_style->label(); } } } - $elements['responsive_image_mapping'] = array( - '#title' => t('Responsive image mapping'), + $elements['responsive_image_style'] = array( + '#title' => t('Responsive image style'), '#type' => 'select', - '#default_value' => $this->getSetting('responsive_image_mapping'), + '#default_value' => $this->getSetting('responsive_image_style'), '#required' => TRUE, '#options' => $responsive_image_options, ); @@ -142,9 +142,9 @@ public function settingsForm(array $form, FormStateInterface $form_state) { public function settingsSummary() { $summary = array(); - $responsive_image_mapping = $this->responsiveImageMappingStorage->load($this->getSetting('responsive_image_mapping')); - if ($responsive_image_mapping) { - $summary[] = t('Responsive image mapping: @responsive_image_mapping', array('@responsive_image_mapping' => $responsive_image_mapping->label())); + $responsive_image_style = $this->responsiveImageStyleStorage->load($this->getSetting('responsive_image_style')); + if ($responsive_image_style) { + $summary[] = t('Responsive image style: @responsive_image_style', array('@responsive_image_style' => $responsive_image_style->label())); $image_styles = image_style_options(FALSE); unset($image_styles['']); @@ -165,7 +165,7 @@ public function settingsSummary() { } } else { - $summary[] = t('Select a responsive image mapping.'); + $summary[] = t('Select a responsive image style.'); } return $summary; @@ -193,23 +193,23 @@ public function viewElements(FieldItemListInterface $items) { } // Collect cache tags to be added for each item in the field. - $responsive_image_mapping = $this->responsiveImageMappingStorage->load($this->getSetting('responsive_image_mapping')); + $responsive_image_style = $this->responsiveImageStyleStorage->load($this->getSetting('responsive_image_style')); $image_styles_to_load = array(); $cache_tags = []; - if ($responsive_image_mapping) { - $cache_tags = Cache::mergeTags($cache_tags, $responsive_image_mapping->getCacheTags()); - foreach ($responsive_image_mapping->getMappingDefinitions() as $mapping) { + if ($responsive_image_style) { + $cache_tags = Cache::mergeTags($cache_tags, $responsive_image_style->getCacheTags()); + foreach ($responsive_image_style->getImageStyleMappings() as $image_style_mapping) { // Only image styles of non-empty mappings should be loaded. - if (!$responsive_image_mapping::isEmptyMappingDefinition($mapping)) { + if (!$responsive_image_style::isEmptyImageStyleMapping($image_style_mapping)) { - if ($mapping['image_mapping_type'] == 'image_style') { + if ($image_style_mapping['image_mapping_type'] == 'image_style') { // This mapping has one image style, add it. - $image_styles_to_load[] = $mapping['image_mapping']; + $image_styles_to_load[] = $image_style_mapping['image_mapping']; } else { // This mapping has multiple image styles, merge them. - $mapping['image_mapping']['sizes_image_styles'] = array_filter($mapping['image_mapping']['sizes_image_styles']); - $image_styles_to_load = array_merge($image_styles_to_load, $mapping['image_mapping']['sizes_image_styles']); + $image_style_mapping['image_mapping']['sizes_image_styles'] = array_filter($image_style_mapping['image_mapping']['sizes_image_styles']); + $image_styles_to_load = array_merge($image_styles_to_load, $image_style_mapping['image_mapping']['sizes_image_styles']); } } } @@ -242,15 +242,15 @@ public function viewElements(FieldItemListInterface $items) { '#attached' => array( 'library' => array( 'core/picturefill', - ) + ), ), '#item' => $item, '#image_style' => $fallback_image_style, - '#mapping_id' => $responsive_image_mapping ? $responsive_image_mapping->id() : '', + '#responsive_image_style_id' => $responsive_image_style ? $responsive_image_style->id() : '', '#url' => $url, '#cache' => array( 'tags' => $cache_tags, - ) + ), ); } diff --git a/core/modules/responsive_image/src/ResponsiveImageMappingForm.php b/core/modules/responsive_image/src/ResponsiveImageStyleForm.php similarity index 60% rename from core/modules/responsive_image/src/ResponsiveImageMappingForm.php rename to core/modules/responsive_image/src/ResponsiveImageStyleForm.php index c668953..365f7a5 100644 --- a/core/modules/responsive_image/src/ResponsiveImageMappingForm.php +++ b/core/modules/responsive_image/src/ResponsiveImageStyleForm.php @@ -2,7 +2,7 @@ /** * @file - * Contains Drupal\responsive_image\ResponsiveImageForm. + * Contains Drupal\responsive_image\ResponsiveImageStyleForm. */ namespace Drupal\responsive_image; @@ -15,7 +15,7 @@ /** * Form controller for the responsive image edit/add forms. */ -class ResponsiveImageMappingForm extends EntityForm { +class ResponsiveImageStyleForm extends EntityForm { /** * The breakpoint manager. @@ -34,7 +34,7 @@ public static function create(ContainerInterface $container) { } /** - * Constructs the responsive image mapping form. + * Constructs the responsive image style form. * * @param \Drupal\breakpoint\BreakpointManagerInterface $breakpoint_manager * The breakpoint manager. @@ -56,35 +56,35 @@ public function __construct(BreakpointManagerInterface $breakpoint_manager) { */ public function form(array $form, FormStateInterface $form_state) { if ($this->operation == 'duplicate') { - $form['#title'] = $this->t('Duplicate responsive image mapping @label', array('@label' => $this->entity->label())); + $form['#title'] = $this->t('Duplicate responsive image style @label', array('@label' => $this->entity->label())); $this->entity = $this->entity->createDuplicate(); } if ($this->operation == 'edit') { - $form['#title'] = $this->t('Edit responsive image mapping @label', array('@label' => $this->entity->label())); + $form['#title'] = $this->t('Edit responsive image style @label', array('@label' => $this->entity->label())); } - /** @var \Drupal\responsive_image\ResponsiveImageMappingInterface $responsive_image_mapping */ - $responsive_image_mapping = $this->entity; + /** @var \Drupal\responsive_image\ResponsiveImageStyleInterface $responsive_image_style */ + $responsive_image_style = $this->entity; $form['label'] = array( '#type' => 'textfield', '#title' => $this->t('Label'), '#maxlength' => 255, - '#default_value' => $responsive_image_mapping->label(), + '#default_value' => $responsive_image_style->label(), '#description' => $this->t("Example: 'Hero image' or 'Author image'."), '#required' => TRUE, ); $form['id'] = array( '#type' => 'machine_name', - '#default_value' => $responsive_image_mapping->id(), + '#default_value' => $responsive_image_style->id(), '#machine_name' => array( - 'exists' => '\Drupal\responsive_image\Entity\ResponsiveImageMapping::load', + 'exists' => '\Drupal\responsive_image\Entity\ResponsiveImageStyle::load', 'source' => array('label'), ), - '#disabled' => (bool) $responsive_image_mapping->id() && $this->operation != 'duplicate', + '#disabled' => (bool) $responsive_image_style->id() && $this->operation != 'duplicate', ); - if ((bool) $responsive_image_mapping->id() && $this->operation != 'duplicate') { - $description = $this->t('Select a breakpoint group from the installed themes.') . ' ' . $this->t("Warning: if you change the breakpoint group you lose all your selected mappings."); + if ((bool) $responsive_image_style->id() && $this->operation != 'duplicate') { + $description = $this->t('Select a breakpoint group from the installed themes.') . ' ' . $this->t("Warning: if you change the breakpoint group you lose all your selected image style mappings."); } else { $description = $this->t('Select a breakpoint group from the installed themes.'); @@ -92,7 +92,7 @@ public function form(array $form, FormStateInterface $form_state) { $form['breakpoint_group'] = array( '#type' => 'select', '#title' => $this->t('Breakpoint group'), - '#default_value' => $responsive_image_mapping->getBreakpointGroup(), + '#default_value' => $responsive_image_style->getBreakpointGroup(), '#options' => $this->breakpointManager->getGroups(), '#required' => TRUE, '#description' => $description, @@ -100,26 +100,26 @@ public function form(array $form, FormStateInterface $form_state) { $image_styles = image_style_options(TRUE); $image_styles[RESPONSIVE_IMAGE_EMPTY_IMAGE] = $this->t('- empty image -'); - $breakpoints = $this->breakpointManager->getBreakpointsByGroup($responsive_image_mapping->getBreakpointGroup()); + $breakpoints = $this->breakpointManager->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup()); foreach ($breakpoints as $breakpoint_id => $breakpoint) { foreach ($breakpoint->getMultipliers() as $multiplier) { $label = $multiplier . ' ' . $breakpoint->getLabel() . ' [' . $breakpoint->getMediaQuery() . ']'; - $form['keyed_mappings'][$breakpoint_id][$multiplier] = array( + $form['keyed_styles'][$breakpoint_id][$multiplier] = array( '#type' => 'container', ); - $mapping_definition = $responsive_image_mapping->getMappingDefinition($breakpoint_id, $multiplier); + $image_style_mapping = $responsive_image_style->getImageStyleMapping($breakpoint_id, $multiplier); // @todo The image_mapping_type is only temporarily hardcoded, until // support for the other responsive image mapping type ('sizes') is // added in https://www.drupal.org/node/2334387. - $form['keyed_mappings'][$breakpoint_id][$multiplier]['image_mapping_type'] = array( + $form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping_type'] = array( '#type' => 'value', '#value' => 'image_style', ); - $form['keyed_mappings'][$breakpoint_id][$multiplier]['image_mapping'] = array( + $form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping'] = array( '#type' => 'select', '#title' => $label, '#options' => $image_styles, - '#default_value' => isset($mapping_definition['image_mapping']) ? $mapping_definition['image_mapping'] : array(), + '#default_value' => isset($image_style_mapping['image_mapping']) ? $image_style_mapping['image_mapping'] : array(), '#description' => $this->t('Select an image style for this breakpoint.'), ); } @@ -127,7 +127,7 @@ public function form(array $form, FormStateInterface $form_state) { $form['#tree'] = TRUE; - return parent::form($form, $form_state, $responsive_image_mapping); + return parent::form($form, $form_state, $responsive_image_style); } /** @@ -135,11 +135,11 @@ public function form(array $form, FormStateInterface $form_state) { */ public function validate(array $form, FormStateInterface $form_state) { // Only validate on edit. - if ($form_state->hasValue('keyed_mappings')) { + if ($form_state->hasValue('keyed_styles')) { // Check if another breakpoint group is selected. if ($form_state->getValue('breakpoint_group') != $form_state->getCompleteForm()['breakpoint_group']['#default_value']) { - // Remove the mappings since the breakpoint ID has changed. - $form_state->unsetValue('keyed_mappings'); + // Remove the image style mappings since the breakpoint ID has changed. + $form_state->unsetValue('keyed_styles'); } // @todo Filter 'sizes_image_styles' to a normal array in // https://www.drupal.org/node/2334387. For an example see @@ -151,28 +151,28 @@ public function validate(array $form, FormStateInterface $form_state) { * {@inheritdoc} */ public function save(array $form, FormStateInterface $form_state) { - /** @var \Drupal\responsive_image\ResponsiveImageMappingInterface $responsive_image_mapping */ - $responsive_image_mapping = $this->entity; + /** @var \Drupal\responsive_image\ResponsiveImageStyleInterface $responsive_image_style */ + $responsive_image_style = $this->entity; // Remove all the existing mappings and replace with submitted values. - $responsive_image_mapping->removeMappingDefinitions(); - if ($form_state->hasValue('keyed_mappings')) { - foreach ($form_state->getValue('keyed_mappings') as $breakpoint_id => $multipliers) { - foreach ($multipliers as $multiplier => $mapping) { - $responsive_image_mapping->addMappingDefinition($breakpoint_id, $multiplier, $mapping); + $responsive_image_style->removeImageStyleMappings(); + if ($form_state->hasValue('keyed_styles')) { + foreach ($form_state->getValue('keyed_styles') as $breakpoint_id => $multipliers) { + foreach ($multipliers as $multiplier => $image_style_mapping) { + $responsive_image_style->addImageStyleMapping($breakpoint_id, $multiplier, $image_style_mapping); } } } - $responsive_image_mapping->save(); + $responsive_image_style->save(); - $this->logger('responsive_image')->notice('Responsive image mapping @label saved.', array('@label' => $responsive_image_mapping->label())); - drupal_set_message($this->t('Responsive image mapping %label saved.', array('%label' => $responsive_image_mapping->label()))); + $this->logger('responsive_image')->notice('Responsive image style @label saved.', array('@label' => $responsive_image_style->label())); + drupal_set_message($this->t('Responsive image style %label saved.', array('%label' => $responsive_image_style->label()))); - // Redirect to edit form after creating a new mapping or after selecting - // another breakpoint group. - if (!$responsive_image_mapping->hasMappingDefinitions()) { + // Redirect to edit form after creating a new responsive image style or + // after selecting another breakpoint group. + if (!$responsive_image_style->hasImageStyleMappings()) { $form_state->setRedirect( - 'entity.responsive_image_mapping.edit_form', - array('responsive_image_mapping' => $responsive_image_mapping->id()) + 'entity.responsive_image_style.edit_form', + array('responsive_image_style' => $responsive_image_style->id()) ); } else { diff --git a/core/modules/responsive_image/src/ResponsiveImageMappingInterface.php b/core/modules/responsive_image/src/ResponsiveImageStyleInterface.php similarity index 49% rename from core/modules/responsive_image/src/ResponsiveImageMappingInterface.php rename to core/modules/responsive_image/src/ResponsiveImageStyleInterface.php index dd6aa54..feb3639 100644 --- a/core/modules/responsive_image/src/ResponsiveImageMappingInterface.php +++ b/core/modules/responsive_image/src/ResponsiveImageStyleInterface.php @@ -2,7 +2,7 @@ /** * @file - * Contains \Drupal\responsive_image\ResponsiveImageMappingInterface. + * Contains \Drupal\responsive_image\ResponsiveImageStyleInterface. */ namespace Drupal\responsive_image; @@ -12,60 +12,59 @@ /** * Provides an interface defining a responsive_image mapping entity. */ -interface ResponsiveImageMappingInterface extends ConfigEntityInterface { +interface ResponsiveImageStyleInterface extends ConfigEntityInterface { /** * Checks if there is at least one mapping defined. * - * return bool - * Whether the entity has any responsive image mappings. + * @return bool + * Whether the entity has any image style mappings. */ - public function hasMappingDefinitions(); + public function hasImageStyleMappings(); /** * Returns the mappings of breakpoint ID and multiplier to image style. * * @return array[] - * The responsive image mappings. Keyed by breakpoint ID then multiplier. - * The value is the mapping definition array with following keys: + * The image style mappings. Keyed by breakpoint ID then multiplier. + * The value is the image style mapping array with following keys: * - image_mapping_type: Either 'image_style' or 'sizes'. * - image_mapping: * - If image_mapping_type is 'image_style', the image style ID. * - If image_mapping_type is 'sizes', an array with following keys: - * - sizes: If image_mapping_type is 'sizes', the value for the - * 'sizes' attribute. + * - sizes: The value for the 'sizes' attribute. * - sizes_image_styles: The image styles to use for the 'srcset' * attribute. * - breakpoint_id: The breakpoint ID for this mapping. * - multiplier: The multiplier for this mapping. */ - public function getKeyedMappingDefinitions(); + public function getKeyedImageStyleMappings(); /** - * Returns the mappings for the responsive image mapping. + * Returns the image style mappings for the responsive image style. * * @return array[] - * An array responsive image mappings. Each responsive mapping array + * An array of image style mappings. Each image style mapping array * contains the following keys: * - breakpoint_id * - multiplier * - image_mapping_type * - image_mapping */ - public function getMappingDefinitions(); + public function getImageStyleMappings(); /** - * Sets the breakpoint group for the responsive_image mapping. + * Sets the breakpoint group for the responsive image style. * * @param string $breakpoint_group - * The responsive image mapping breakpoint group. + * The responsive image style breakpoint group. * * @return $this */ public function setBreakpointGroup($breakpoint_group); /** - * Returns the breakpoint group for the responsive image mapping. + * Returns the breakpoint group for the responsive image style. * * @return string * The breakpoint group. @@ -73,7 +72,7 @@ public function setBreakpointGroup($breakpoint_group); public function getBreakpointGroup(); /** - * Gets the mapping definition for a breakpoint ID and multiplier. + * Gets the image style mapping for a breakpoint ID and multiplier. * * @param string $breakpoint_id * The breakpoint ID. @@ -81,51 +80,50 @@ public function getBreakpointGroup(); * The multiplier. * * @return array|null - * The mapping definition. NULL if the mapping does not exist. - * The mapping definition has following keys: + * The image style mapping. NULL if the mapping does not exist. + * The image style mapping has following keys: * - image_mapping_type: Either 'image_style' or 'sizes'. * - image_mapping: * - If image_mapping_type is 'image_style', the image style ID. * - If image_mapping_type is 'sizes', an array with following keys: - * - sizes: If image_mapping_type is 'sizes', the value for the - * 'sizes' attribute. + * - sizes: The value for the 'sizes' attribute. * - sizes_image_styles: The image styles to use for the 'srcset' * attribute. - * - breakpoint_id: The breakpoint ID for this mapping definition. - * - multiplier: The multiplier for this mapping definition. + * - breakpoint_id: The breakpoint ID for this image style mapping. + * - multiplier: The multiplier for this image style mapping. */ - public function getMappingDefinition($breakpoint_id, $multiplier); + public function getImageStyleMapping($breakpoint_id, $multiplier); /** - * Checks if there is at least one mapping definition defined. + * Checks if there is at least one image style mapping defined. * - * @param array $mapping_definition - * The mapping definition. + * @param array $image_style_mapping + * The image style mapping. * * @return bool - * Whether the mapping definition is empty. + * Whether the image style mapping is empty. */ - public static function isEmptyMappingDefinition(array $mapping_definition); + public static function isEmptyImageStyleMapping(array $image_style_mapping); /** - * Adds a mapping to the responsive image configuration entity. + * Adds a image style mapping to the responsive image configuration entity. * * @param string $breakpoint_id * The breakpoint ID. * @param string $multiplier * The multiplier. - * @param array $mapping_definition - * The mapping definition. + * @param array $image_style_mapping + * The mapping image style mapping. * * @return $this */ - public function addMappingDefinition($breakpoint_id, $multiplier, array $mapping_definition); + public function addImageStyleMapping($breakpoint_id, $multiplier, array $image_style_mapping); /** - * Removes all mappings from the responsive image configuration entity. + * Removes all image style mappings from the responsive image style. * * @return $this */ - public function removeMappingDefinitions(); + public function removeImageStyleMappings(); } diff --git a/core/modules/responsive_image/src/ResponsiveImageMappingListBuilder.php b/core/modules/responsive_image/src/ResponsiveImageStyleListBuilder.php similarity index 82% rename from core/modules/responsive_image/src/ResponsiveImageMappingListBuilder.php rename to core/modules/responsive_image/src/ResponsiveImageStyleListBuilder.php index 6032b7c..744edc3 100644 --- a/core/modules/responsive_image/src/ResponsiveImageMappingListBuilder.php +++ b/core/modules/responsive_image/src/ResponsiveImageStyleListBuilder.php @@ -2,7 +2,7 @@ /** * @file - * Contains Drupal\responsive_image\ResponsiveImageMappingListBuilder. + * Contains Drupal\responsive_image\ResponsiveImageStyleListBuilder. */ namespace Drupal\responsive_image; @@ -11,9 +11,9 @@ use Drupal\Core\Entity\EntityInterface; /** - * Provides a listing of responsive image mappings. + * Provides a listing of responsive image styles. */ -class ResponsiveImageMappingListBuilder extends ConfigEntityListBuilder { +class ResponsiveImageStyleListBuilder extends ConfigEntityListBuilder { /** * {@inheritdoc} diff --git a/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php b/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php index 38cee5d..044a85c 100644 --- a/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php +++ b/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php @@ -38,32 +38,32 @@ protected function setUp() { * Test responsive image administration functionality. */ public function testResponsiveImageAdmin() { - // We start without any default mappings. - $this->drupalGet('admin/config/media/responsive-image-mapping'); - $this->assertText('There is no Responsive image mapping yet.'); + // We start without any default styles. + $this->drupalGet('admin/config/media/responsive-image-style'); + $this->assertText('There is no Responsive image style yet.'); - // Add a new responsive image mapping, our breakpoint set should be selected. - $this->drupalGet('admin/config/media/responsive-image-mapping/add'); + // Add a new responsive image style, our breakpoint set should be selected. + $this->drupalGet('admin/config/media/responsive-image-style/add'); $this->assertFieldByName('breakpoint_group', 'responsive_image_test_module'); // Create a new group. $edit = array( - 'label' => 'Mapping One', - 'id' => 'mapping_one', + 'label' => 'Style One', + 'id' => 'style_one', 'breakpoint_group' => 'responsive_image_test_module', ); - $this->drupalPostForm('admin/config/media/responsive-image-mapping/add', $edit, t('Save')); + $this->drupalPostForm('admin/config/media/responsive-image-style/add', $edit, t('Save')); // Check if the new group is created. $this->assertResponse(200); - $this->drupalGet('admin/config/media/responsive-image-mapping'); - $this->assertNoText('There is no Responsive image mapping yet.'); - $this->assertText('Mapping One'); - $this->assertText('mapping_one'); + $this->drupalGet('admin/config/media/responsive-image-style'); + $this->assertNoText('There is no Responsive image style yet.'); + $this->assertText('Style One'); + $this->assertText('style_one'); // Edit the group. - $this->drupalGet('admin/config/media/responsive-image-mapping/mapping_one'); - $this->assertFieldByName('label', 'Mapping One'); + $this->drupalGet('admin/config/media/responsive-image-style/style_one'); + $this->assertFieldByName('label', 'Style One'); $this->assertFieldByName('breakpoint_group', 'responsive_image_test_module'); $cases = array( @@ -77,37 +77,37 @@ public function testResponsiveImageAdmin() { foreach ($cases as $case) { // Check if the radio buttons are present. - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_mapping]', ''); + $this->assertFieldByName('keyed_styles[responsive_image_test_module.' . $case[0] . '][' . $case[1] . '][image_mapping]', ''); } - // Save mappings for 1x variant only. + // Save styles for 1x variant only. $edit = array( - 'label' => 'Mapping One', + 'label' => 'Style One', 'breakpoint_group' => 'responsive_image_test_module', - 'keyed_mappings[responsive_image_test_module.mobile][1x][image_mapping]' => 'thumbnail', - 'keyed_mappings[responsive_image_test_module.narrow][1x][image_mapping]' => 'medium', - 'keyed_mappings[responsive_image_test_module.wide][1x][image_mapping]' => 'large', + 'keyed_styles[responsive_image_test_module.mobile][1x][image_mapping]' => 'thumbnail', + 'keyed_styles[responsive_image_test_module.narrow][1x][image_mapping]' => 'medium', + 'keyed_styles[responsive_image_test_module.wide][1x][image_mapping]' => 'large', ); - $this->drupalPostForm('admin/config/media/responsive-image-mapping/mapping_one', $edit, t('Save')); - $this->drupalGet('admin/config/media/responsive-image-mapping/mapping_one'); + $this->drupalPostForm('admin/config/media/responsive-image-style/style_one', $edit, t('Save')); + $this->drupalGet('admin/config/media/responsive-image-style/style_one'); - // Check the mapping for multipliers 1x and 2x for the mobile breakpoint. - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.mobile][1x][image_mapping]', 'thumbnail'); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.mobile][2x][image_mapping]', ''); + // Check the style for multipliers 1x and 2x for the mobile breakpoint. + $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][1x][image_mapping]', 'thumbnail'); + $this->assertFieldByName('keyed_styles[responsive_image_test_module.mobile][2x][image_mapping]', ''); - // Check the mapping for multipliers 1x and 2x for the narrow breakpoint. - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][1x][image_mapping]', 'medium'); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.narrow][2x][image_mapping]', ''); + // Check the style for multipliers 1x and 2x for the narrow breakpoint. + $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][1x][image_mapping]', 'medium'); + $this->assertFieldByName('keyed_styles[responsive_image_test_module.narrow][2x][image_mapping]', ''); - // Check the mapping for multipliers 1x and 2x for the wide breakpoint. - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.wide][1x][image_mapping]', 'large'); - $this->assertFieldByName('keyed_mappings[responsive_image_test_module.wide][2x][image_mapping]', ''); + // Check the style for multipliers 1x and 2x for the wide breakpoint. + $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][1x][image_mapping]', 'large'); + $this->assertFieldByName('keyed_styles[responsive_image_test_module.wide][2x][image_mapping]', ''); - // Delete the mapping. - $this->drupalGet('admin/config/media/responsive-image-mapping/mapping_one/delete'); + // Delete the style. + $this->drupalGet('admin/config/media/responsive-image-style/style_one/delete'); $this->drupalPostForm(NULL, array(), t('Delete')); - $this->drupalGet('admin/config/media/responsive-image-mapping'); - $this->assertText('There is no Responsive image mapping yet.'); + $this->drupalGet('admin/config/media/responsive-image-style'); + $this->assertText('There is no Responsive image style yet.'); } } diff --git a/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php b/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php index cf7eba3..c59c7ee 100644 --- a/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php +++ b/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php @@ -23,11 +23,11 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase { protected $dumpHeaders = TRUE; /** - * Responsive image mapping entity instance we test with. + * Responsive image style entity instance we test with. * - * @var \Drupal\responsive_image\Entity\ResponsiveImageMapping + * @var \Drupal\responsive_image\Entity\ResponsiveImageStyle */ - protected $responsiveImgMapping; + protected $responsiveImgStyle; /** * Modules to enable. @@ -57,10 +57,10 @@ protected function setUp() { 'administer image styles' )); $this->drupalLogin($this->adminUser); - // Add responsive image mapping. - $this->responsiveImgMapping = entity_create('responsive_image_mapping', array( - 'id' => 'mapping_one', - 'label' => 'Mapping One', + // Add responsive image style. + $this->responsiveImgStyle = entity_create('responsive_image_style', array( + 'id' => 'style_one', + 'label' => 'Style One', 'breakpoint_group' => 'responsive_image_test_module', )); } @@ -69,7 +69,7 @@ protected function setUp() { * Tests responsive image formatters on node display for public files. */ public function testResponsiveImageFieldFormattersPublic() { - $this->addTestMappings(); + $this->addTestImageStyleMappings(); $this->doTestResponsiveImageFieldFormatters('public'); } @@ -77,7 +77,7 @@ public function testResponsiveImageFieldFormattersPublic() { * Tests responsive image formatters on node display for private files. */ public function testResponsiveImageFieldFormattersPrivate() { - $this->addTestMappings(); + $this->addTestImageStyleMappings(); // Remove access content permission from anonymous users. user_role_change_permissions(DRUPAL_ANONYMOUS_RID, array('access content' => FALSE)); $this->doTestResponsiveImageFieldFormatters('private'); @@ -87,45 +87,45 @@ public function testResponsiveImageFieldFormattersPrivate() { * Test responsive image formatters when image style is empty. */ public function testResponsiveImageFieldFormattersEmptyStyle() { - $this->addTestMappings(TRUE); + $this->addTestImageStyleMappings(TRUE); $this->doTestResponsiveImageFieldFormatters('public', TRUE); } /** - * Add mappings to the responsive image mapping entity. + * Add image style mappings to the responsive image style entity. * * @param bool $empty_styles - * If true, the mappings will get empty image styles. + * If true, the image style mappings will get empty image styles. */ - protected function addTestMappings($empty_styles = FALSE) { + protected function addTestImageStyleMappings($empty_styles = FALSE) { if ($empty_styles) { - $this->responsiveImgMapping - ->addMappingDefinition('responsive_image_test_module.mobile', '1x', array( + $this->responsiveImgStyle + ->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => '', )) - ->addMappingDefinition('responsive_image_test_module.narrow', '1x', array( + ->addImageStyleMapping('responsive_image_test_module.narrow', '1x', array( 'image_mapping_type' => 'sizes', 'image_mapping' => array( 'sizes' => '(min-width: 700px) 700px, 100vw', 'sizes_image_styles' => array(), ), )) - ->addMappingDefinition('responsive_image_test_module.wide', '1x', array( + ->addImageStyleMapping('responsive_image_test_module.wide', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => '', )) ->save(); } else { - $this->responsiveImgMapping + $this->responsiveImgStyle // Test the output of an empty image. - ->addMappingDefinition('responsive_image_test_module.mobile', '1x', array( + ->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => RESPONSIVE_IMAGE_EMPTY_IMAGE, )) // Test the output of the 'sizes' attribute. - ->addMappingDefinition('responsive_image_test_module.narrow', '1x', array( + ->addImageStyleMapping('responsive_image_test_module.narrow', '1x', array( 'image_mapping_type' => 'sizes', 'image_mapping' => array( 'sizes' => '(min-width: 700px) 700px, 100vw', @@ -136,7 +136,7 @@ protected function addTestMappings($empty_styles = FALSE) { ), )) // Test the normal output of mapping to an image style. - ->addMappingDefinition('responsive_image_test_module.wide', '1x', array( + ->addImageStyleMapping('responsive_image_test_module.wide', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'large', )) @@ -216,8 +216,8 @@ protected function doTestResponsiveImageFieldFormatters($scheme, $empty_styles = $this->drupalLogin($this->adminUser); } - // Use the responsive image formatter with a responsive image mapping. - $display_options['settings']['responsive_image_mapping'] = 'mapping_one'; + // Use the responsive image formatter with a responsive image style. + $display_options['settings']['responsive_image_style'] = 'style_one'; $display_options['settings']['image_link'] = ''; // Also set the fallback image style. $display_options['settings']['fallback_image_style'] = 'large'; @@ -248,7 +248,7 @@ protected function doTestResponsiveImageFieldFormatters($scheme, $empty_styles = } $this->assertRaw('/styles/large/'); $cache_tags = explode(' ', $this->drupalGetHeader('X-Drupal-Cache-Tags')); - $this->assertTrue(in_array('config:responsive_image.mappings.mapping_one', $cache_tags)); + $this->assertTrue(in_array('config:responsive_image.styles.style_one', $cache_tags)); if (!$empty_styles) { $this->assertTrue(in_array('config:image.style.medium', $cache_tags)); $this->assertRaw('type="image/png"'); @@ -282,7 +282,7 @@ protected function doTestResponsiveImageFieldFormatters($scheme, $empty_styles = * Tests responsive image formatters on node display linked to the file. */ public function testResponsiveImageFieldFormattersLinkToFile() { - $this->addTestMappings(); + $this->addTestImageStyleMappings(); $this->assertResponsiveImageFieldFormattersLink('file'); } @@ -290,7 +290,7 @@ public function testResponsiveImageFieldFormattersLinkToFile() { * Tests responsive image formatters on node display linked to the node. */ public function testResponsiveImageFieldFormattersLinkToNode() { - $this->addTestMappings(); + $this->addTestImageStyleMappings(); $this->assertResponsiveImageFieldFormattersLink('content'); } @@ -311,7 +311,7 @@ private function assertResponsiveImageFieldFormattersLink($link_type) { 'type' => 'responsive_image', 'settings' => array( 'image_link' => $link_type, - 'responsive_image_mapping' => 'mapping_one', + 'responsive_image_style' => 'style_one', 'fallback_image_style' => 'large', ), ); diff --git a/core/modules/responsive_image/src/Tests/ResponsiveImageFieldUiTest.php b/core/modules/responsive_image/src/Tests/ResponsiveImageFieldUiTest.php index 76ef6b6..fa088f6 100644 --- a/core/modules/responsive_image/src/Tests/ResponsiveImageFieldUiTest.php +++ b/core/modules/responsive_image/src/Tests/ResponsiveImageFieldUiTest.php @@ -58,29 +58,29 @@ function testResponsiveImageFormatterUI() { // Change the formatter and check that the summary is updated. $edit = array('fields[field_image][type]' => 'responsive_image', 'refresh_rows' => 'field_image'); $this->drupalPostAjaxForm(NULL, $edit, array('op' => t('Refresh'))); - $this->assertText("Select a responsive image mapping.", 'The expected summary is displayed.'); + $this->assertText("Select a responsive image style.", 'The expected summary is displayed.'); // Submit the form. $this->drupalPostForm(NULL, array(), t('Save')); - $this->assertText("Select a responsive image mapping.", 'The expected summary is displayed.'); + $this->assertText("Select a responsive image style.", 'The expected summary is displayed.'); - // Create responsive image mappings. - $responsive_image_mapping = entity_create('responsive_image_mapping', array( - 'id' => 'mapping_one', - 'label' => 'Mapping One', + // Create responsive image styles. + $responsive_image_style = entity_create('responsive_image_style', array( + 'id' => 'style_one', + 'label' => 'Style One', 'breakpoint_group' => 'responsive_image_test_module', )); - $responsive_image_mapping - ->addMappingDefinition('responsive_image_test_module.mobile', '1x', array( + $responsive_image_style + ->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'thumbnail', )) - ->addMappingDefinition('responsive_image_test_module.narrow', '1x', array( + ->addImageStyleMapping('responsive_image_test_module.narrow', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'medium' )) // Test the normal output of mapping to an image style. - ->addMappingDefinition('responsive_image_test_module.wide', '1x', array( + ->addImageStyleMapping('responsive_image_test_module.wide', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'large', )) @@ -88,7 +88,7 @@ function testResponsiveImageFormatterUI() { \Drupal::entityManager()->clearCachedFieldDefinitions(); // Refresh the page. $this->drupalGet($manage_display); - $this->assertText("Select a responsive image mapping.", 'The expected summary is displayed.'); + $this->assertText("Select a responsive image style.", 'The expected summary is displayed.'); // Click on the formatter settings button to open the formatter settings // form. @@ -96,7 +96,7 @@ function testResponsiveImageFormatterUI() { // Assert that the correct fields are present. $fieldnames = array( - 'fields[field_image][settings_edit_form][settings][responsive_image_mapping]', + 'fields[field_image][settings_edit_form][settings][responsive_image_style]', 'fields[field_image][settings_edit_form][settings][fallback_image_style]', 'fields[field_image][settings_edit_form][settings][image_link]', ); @@ -104,7 +104,7 @@ function testResponsiveImageFormatterUI() { $this->assertField($fieldname); } $edit = array( - 'fields[field_image][settings_edit_form][settings][responsive_image_mapping]' => 'mapping_one', + 'fields[field_image][settings_edit_form][settings][responsive_image_style]' => 'style_one', 'fields[field_image][settings_edit_form][settings][fallback_image_style]' => 'thumbnail', 'fields[field_image][settings_edit_form][settings][image_link]' => 'content', ); @@ -112,7 +112,7 @@ function testResponsiveImageFormatterUI() { // Save the form to save the settings. $this->drupalPostForm(NULL, array(), t('Save')); - $this->assertText('Responsive image mapping: Mapping One'); + $this->assertText('Responsive image style: Style One'); $this->assertText('Fallback Image style: Thumbnail (100×100)'); $this->assertText('Linked to content'); @@ -120,7 +120,7 @@ function testResponsiveImageFormatterUI() { // form. $this->drupalPostAjaxForm(NULL, array(), "field_image_settings_edit"); $edit = array( - 'fields[field_image][settings_edit_form][settings][responsive_image_mapping]' => 'mapping_one', + 'fields[field_image][settings_edit_form][settings][responsive_image_style]' => 'style_one', 'fields[field_image][settings_edit_form][settings][fallback_image_style]' => '', 'fields[field_image][settings_edit_form][settings][image_link]' => 'file', ); @@ -128,7 +128,7 @@ function testResponsiveImageFormatterUI() { // Save the form to save the third party settings. $this->drupalPostForm(NULL, array(), t('Save')); - $this->assertText('Responsive image mapping: Mapping One'); + $this->assertText('Responsive image style: Style One'); $this->assertText('Automatic fallback'); $this->assertText('Linked to file'); } diff --git a/core/modules/responsive_image/tests/src/Unit/ResponsiveImageMappingConfigEntityUnitTest.php b/core/modules/responsive_image/tests/src/Unit/ResponsiveImageStyleConfigEntityUnitTest.php similarity index 66% rename from core/modules/responsive_image/tests/src/Unit/ResponsiveImageMappingConfigEntityUnitTest.php rename to core/modules/responsive_image/tests/src/Unit/ResponsiveImageStyleConfigEntityUnitTest.php index a8373c5..afbb26f 100644 --- a/core/modules/responsive_image/tests/src/Unit/ResponsiveImageMappingConfigEntityUnitTest.php +++ b/core/modules/responsive_image/tests/src/Unit/ResponsiveImageStyleConfigEntityUnitTest.php @@ -2,20 +2,20 @@ /** * @file - * Contains \Drupal\Tests\responsive_image\Unit\ResponsiveImageMappingConfigEntityUnitTest. + * Contains \Drupal\Tests\responsive_image\Unit\ResponsiveImageStyleConfigEntityUnitTest. */ namespace Drupal\Tests\responsive_image\Unit; use Drupal\Core\DependencyInjection\ContainerBuilder; -use Drupal\responsive_image\Entity\ResponsiveImageMapping; +use Drupal\responsive_image\Entity\ResponsiveImageStyle; use Drupal\Tests\UnitTestCase; /** - * @coversDefaultClass \Drupal\responsive_image\Entity\ResponsiveImageMapping + * @coversDefaultClass \Drupal\responsive_image\Entity\ResponsiveImageStyle * @group block */ -class ResponsiveImageMappingConfigEntityUnitTest extends UnitTestCase { +class ResponsiveImageStyleConfigEntityUnitTest extends UnitTestCase { /** * The entity type used for testing. @@ -50,7 +50,7 @@ protected function setUp() { $this->entityManager = $this->getMock('\Drupal\Core\Entity\EntityManagerInterface'); $this->entityManager->expects($this->any()) ->method('getDefinition') - ->with('responsive_image_mapping') + ->with('responsive_image_style') ->will($this->returnValue($this->entityType)); $this->breakpointManager = $this->getMock('\Drupal\breakpoint\BreakpointManagerInterface'); @@ -65,7 +65,7 @@ protected function setUp() { * @covers ::calculateDependencies */ public function testCalculateDependencies() { - $entity = new ResponsiveImageMapping(array('breakpoint_group' => 'test_group')); + $entity = new ResponsiveImageStyle(array('breakpoint_group' => 'test_group')); $entity->setBreakpointGroup('test_group'); $this->breakpointManager->expects($this->any()) @@ -79,28 +79,28 @@ public function testCalculateDependencies() { } /** - * @covers ::addMappingDefinition - * @covers ::hasMappingDefinitions + * @covers ::addImageStyleMapping + * @covers ::hasImageStyleMappings */ - public function testHasMappingDefinitions() { - $entity = new ResponsiveImageMapping(array()); - $this->assertFalse($entity->hasMappingDefinitions()); - $entity->addMappingDefinition('test_breakpoint', '1x', array( + public function testHasImageStyleMappings() { + $entity = new ResponsiveImageStyle(array()); + $this->assertFalse($entity->hasImageStyleMappings()); + $entity->addImageStyleMapping('test_breakpoint', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => '', )); - $this->assertFalse($entity->hasMappingDefinitions()); - $entity->removeMappingDefinitions(); - $entity->addMappingDefinition('test_breakpoint', '1x', array( + $this->assertFalse($entity->hasImageStyleMappings()); + $entity->removeImageStyleMappings(); + $entity->addImageStyleMapping('test_breakpoint', '1x', array( 'image_mapping_type' => 'sizes', 'image_mapping' => array( 'sizes' => '(min-width:700px) 700px, 100vw', 'sizes_image_styles' => array(), ), )); - $this->assertFalse($entity->hasMappingDefinitions()); - $entity->removeMappingDefinitions(); - $entity->addMappingDefinition('test_breakpoint', '1x', array( + $this->assertFalse($entity->hasImageStyleMappings()); + $entity->removeImageStyleMappings(); + $entity->addImageStyleMapping('test_breakpoint', '1x', array( 'image_mapping_type' => 'sizes', 'image_mapping' => array( 'sizes' => '', @@ -109,15 +109,15 @@ public function testHasMappingDefinitions() { ), ), )); - $this->assertFalse($entity->hasMappingDefinitions()); - $entity->removeMappingDefinitions(); - $entity->addMappingDefinition('test_breakpoint', '1x', array( + $this->assertFalse($entity->hasImageStyleMappings()); + $entity->removeImageStyleMappings(); + $entity->addImageStyleMapping('test_breakpoint', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'large', )); - $this->assertTrue($entity->hasMappingDefinitions()); - $entity->removeMappingDefinitions(); - $entity->addMappingDefinition('test_breakpoint', '1x', array( + $this->assertTrue($entity->hasImageStyleMappings()); + $entity->removeImageStyleMappings(); + $entity->addImageStyleMapping('test_breakpoint', '1x', array( 'image_mapping_type' => 'sizes', 'image_mapping' => array( 'sizes' => '(min-width:700px) 700px, 100vw', @@ -126,16 +126,16 @@ public function testHasMappingDefinitions() { ), ), )); - $this->assertTrue($entity->hasMappingDefinitions()); + $this->assertTrue($entity->hasImageStyleMappings()); } /** - * @covers ::addMappingDefinition - * @covers ::getMappingDefinition + * @covers ::addImageStyleMapping + * @covers ::getImageStyleMapping */ - public function testGetMappingDefinition() { - $entity = new ResponsiveImageMapping(array('')); - $entity->addMappingDefinition('test_breakpoint', '1x', array( + public function testGetImageStyleMapping() { + $entity = new ResponsiveImageStyle(array('')); + $entity->addImageStyleMapping('test_breakpoint', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'large', )); @@ -145,21 +145,21 @@ public function testGetMappingDefinition() { 'image_mapping_type' => 'image_style', 'image_mapping' => 'large', ); - $this->assertEquals($expected, $entity->getMappingDefinition('test_breakpoint', '1x')); - $this->assertNull($entity->getMappingDefinition('test_unknown_breakpoint', '1x')); + $this->assertEquals($expected, $entity->getImageStyleMapping('test_breakpoint', '1x')); + $this->assertNull($entity->getImageStyleMapping('test_unknown_breakpoint', '1x')); } /** - * @covers ::addMappingDefinition - * @covers ::getKeyedMappingDefinitions + * @covers ::addImageStyleMapping + * @covers ::getKeyedImageStyleMappings */ - public function testGetKeyedMappingDefinitions() { - $entity = new ResponsiveImageMapping(array('')); - $entity->addMappingDefinition('test_breakpoint', '1x', array( + public function testGetKeyedImageStyleMappings() { + $entity = new ResponsiveImageStyle(array('')); + $entity->addImageStyleMapping('test_breakpoint', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'large', )); - $entity->addMappingDefinition('test_breakpoint', '2x', array( + $entity->addImageStyleMapping('test_breakpoint', '2x', array( 'image_mapping_type' => 'sizes', 'image_mapping' => array( 'sizes' => '(min-width:700px) 700px, 100vw', @@ -168,7 +168,7 @@ public function testGetKeyedMappingDefinitions() { ), ), )); - $entity->addMappingDefinition('test_breakpoint2', '1x', array( + $entity->addImageStyleMapping('test_breakpoint2', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'thumbnail', )); @@ -202,10 +202,10 @@ public function testGetKeyedMappingDefinitions() { ), ) ); - $this->assertEquals($expected, $entity->getKeyedMappingDefinitions()); + $this->assertEquals($expected, $entity->getKeyedImageStyleMappings()); // Add another mapping to ensure keyed mapping static cache is rebuilt. - $entity->addMappingDefinition('test_breakpoint2', '2x', array( + $entity->addImageStyleMapping('test_breakpoint2', '2x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'medium', )); @@ -215,20 +215,20 @@ public function testGetKeyedMappingDefinitions() { 'image_mapping_type' => 'image_style', 'image_mapping' => 'medium', ); - $this->assertEquals($expected, $entity->getKeyedMappingDefinitions()); + $this->assertEquals($expected, $entity->getKeyedImageStyleMappings()); } /** - * @covers ::addMappingDefinition - * @covers ::getMappingDefinitions + * @covers ::addImageStyleMapping + * @covers ::getImageStyleMappings */ - public function testGetMappingDefinitions() { - $entity = new ResponsiveImageMapping(array('')); - $entity->addMappingDefinition('test_breakpoint', '1x', array( + public function testGetImageStyleMappings() { + $entity = new ResponsiveImageStyle(array('')); + $entity->addImageStyleMapping('test_breakpoint', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'large', )); - $entity->addMappingDefinition('test_breakpoint', '2x', array( + $entity->addImageStyleMapping('test_breakpoint', '2x', array( 'image_mapping_type' => 'sizes', 'image_mapping' => array( 'sizes' => '(min-width:700px) 700px, 100vw', @@ -237,7 +237,7 @@ public function testGetMappingDefinitions() { ), ), )); - $entity->addMappingDefinition('test_breakpoint2', '1x', array( + $entity->addImageStyleMapping('test_breakpoint2', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'thumbnail', )); @@ -267,20 +267,20 @@ public function testGetMappingDefinitions() { 'image_mapping' => 'thumbnail', ), ); - $this->assertEquals($expected, $entity->getMappingDefinitions()); + $this->assertEquals($expected, $entity->getImageStyleMappings()); } /** - * @covers ::addMappingDefinition - * @covers ::removeMappingDefinitions + * @covers ::addImageStyleMapping + * @covers ::removeImageStyleMappings */ - public function testRemoveMappingDefinitions() { - $entity = new ResponsiveImageMapping(array('')); - $entity->addMappingDefinition('test_breakpoint', '1x', array( + public function testRemoveImageStyleMappings() { + $entity = new ResponsiveImageStyle(array('')); + $entity->addImageStyleMapping('test_breakpoint', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'large', )); - $entity->addMappingDefinition('test_breakpoint', '2x', array( + $entity->addImageStyleMapping('test_breakpoint', '2x', array( 'image_mapping_type' => 'sizes', 'image_mapping' => array( 'sizes' => '(min-width:700px) 700px, 100vw', @@ -289,16 +289,16 @@ public function testRemoveMappingDefinitions() { ), ), )); - $entity->addMappingDefinition('test_breakpoint2', '1x', array( + $entity->addImageStyleMapping('test_breakpoint2', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'thumbnail', )); - $this->assertTrue($entity->hasMappingDefinitions()); - $entity->removeMappingDefinitions(); - $this->assertEmpty($entity->getMappingDefinitions()); - $this->assertEmpty($entity->getKeyedMappingDefinitions()); - $this->assertFalse($entity->hasMappingDefinitions()); + $this->assertTrue($entity->hasImageStyleMappings()); + $entity->removeImageStyleMappings(); + $this->assertEmpty($entity->getImageStyleMappings()); + $this->assertEmpty($entity->getKeyedImageStyleMappings()); + $this->assertFalse($entity->hasImageStyleMappings()); } /** @@ -306,12 +306,12 @@ public function testRemoveMappingDefinitions() { * @covers ::getBreakpointGroup */ public function testSetBreakpointGroup() { - $entity = new ResponsiveImageMapping(array('breakpoint_group' => 'test_group')); - $entity->addMappingDefinition('test_breakpoint', '1x', array( + $entity = new ResponsiveImageStyle(array('breakpoint_group' => 'test_group')); + $entity->addImageStyleMapping('test_breakpoint', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'large', )); - $entity->addMappingDefinition('test_breakpoint', '2x', array( + $entity->addImageStyleMapping('test_breakpoint', '2x', array( 'image_mapping_type' => 'sizes', 'image_mapping' => array( 'sizes' => '(min-width:700px) 700px, 100vw', @@ -320,20 +320,20 @@ public function testSetBreakpointGroup() { ), ), )); - $entity->addMappingDefinition('test_breakpoint2', '1x', array( + $entity->addImageStyleMapping('test_breakpoint2', '1x', array( 'image_mapping_type' => 'image_style', 'image_mapping' => 'thumbnail', )); // Ensure that setting to same group does not remove mappings. $entity->setBreakpointGroup('test_group'); - $this->assertTrue($entity->hasMappingDefinitions()); + $this->assertTrue($entity->hasImageStyleMappings()); $this->assertEquals('test_group', $entity->getBreakpointGroup()); // Ensure that changing the group removes mappings. $entity->setBreakpointGroup('test_group2'); $this->assertEquals('test_group2', $entity->getBreakpointGroup()); - $this->assertFalse($entity->hasMappingDefinitions()); + $this->assertFalse($entity->hasImageStyleMappings()); } }