opdavies/drupalcampbristol
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update core 8.3.0

Browse source
This commit is contained in:
Rob Davies 2017-04-13 15:53:35 +01:00
parent da7a7918f8
commit cd7a898e66
6144 changed files with 132297 additions and 87747 deletions
Download patch file Download diff file Expand all files Collapse all files

100
web/core/modules/responsive_image/responsive_image.module
View file

@ -16,8 +16,20 @@ use Drupal\breakpoint\BreakpointInterface;
/**
* The machine name for the empty image breakpoint image style option.
*
* @deprecated in Drupal 8.3.x and will be removed before Drupal 9.0.0. Use
* Drupal\responsive_image\ResponsiveImageStyleInterface::EMPTY_IMAGE
* instead.
*/
const RESPONSIVE_IMAGE_EMPTY_IMAGE = '_empty image_';
/**
* The machine name for the original image breakpoint image style option.
*
* @deprecated in Drupal 8.3.x and will be removed before Drupal 9.0.0. Use
* \Drupal\responsive_image\ResponsiveImageStyleInterface::ORIGINAL_IMAGE
* instead.
*/
const RESPONSIVE_IMAGE_ORIGINAL_IMAGE = '_original image_';
/**
@ -28,25 +40,25 @@ function responsive_image_help($route_name, RouteMatchInterface $route_match) {
case 'help.page.responsive_image':
$output = '';
$output .= '<h3>' . t('About') . '</h3>';
$output .= '<p>' . t('The Responsive Image module provides an image formatter that allows browsers to select which image file to display based on media queries or which image file types the browser supports, using the HTML 5 picture and source elements and/or the sizes, srcset and type attributes. For more information, see the <a href=":responsive_image">online documentation for the Responsive Image module</a>.', array( ':responsive_image' => 'https://www.drupal.org/documentation/modules/responsive_image')) . '</p>';
$output .= '<p>' . t('The Responsive Image module provides an image formatter that allows browsers to select which image file to display based on media queries or which image file types the browser supports, using the HTML 5 picture and source elements and/or the sizes, srcset and type attributes. For more information, see the <a href=":responsive_image">online documentation for the Responsive Image module</a>.', [ ':responsive_image' => 'https://www.drupal.org/documentation/modules/responsive_image']) . '</p>';
$output .= '<h3>' . t('Uses') . '</h3>';
$output .= '<dl>';
$output .= '<dt>' . t('Defining responsive image styles') . '</dt>';
$output .= '<dd>' . t('By creating responsive image styles you define which options the browser has in selecting which image file to display. In most cases this means providing different image sizes based on the viewport size. On the <a href=":responsive_image_style">Responsive image styles</a> page, click <em>Add responsive image style</em> to create a new style. First choose a label, a fallback image style and a breakpoint group and click Save.', array(':responsive_image_style' => \Drupal::url('entity.responsive_image_style.collection'))) . '</dd>';
$output .= '<dd>' . t('By creating responsive image styles you define which options the browser has in selecting which image file to display. In most cases this means providing different image sizes based on the viewport size. On the <a href=":responsive_image_style">Responsive image styles</a> page, click <em>Add responsive image style</em> to create a new style. First choose a label, a fallback image style and a breakpoint group and click Save.', [':responsive_image_style' => \Drupal::url('entity.responsive_image_style.collection')]) . '</dd>';
$output .= '<dl>';
$output .= '<dt>' . t('Fallback image style') . '</dt>';
$output .= '<dd>' . t('The fallback image style is typically the smallest size image you expect to appear in this space. Because the responsive images module uses the Picturefill library so that responsive images can work in older browsers, the fallback image should only appear on a site if an error occurs.') . '</dd>';
$output .= '<dt>' . t('Breakpoint groups: viewport sizing vs art direction') . '</dt>';
$output .= '<dd>' . t('The breakpoint group typically only needs a single breakpoint with an empty media query in order to do <em>viewport sizing.</em> Multiple breakpoints are used for changing the crop or aspect ratio of images at different viewport sizes, which is often referred to as <em>art direction.</em> Once you select a breakpoint group, you can choose which breakpoints to use for the responsive image style. By default, the option <em>do not use this breakpoint</em> is selected for each breakpoint. See the <a href=":breakpoint_help">help page of the Breakpoint module</a> for more information.', array(':breakpoint_help' => \Drupal::url('help.page', array('name' => 'breakpoint')))) . '</dd>';
$output .= '<dd>' . t('The breakpoint group typically only needs a single breakpoint with an empty media query in order to do <em>viewport sizing.</em> Multiple breakpoints are used for changing the crop or aspect ratio of images at different viewport sizes, which is often referred to as <em>art direction.</em> Once you select a breakpoint group, you can choose which breakpoints to use for the responsive image style. By default, the option <em>do not use this breakpoint</em> is selected for each breakpoint. See the <a href=":breakpoint_help">help page of the Breakpoint module</a> for more information.', [':breakpoint_help' => \Drupal::url('help.page', ['name' => 'breakpoint'])]) . '</dd>';
$output .= '<dt>' . t('Breakpoint settings: sizes vs image styles') . '</dt>';
$output .= '<dd>' . t('While you have the option to provide only one image style per breakpoint, the sizes option allows you to provide more options to browsers as to which image file it can display, even when using multiple breakpoints for art direction. Breakpoints are defined in the configuration files of the theme.') . '</dd>';
$output .= '<dt>' . t('Sizes field') . '</dt>';
$output .= '<dd>' . t('Once the sizes option is selected, you can let the browser know the size of this image in relation to the site layout, using the <em>Sizes</em> field. For a hero image that always fills the entire screen, you could simply enter 100vw, which means 100% of the viewport width. For an image that fills 90% of the screen for small viewports, but only fills 40% of the screen when the viewport is larger than 40em (typically 640px), you could enter "(min-width: 40em) 40vw, 90vw" in the Sizes field. The last item in the comma-separated list is the smallest viewport size: other items in the comma-separated list should have a media condition paired with an image width. <em>Media conditions</em> are similar to a media query, often a min-width paired with a viewport width using em or px units: e.g. (min-width: 640px) or (min-width: 40em). This is paired with the <em>image width</em> at that viewport size using px, em or vw units. The vw unit is viewport width and is used instead of a percentage because the percentage always refers to the width of the entire viewport.') . '</dd>';
$output .= '<dt>' . t('Image styles for sizes') . '</dt>';
$output .= '<dd>' . t('Below the Sizes field you can choose multiple image styles so the browser can choose the best image file size to fill the space defined in the Sizes field. Typically you will want to use image styles that resize your image to have options that range from the smallest px width possible for the space the image will appear in to the largest px width possible, with a variety of widths in between. You may want to provide image styles with widths that are 1.5x to 2x the space available in the layout to account for high resolution screens. Image styles can be defined on the <a href=":image_styles">Image styles page</a> that is provided by the <a href=":image_help">Image module</a>.', array(':image_styles' => \Drupal::url('entity.image_style.collection'), ':image_help' => \Drupal::url('help.page', array('name' => 'image')))) . '</dd>';
$output .= '<dd>' . t('Below the Sizes field you can choose multiple image styles so the browser can choose the best image file size to fill the space defined in the Sizes field. Typically you will want to use image styles that resize your image to have options that range from the smallest px width possible for the space the image will appear in to the largest px width possible, with a variety of widths in between. You may want to provide image styles with widths that are 1.5x to 2x the space available in the layout to account for high resolution screens. Image styles can be defined on the <a href=":image_styles">Image styles page</a> that is provided by the <a href=":image_help">Image module</a>.', [':image_styles' => \Drupal::url('entity.image_style.collection'), ':image_help' => \Drupal::url('help.page', ['name' => 'image'])]) . '</dd>';
$output .= '</dl></dd>';
$output .= '<dt>' . t('Using responsive image styles in Image fields') . '</dt>';
$output .= '<dd>' . 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 <em>Responsive image</em>, 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 <a href=":field_ui">Field UI module help page</a>. For background information about entities and fields see the <a href=":field_help">Field module help page</a>.', array(':field_ui' => (\Drupal::moduleHandler()->moduleExists('field_ui')) ? \Drupal::url('help.page', array('name' => 'field_ui')) : '#', ':field_help' => \Drupal::url('help.page', array('name' => 'field')))) . '</dd>';
$output .= '<dd>' . 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 <em>Responsive image</em>, 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 <a href=":field_ui">Field UI module help page</a>. For background information about entities and fields see the <a href=":field_help">Field module help page</a>.', [':field_ui' => (\Drupal::moduleHandler()->moduleExists('field_ui')) ? \Drupal::url('help.page', ['name' => 'field_ui']) : '#', ':field_help' => \Drupal::url('help.page', ['name' => 'field'])]) . '</dd>';
$output .= '</dl>';
return $output;
@ -59,25 +71,25 @@ function responsive_image_help($route_name, RouteMatchInterface $route_match) {
* Implements hook_theme().
*/
function responsive_image_theme() {
return array(
'responsive_image' => array(
'variables' => array(
return [
'responsive_image' => [
'variables' => [
'uri' => NULL,
'attributes' => array(),
'responsive_image_style_id' => array(),
'attributes' => [],
'responsive_image_style_id' => [],
'height' => NULL,
'width' => NULL,
),
),
'responsive_image_formatter' => array(
'variables' => array(
],
],
'responsive_image_formatter' => [
'variables' => [
'item' => NULL,
'item_attributes' => NULL,
'url' => NULL,
'responsive_image_style_id' => NULL,
),
),
);
],
],
];
}
/**
@ -98,18 +110,18 @@ function template_preprocess_responsive_image_formatter(&$variables) {
// provided in the responsive image formatter.
$responsive_image_style = ResponsiveImageStyle::load($variables['responsive_image_style_id']);
if ($responsive_image_style) {
$variables['responsive_image'] = array(
$variables['responsive_image'] = [
'#type' => 'responsive_image',
'#responsive_image_style_id' => $variables['responsive_image_style_id'],
);
];
}
else {
$variables['responsive_image'] = array(
$variables['responsive_image'] = [
'#theme' => 'image',
);
];
}
$item = $variables['item'];
$attributes = array();
$attributes = [];
// Do not output an empty 'title' attribute.
if (Unicode::strlen($item->title) != 0) {
$attributes['title'] = $item->title;
@ -126,7 +138,7 @@ function template_preprocess_responsive_image_formatter(&$variables) {
$variables['responsive_image']['#uri'] = $item->uri;
}
foreach (array('width', 'height') as $key) {
foreach (['width', 'height'] as $key) {
$variables['responsive_image']["#$key"] = $item->$key;
}
$variables['responsive_image']['#attributes'] = $attributes;
@ -189,25 +201,21 @@ function template_preprocess_responsive_image(&$variables) {
$variables['attributes'][$attribute] = $value;
}
}
$variables['img_element'] = array(
$variables['img_element'] = [
'#theme' => 'image',
'#uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $variables['uri']),
);
];
}
else {
$variables['output_image_tag'] = FALSE;
// 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
// http://scottjehl.github.io/picturefill/#gotchas for more information.
$variables['img_element'] = array(
// Prepare the fallback image. We use the src attribute, which might cause
// double downloads in browsers that don't support the picture tag (might,
// because when picturefill kicks in, it cancels the download and triggers
// the download for the correct image).
$variables['img_element'] = [
'#theme' => 'image',
'#srcset' => array(
array(
'uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $variables['uri']),
),
),
);
'#uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $variables['uri']),
];
}
if (isset($variables['attributes'])) {
@ -290,7 +298,7 @@ function responsive_image_build_source_attributes(ImageInterface $image, array $
* <picture>
* <source media="(min-width: 0px)" srcset="sites/default/files/styles/thumbnail/image.jpeg" />
* <source media="(min-width: 560px)" sizes="(min-width: 700px) 700px, 100vw" srcset="sites/default/files/styles/large/image.jpeg 480w, sites/default/files/styles/medium/image.jpeg 220w" />
* <img srcset="fallback.jpeg" />
* <img src="fallback.jpeg" />
* </picture>
* @endcode
*
@ -319,7 +327,7 @@ function responsive_image_build_source_attributes(ImageInterface $image, array $
* <picture>
* <source [...] mime-type="image/webp" srcset="image1.webp 1x, image2.webp 2x, image3.webp 3x"/>
* <source [...] mime-type="image/jpeg" srcset="image1.jpeg 1x, image2.jpeg 2x, image3.jpeg 3x"/>
* <img srcset="fallback.jpeg" />
* <img src="fallback.jpeg" />
* </picture>
* @endcode
* This way a browser can decide which <source> tag is preferred based on the
@ -397,9 +405,9 @@ function _responsive_image_build_source_attributes(array $variables, BreakpointI
$height = $variables['height'];
}
$extension = pathinfo($variables['uri'], PATHINFO_EXTENSION);
$sizes = array();
$srcset = array();
$derivative_mime_types = array();
$sizes = [];
$srcset = [];
$derivative_mime_types = [];
foreach ($multipliers as $multiplier => $image_style_mapping) {
switch ($image_style_mapping['image_mapping_type']) {
// Create a <source> tag with the 'sizes' attribute.
@ -407,7 +415,7 @@ function _responsive_image_build_source_attributes(array $variables, BreakpointI
// 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), $variables['uri']);
$dimensions = responsive_image_get_image_dimensions($image_style_name, ['width' => $width, 'height' => $height], $variables['uri']);
// Get MIME type.
$derivative_mime_type = responsive_image_get_mime_type($image_style_name, $extension);
$derivative_mime_types[] = $derivative_mime_type;
@ -443,9 +451,9 @@ function _responsive_image_build_source_attributes(array $variables, BreakpointI
}
// Sort the srcset from small to large image width or multiplier.
ksort($srcset);
$source_attributes = new Attribute(array(
$source_attributes = new Attribute([
'srcset' => implode(', ', array_unique($srcset)),
));
]);
$media_query = trim($breakpoint->getMediaQuery());
if (!empty($media_query)) {
$source_attributes->setAttribute('media', $media_query);
@ -478,10 +486,10 @@ function _responsive_image_build_source_attributes(array $variables, BreakpointI
function responsive_image_get_image_dimensions($image_style_name, array $dimensions, $uri) {
// Determine the dimensions of the styled image.
if ($image_style_name == RESPONSIVE_IMAGE_EMPTY_IMAGE) {
$dimensions = array(
$dimensions = [
'width' => 1,
'height' => 1,
);
];
}
elseif ($entity = ImageStyle::load($image_style_name)) {
$entity->transformDimensions($dimensions, $uri);

9
web/core/modules/responsive_image/responsive_image.post_update.php
View file

@ -8,11 +8,6 @@
use Drupal\Core\Entity\Display\EntityViewDisplayInterface;
use Drupal\Core\Entity\Entity\EntityViewDisplay;
/**
* @addtogroup updates-8.1.x
* @{
*/
/**
* Make responsive image formatters dependent on responsive image styles.
*/
@ -26,7 +21,3 @@ function responsive_image_post_update_recreate_dependencies() {
}
});
}
/**
* @} End of "addtogroup updates-8.1.x".
*/

14
web/core/modules/responsive_image/src/Entity/ResponsiveImageStyle.php
View file

@ -68,7 +68,7 @@ class ResponsiveImageStyle extends ConfigEntityBase implements ResponsiveImageSt
*
* @var array
*/
protected $image_style_mappings = array();
protected $image_style_mappings = [];
/**
* @var array
@ -103,18 +103,18 @@ class ResponsiveImageStyle extends ConfigEntityBase implements ResponsiveImageSt
// If there is an existing mapping, overwrite it.
foreach ($this->image_style_mappings as &$mapping) {
if ($mapping['breakpoint_id'] === $breakpoint_id && $mapping['multiplier'] === $multiplier) {
$mapping = array(
$mapping = [
'breakpoint_id' => $breakpoint_id,
'multiplier' => $multiplier,
) + $image_style_mapping;
] + $image_style_mapping;
$this->keyedImageStyleMappings = NULL;
return $this;
}
}
$this->image_style_mappings[] = array(
$this->image_style_mappings[] = [
'breakpoint_id' => $breakpoint_id,
'multiplier' => $multiplier,
) + $image_style_mapping;
] + $image_style_mapping;
$this->keyedImageStyleMappings = NULL;
return $this;
}
@ -132,7 +132,7 @@ class ResponsiveImageStyle extends ConfigEntityBase implements ResponsiveImageSt
*/
public function getKeyedImageStyleMappings() {
if (!$this->keyedImageStyleMappings) {
$this->keyedImageStyleMappings = array();
$this->keyedImageStyleMappings = [];
foreach ($this->image_style_mappings as $mapping) {
if (!static::isEmptyImageStyleMapping($mapping)) {
$this->keyedImageStyleMappings[$mapping['breakpoint_id']][$mapping['multiplier']] = $mapping;
@ -188,7 +188,7 @@ class ResponsiveImageStyle extends ConfigEntityBase implements ResponsiveImageSt
* {@inheritdoc}
*/
public function removeImageStyleMappings() {
$this->image_style_mappings = array();
$this->image_style_mappings = [];
$this->keyedImageStyleMappings = NULL;
return $this;
}

45
web/core/modules/responsive_image/src/Plugin/Field/FieldFormatter/ResponsiveImageFormatter.php
View file

@ -23,6 +23,9 @@ use Drupal\Core\Utility\LinkGeneratorInterface;
* label = @Translation("Responsive image"),
* field_types = {
* "image",
* },
* quickedit = {
* "editor" = "image"
* }
* )
*/
@ -112,17 +115,17 @@ class ResponsiveImageFormatter extends ImageFormatterBase implements ContainerFa
* {@inheritdoc}
*/
public static function defaultSettings() {
return array(
return [
'responsive_image_style' => '',
'image_link' => '',
) + parent::defaultSettings();
] + parent::defaultSettings();
}
/**
* {@inheritdoc}
*/
public function settingsForm(array $form, FormStateInterface $form_state) {
$responsive_image_options = array();
$responsive_image_options = [];
$responsive_image_styles = $this->responsiveImageStyleStorage->loadMultiple();
if ($responsive_image_styles && !empty($responsive_image_styles)) {
foreach ($responsive_image_styles as $machine_name => $responsive_image_style) {
@ -132,29 +135,29 @@ class ResponsiveImageFormatter extends ImageFormatterBase implements ContainerFa
}
}
$elements['responsive_image_style'] = array(
$elements['responsive_image_style'] = [
'#title' => t('Responsive image style'),
'#type' => 'select',
'#default_value' => $this->getSetting('responsive_image_style'),
'#required' => TRUE,
'#options' => $responsive_image_options,
'#description' => array(
'#description' => [
'#markup' => $this->linkGenerator->generate($this->t('Configure Responsive Image Styles'), new Url('entity.responsive_image_style.collection')),
'#access' => $this->currentUser->hasPermission('administer responsive image styles'),
),
);
],
];
$link_types = array(
$link_types = [
'content' => t('Content'),
'file' => t('File'),
);
$elements['image_link'] = array(
];
$elements['image_link'] = [
'#title' => t('Link image to'),
'#type' => 'select',
'#default_value' => $this->getSetting('image_link'),
'#empty_option' => t('Nothing'),
'#options' => $link_types,
);
];
return $elements;
}
@ -163,16 +166,16 @@ class ResponsiveImageFormatter extends ImageFormatterBase implements ContainerFa
* {@inheritdoc}
*/
public function settingsSummary() {
$summary = array();
$summary = [];
$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()));
$summary[] = t('Responsive image style: @responsive_image_style', ['@responsive_image_style' => $responsive_image_style->label()]);
$link_types = array(
$link_types = [
'content' => t('Linked to content'),
'file' => t('Linked to file'),
);
];
// Display this setting only if image is linked.
if (isset($link_types[$this->getSetting('image_link')])) {
$summary[] = $link_types[$this->getSetting('image_link')];
@ -189,7 +192,7 @@ class ResponsiveImageFormatter extends ImageFormatterBase implements ContainerFa
* {@inheritdoc}
*/
public function viewElements(FieldItemListInterface $items, $langcode) {
$elements = array();
$elements = [];
$files = $this->getEntitiesToView($items, $langcode);
// Early opt-out if the field is empty.
@ -211,7 +214,7 @@ class ResponsiveImageFormatter extends ImageFormatterBase implements ContainerFa
// Collect cache tags to be added for each item in the field.
$responsive_image_style = $this->responsiveImageStyleStorage->load($this->getSetting('responsive_image_style'));
$image_styles_to_load = array();
$image_styles_to_load = [];
$cache_tags = [];
if ($responsive_image_style) {
$cache_tags = Cache::mergeTags($cache_tags, $responsive_image_style->getCacheTags());
@ -234,16 +237,16 @@ class ResponsiveImageFormatter extends ImageFormatterBase implements ContainerFa
$item_attributes = $item->_attributes;
unset($item->_attributes);
$elements[$delta] = array(
$elements[$delta] = [
'#theme' => 'responsive_image_formatter',
'#item' => $item,
'#item_attributes' => $item_attributes,
'#responsive_image_style_id' => $responsive_image_style ? $responsive_image_style->id() : '',
'#url' => $url,
'#cache' => array(
'#cache' => [
'tags' => $cache_tags,
),
);
],
];
}
return $elements;
}

128
web/core/modules/responsive_image/src/ResponsiveImageStyleForm.php
View file

@ -51,32 +51,32 @@ class ResponsiveImageStyleForm extends EntityForm {
*/
public function form(array $form, FormStateInterface $form_state) {
if ($this->operation == 'duplicate') {
$form['#title'] = $this->t('<em>Duplicate responsive image style</em> @label', array('@label' => $this->entity->label()));
$form['#title'] = $this->t('<em>Duplicate responsive image style</em> @label', ['@label' => $this->entity->label()]);
$this->entity = $this->entity->createDuplicate();
}
if ($this->operation == 'edit') {
$form['#title'] = $this->t('<em>Edit responsive image style</em> @label', array('@label' => $this->entity->label()));
$form['#title'] = $this->t('<em>Edit responsive image style</em> @label', ['@label' => $this->entity->label()]);
}
/** @var \Drupal\responsive_image\ResponsiveImageStyleInterface $responsive_image_style */
$responsive_image_style = $this->entity;
$form['label'] = array(
$form['label'] = [
'#type' => 'textfield',
'#title' => $this->t('Label'),
'#maxlength' => 255,
'#default_value' => $responsive_image_style->label(),
'#description' => $this->t("Example: 'Hero image' or 'Author image'."),
'#required' => TRUE,
);
$form['id'] = array(
];
$form['id'] = [
'#type' => 'machine_name',
'#default_value' => $responsive_image_style->id(),
'#machine_name' => array(
'#machine_name' => [
'exists' => '\Drupal\responsive_image\Entity\ResponsiveImageStyle::load',
'source' => array('label'),
),
'source' => ['label'],
],
'#disabled' => (bool) $responsive_image_style->id() && $this->operation != 'duplicate',
);
];
$image_styles = image_style_options(TRUE);
$image_styles[RESPONSIVE_IMAGE_ORIGINAL_IMAGE] = $this->t('- None (original image) -');
@ -89,25 +89,25 @@ class ResponsiveImageStyleForm extends EntityForm {
$description = $this->t('Select a breakpoint group from the installed themes and modules.');
}
$form['breakpoint_group'] = array(
$form['breakpoint_group'] = [
'#type' => 'select',
'#title' => $this->t('Breakpoint group'),
'#default_value' => $responsive_image_style->getBreakpointGroup() ?: 'responsive_image',
'#options' => $this->breakpointManager->getGroups(),
'#required' => TRUE,
'#description' => $description,
'#ajax' => array(
'#ajax' => [
'callback' => '::breakpointMappingFormAjax',
'wrapper' => 'responsive-image-style-breakpoints-wrapper',
),
);
],
];
$form['keyed_styles'] = array(
$form['keyed_styles'] = [
'#type' => 'container',
'#attributes' => array(
'#attributes' => [
'id' => 'responsive-image-style-breakpoints-wrapper',
),
);
],
];
// By default, breakpoints are ordered from smallest weight to largest:
// the smallest weight is expected to have the smallest breakpoint width,
@ -119,69 +119,69 @@ class ResponsiveImageStyleForm extends EntityForm {
foreach ($breakpoints as $breakpoint_id => $breakpoint) {
foreach ($breakpoint->getMultipliers() as $multiplier) {
$label = $multiplier . ' ' . $breakpoint->getLabel() . ' [' . $breakpoint->getMediaQuery() . ']';
$form['keyed_styles'][$breakpoint_id][$multiplier] = array(
$form['keyed_styles'][$breakpoint_id][$multiplier] = [
'#type' => 'details',
'#title' => $label,
);
];
$image_style_mapping = $responsive_image_style->getImageStyleMapping($breakpoint_id, $multiplier);
if (\Drupal::moduleHandler()->moduleExists('help')) {
$description = $this->t('See the <a href=":responsive_image_help">Responsive Image help page</a> for information on the sizes attribute.', array(':responsive_image_help' => \Drupal::url('help.page', array('name' => 'responsive_image'))));
$description = $this->t('See the <a href=":responsive_image_help">Responsive Image help page</a> for information on the sizes attribute.', [':responsive_image_help' => \Drupal::url('help.page', ['name' => 'responsive_image'])]);
}
else {
$description = $this->t('Enable the Help module for more information on the sizes attribute.');
}
$form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping_type'] = array(
$form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping_type'] = [
'#title' => $this->t('Type'),
'#type' => 'radios',
'#options' => array(
'#options' => [
'sizes' => $this->t('Select multiple image styles and use the sizes attribute.'),
'image_style' => $this->t('Select a single image style.'),
'_none' => $this->t('Do not use this breakpoint.'),
),
],
'#default_value' => isset($image_style_mapping['image_mapping_type']) ? $image_style_mapping['image_mapping_type'] : '_none',
'#description' => $description,
);
$form['keyed_styles'][$breakpoint_id][$multiplier]['image_style'] = array(
];
$form['keyed_styles'][$breakpoint_id][$multiplier]['image_style'] = [
'#type' => 'select',
'#title' => $this->t('Image style'),
'#options' => $image_styles,
'#default_value' => isset($image_style_mapping['image_mapping']) && is_string($image_style_mapping['image_mapping']) ? $image_style_mapping['image_mapping'] : '',
'#description' => $this->t('Select an image style for this breakpoint.'),
'#states' => array(
'visible' => array(
':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => array('value' => 'image_style'),
),
),
);
$form['keyed_styles'][$breakpoint_id][$multiplier]['sizes'] = array(
'#states' => [
'visible' => [
':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => ['value' => 'image_style'],
],
],
];
$form['keyed_styles'][$breakpoint_id][$multiplier]['sizes'] = [
'#type' => 'textfield',
'#title' => $this->t('Sizes'),
'#default_value' => isset($image_style_mapping['image_mapping']['sizes']) ? $image_style_mapping['image_mapping']['sizes'] : '100vw',
'#description' => $this->t('Enter the value for the sizes attribute, for example: %example_sizes.', ['%example_sizes' => '(min-width:700px) 700px, 100vw']),
'#states' => array(
'visible' => array(
':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => array('value' => 'sizes'),
),
'required' => array(
':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => array('value' => 'sizes'),
),
),
);
$form['keyed_styles'][$breakpoint_id][$multiplier]['sizes_image_styles'] = array(
'#states' => [
'visible' => [
':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => ['value' => 'sizes'],
],
'required' => [
':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => ['value' => 'sizes'],
],
],
];
$form['keyed_styles'][$breakpoint_id][$multiplier]['sizes_image_styles'] = [
'#title' => $this->t('Image styles'),
'#type' => 'checkboxes',
'#options' => array_diff_key($image_styles, array('' => '')),
'#options' => array_diff_key($image_styles, ['' => '']),
'#description' => $this->t('Select image styles with widths that range from the smallest amount of space this image will take up in the layout to the largest, bearing in mind that high resolution screens will need images 1.5x to 2x larger.'),
'#default_value' => isset($image_style_mapping['image_mapping']['sizes_image_styles']) ? $image_style_mapping['image_mapping']['sizes_image_styles'] : array(),
'#states' => array(
'visible' => array(
':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => array('value' => 'sizes'),
),
'required' => array(
':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => array('value' => 'sizes'),
),
),
);
'#default_value' => isset($image_style_mapping['image_mapping']['sizes_image_styles']) ? $image_style_mapping['image_mapping']['sizes_image_styles'] : [],
'#states' => [
'visible' => [
':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => ['value' => 'sizes'],
],
'required' => [
':input[name="keyed_styles[' . $breakpoint_id . '][' . $multiplier . '][image_mapping_type]"]' => ['value' => 'sizes'],
],
],
];
// Expand the details if "do not use this breakpoint" was not selected.
if ($form['keyed_styles'][$breakpoint_id][$multiplier]['image_mapping_type']['#default_value'] != '_none') {
@ -190,14 +190,14 @@ class ResponsiveImageStyleForm extends EntityForm {
}
}
$form['fallback_image_style'] = array(
$form['fallback_image_style'] = [
'#title' => $this->t('Fallback image style'),
'#type' => 'select',
'#default_value' => $responsive_image_style->getFallbackImageStyle(),
'#options' => $image_styles,
'#required' => TRUE,
'#description' => t('Select the smallest image style you expect to appear in this space. The fallback image style should only appear on the site if an error occurs.'),
);
];
$form['#tree'] = TRUE;
@ -252,20 +252,20 @@ class ResponsiveImageStyleForm extends EntityForm {
foreach ($form_state->getValue('keyed_styles') as $breakpoint_id => $multipliers) {
foreach ($multipliers as $multiplier => $image_style_mapping) {
if ($image_style_mapping['image_mapping_type'] === 'sizes') {
$mapping = array(
$mapping = [
'image_mapping_type' => 'sizes',
'image_mapping' => array(
'image_mapping' => [
'sizes' => $image_style_mapping['sizes'],
'sizes_image_styles' => array_keys(array_filter($image_style_mapping['sizes_image_styles'])),
)
);
]
];
$responsive_image_style->addImageStyleMapping($breakpoint_id, $multiplier, $mapping);
}
elseif ($image_style_mapping['image_mapping_type'] === 'image_style') {
$mapping = array(
$mapping = [
'image_mapping_type' => 'image_style',
'image_mapping' => $image_style_mapping['image_style'],
);
];
$responsive_image_style->addImageStyleMapping($breakpoint_id, $multiplier, $mapping);
}
}
@ -273,15 +273,15 @@ class ResponsiveImageStyleForm extends EntityForm {
}
$responsive_image_style->save();
$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())));
$this->logger('responsive_image')->notice('Responsive image style @label saved.', ['@label' => $responsive_image_style->label()]);
drupal_set_message($this->t('Responsive image style %label saved.', ['%label' => $responsive_image_style->label()]));
// 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_style.edit_form',
array('responsive_image_style' => $responsive_image_style->id())
['responsive_image_style' => $responsive_image_style->id()]
);
}
else {

10
web/core/modules/responsive_image/src/ResponsiveImageStyleInterface.php
View file

@ -9,6 +9,16 @@ use Drupal\Core\Config\Entity\ConfigEntityInterface;
*/
interface ResponsiveImageStyleInterface extends ConfigEntityInterface {
/**
* The machine name for the empty image breakpoint image style option.
*/
const EMPTY_IMAGE = '_empty image_';
/**
* The machine name for the original image breakpoint image style option.
*/
const ORIGINAL_IMAGE = '_original image_';
/**
* Checks if there is at least one mapping defined.
*

4
web/core/modules/responsive_image/src/ResponsiveImageStyleListBuilder.php
View file

@ -33,11 +33,11 @@ class ResponsiveImageStyleListBuilder extends ConfigEntityListBuilder {
*/
public function getDefaultOperations(EntityInterface $entity) {
$operations = parent::getDefaultOperations($entity);
$operations['duplicate'] = array(
$operations['duplicate'] = [
'title' => t('Duplicate'),
'weight' => 15,
'url' => $entity->urlInfo('duplicate-form'),
);
];
return $operations;
}

28
web/core/modules/responsive_image/src/Tests/ResponsiveImageAdminUITest.php
View file

@ -16,7 +16,7 @@ class ResponsiveImageAdminUITest extends WebTestBase {
*
* @var array
*/
public static $modules = array('responsive_image', 'responsive_image_test_module');
public static $modules = ['responsive_image', 'responsive_image_test_module'];
/**
* Drupal\simpletest\WebTestBase\setUp().
@ -43,12 +43,12 @@ class ResponsiveImageAdminUITest extends WebTestBase {
$this->assertFieldByName('breakpoint_group', 'responsive_image');
// Create a new group.
$edit = array(
$edit = [
'label' => 'Style One',
'id' => 'style_one',
'breakpoint_group' => 'responsive_image_test_module',
'fallback_image_style' => 'thumbnail',
);
];
$this->drupalPostForm('admin/config/media/responsive-image-style/add', $edit, t('Save'));
// Check if the new group is created.
@ -64,14 +64,14 @@ class ResponsiveImageAdminUITest extends WebTestBase {
$this->assertFieldByName('breakpoint_group', 'responsive_image_test_module');
$this->assertFieldByName('fallback_image_style', 'thumbnail');
$cases = array(
array('mobile', '1x'),
array('mobile', '2x'),
array('narrow', '1x'),
array('narrow', '2x'),
array('wide', '1x'),
array('wide', '2x'),
);
$cases = [
['mobile', '1x'],
['mobile', '2x'],
['narrow', '1x'],
['narrow', '2x'],
['wide', '1x'],
['wide', '2x'],
];
$image_styles = array_merge(
[RESPONSIVE_IMAGE_EMPTY_IMAGE, RESPONSIVE_IMAGE_ORIGINAL_IMAGE],
array_keys(image_style_options(FALSE))
@ -99,7 +99,7 @@ class ResponsiveImageAdminUITest extends WebTestBase {
}
// Save styles for 1x variant only.
$edit = array(
$edit = [
'label' => 'Style One',
'breakpoint_group' => 'responsive_image_test_module',
'fallback_image_style' => 'thumbnail',
@ -111,7 +111,7 @@ class ResponsiveImageAdminUITest extends WebTestBase {
'keyed_styles[responsive_image_test_module.narrow][1x][sizes_image_styles][medium]' => 'medium',
'keyed_styles[responsive_image_test_module.wide][1x][image_mapping_type]' => 'image_style',
'keyed_styles[responsive_image_test_module.wide][1x][image_style]' => 'large',
);
];
$this->drupalPostForm('admin/config/media/responsive-image-style/style_one', $edit, t('Save'));
$this->drupalGet('admin/config/media/responsive-image-style/style_one');
@ -135,7 +135,7 @@ class ResponsiveImageAdminUITest extends WebTestBase {
// Delete the style.
$this->drupalGet('admin/config/media/responsive-image-style/style_one/delete');
$this->drupalPostForm(NULL, array(), t('Delete'));
$this->drupalPostForm(NULL, [], t('Delete'));
$this->drupalGet('admin/config/media/responsive-image-style');
$this->assertText('There is no Responsive image style yet.');
}

158
web/core/modules/responsive_image/src/Tests/ResponsiveImageFieldDisplayTest.php
View file

@ -32,7 +32,7 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
*
* @var array
*/
public static $modules = array('field_ui', 'responsive_image', 'responsive_image_test_module');
public static $modules = ['field_ui', 'responsive_image', 'responsive_image_test_module'];
/**
* Drupal\simpletest\WebTestBase\setUp().
@ -41,7 +41,7 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
parent::setUp();
// Create user.
$this->adminUser = $this->drupalCreateUser(array(
$this->adminUser = $this->drupalCreateUser([
'administer responsive images',
'access content',
'access administration pages',
@ -53,15 +53,15 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
'edit any article content',
'delete any article content',
'administer image styles'
));
]);
$this->drupalLogin($this->adminUser);
// Add responsive image style.
$this->responsiveImgStyle = ResponsiveImageStyle::create(array(
$this->responsiveImgStyle = ResponsiveImageStyle::create([
'id' => 'style_one',
'label' => 'Style One',
'breakpoint_group' => 'responsive_image_test_module',
'fallback_image_style' => 'large',
));
]);
}
/**
@ -78,7 +78,7 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
public function testResponsiveImageFieldFormattersPrivate() {
$this->addTestImageStyleMappings();
// Remove access content permission from anonymous users.
user_role_change_permissions(RoleInterface::ANONYMOUS_ID, array('access content' => FALSE));
user_role_change_permissions(RoleInterface::ANONYMOUS_ID, ['access content' => FALSE]);
$this->doTestResponsiveImageFieldFormatters('private');
}
@ -99,56 +99,56 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
protected function addTestImageStyleMappings($empty_styles = FALSE) {
if ($empty_styles) {
$this->responsiveImgStyle
->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array(
->addImageStyleMapping('responsive_image_test_module.mobile', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => '',
))
->addImageStyleMapping('responsive_image_test_module.narrow', '1x', array(
])
->addImageStyleMapping('responsive_image_test_module.narrow', '1x', [
'image_mapping_type' => 'sizes',
'image_mapping' => array(
'image_mapping' => [
'sizes' => '(min-width: 700px) 700px, 100vw',
'sizes_image_styles' => array(),
),
))
->addImageStyleMapping('responsive_image_test_module.wide', '1x', array(
'sizes_image_styles' => [],
],
])
->addImageStyleMapping('responsive_image_test_module.wide', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => '',
))
])
->save();
}
else {
$this->responsiveImgStyle
// Test the output of an empty image.
->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array(
->addImageStyleMapping('responsive_image_test_module.mobile', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => RESPONSIVE_IMAGE_EMPTY_IMAGE,
))
])
// Test the output with a 1.5x multiplier.
->addImageStyleMapping('responsive_image_test_module.mobile', '1.5x', array(
->addImageStyleMapping('responsive_image_test_module.mobile', '1.5x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'thumbnail',
))
])
// Test the output of the 'sizes' attribute.
->addImageStyleMapping('responsive_image_test_module.narrow', '1x', array(
->addImageStyleMapping('responsive_image_test_module.narrow', '1x', [
'image_mapping_type' => 'sizes',
'image_mapping' => array(
'image_mapping' => [
'sizes' => '(min-width: 700px) 700px, 100vw',
'sizes_image_styles' => array(
'sizes_image_styles' => [
'large',
'medium',
),
),
))
],
],
])
// Test the normal output of mapping to an image style.
->addImageStyleMapping('responsive_image_test_module.wide', '1x', array(
->addImageStyleMapping('responsive_image_test_module.wide', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'large',
))
])
// Test the output of the original image.
->addImageStyleMapping('responsive_image_test_module.wide', '3x', array(
->addImageStyleMapping('responsive_image_test_module.wide', '3x', [
'image_mapping_type' => 'image_style',
'image_mapping' => RESPONSIVE_IMAGE_ORIGINAL_IMAGE,
))
])
->save();
}
}
@ -169,7 +169,7 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
$renderer = $this->container->get('renderer');
$node_storage = $this->container->get('entity.manager')->getStorage('node');
$field_name = Unicode::strtolower($this->randomMachineName());
$this->createImageField($field_name, 'article', array('uri_scheme' => $scheme));
$this->createImageField($field_name, 'article', ['uri_scheme' => $scheme]);
// Create a new node with an image attached. Make sure we use a large image
// so the scale effects of the image styles always have an effect.
$test_image = current($this->drupalGetTestFiles('image', 39325));
@ -178,26 +178,26 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
$alt = $this->randomMachineName();
$nid = $this->uploadNodeImage($test_image, $field_name, 'article', $alt);
$node_storage->resetCache(array($nid));
$node_storage->resetCache([$nid]);
$node = $node_storage->load($nid);
// Test that the default formatter is being used.
$image_uri = File::load($node->{$field_name}->target_id)->getFileUri();
$image = array(
$image = [
'#theme' => 'image',
'#uri' => $image_uri,
'#width' => 360,
'#height' => 240,
'#alt' => $alt,
);
];
$default_output = str_replace("\n", NULL, $renderer->renderRoot($image));
$this->assertRaw($default_output, 'Default formatter displaying correctly on full node view.');
// Test field not being configured. This should not cause a fatal error.
$display_options = array(
$display_options = [
'type' => 'responsive_image_test',
'settings' => ResponsiveImageFormatter::defaultSettings(),
);
];
$display = $this->container->get('entity.manager')
->getStorage('entity_view_display')
->load('node.article.default');
@ -215,13 +215,13 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
$this->drupalGet('node/' . $nid);
// Test theme function for responsive image, but using the test formatter.
$display_options = array(
$display_options = [
'type' => 'responsive_image_test',
'settings' => array(
'settings' => [
'image_link' => 'file',
'responsive_image_style' => 'style_one',
),
);
],
];
$display = entity_get_display('node', 'article', 'default');
$display->setComponent($field_name, $display_options)
->save();
@ -229,13 +229,13 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
$this->drupalGet('node/' . $nid);
// Use the responsive image formatter linked to file formatter.
$display_options = array(
$display_options = [
'type' => 'responsive_image',
'settings' => array(
'settings' => [
'image_link' => 'file',
'responsive_image_style' => 'style_one',
),
);
],
];
$display = entity_get_display('node', 'article', 'default');
$display->setComponent($field_name, $display_options)
->save();
@ -312,15 +312,11 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
// Test the fallback image style.
$image = \Drupal::service('image.factory')->get($image_uri);
$fallback_image = array(
$fallback_image = [
'#theme' => 'image',
'#alt' => $alt,
'#srcset' => array(
array(
'uri' => file_url_transform_relative($large_style->buildUrl($image->getSource())),
),
),
);
'#uri' => file_url_transform_relative($large_style->buildUrl($image->getSource())),
];
// The image.html.twig template has a newline after the <img> tag but
// responsive-image.html.twig doesn't have one after the fallback image, so
// we remove it here.
@ -359,32 +355,32 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
public function testResponsiveImageFieldFormattersEmptyMediaQuery() {
$this->responsiveImgStyle
// Test the output of an empty media query.
->addImageStyleMapping('responsive_image_test_module.empty', '1x', array(
->addImageStyleMapping('responsive_image_test_module.empty', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => RESPONSIVE_IMAGE_EMPTY_IMAGE,
))
])
// Test the output with a 1.5x multiplier.
->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array(
->addImageStyleMapping('responsive_image_test_module.mobile', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'thumbnail',
))
])
->save();
$node_storage = $this->container->get('entity.manager')->getStorage('node');
$field_name = Unicode::strtolower($this->randomMachineName());
$this->createImageField($field_name, 'article', array('uri_scheme' => 'public'));
$this->createImageField($field_name, 'article', ['uri_scheme' => 'public']);
// Create a new node with an image attached.
$test_image = current($this->drupalGetTestFiles('image'));
$nid = $this->uploadNodeImage($test_image, $field_name, 'article', $this->randomMachineName());
$node_storage->resetCache(array($nid));
$node_storage->resetCache([$nid]);
// Use the responsive image formatter linked to file formatter.
$display_options = array(
$display_options = [
'type' => 'responsive_image',
'settings' => array(
'settings' => [
'image_link' => '',
'responsive_image_style' => 'style_one',
),
);
],
];
$display = entity_get_display('node', 'article', 'default');
$display->setComponent($field_name, $display_options)
->save();
@ -408,31 +404,31 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
public function testResponsiveImageFieldFormattersOneSource() {
$this->responsiveImgStyle
// Test the output of an empty media query.
->addImageStyleMapping('responsive_image_test_module.empty', '1x', array(
->addImageStyleMapping('responsive_image_test_module.empty', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'medium',
))
->addImageStyleMapping('responsive_image_test_module.empty', '2x', array(
])
->addImageStyleMapping('responsive_image_test_module.empty', '2x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'large',
))
])
->save();
$node_storage = $this->container->get('entity.manager')->getStorage('node');
$field_name = Unicode::strtolower($this->randomMachineName());
$this->createImageField($field_name, 'article', array('uri_scheme' => 'public'));
$this->createImageField($field_name, 'article', ['uri_scheme' => 'public']);
// Create a new node with an image attached.
$test_image = current($this->drupalGetTestFiles('image'));
$nid = $this->uploadNodeImage($test_image, $field_name, 'article', $this->randomMachineName());
$node_storage->resetCache(array($nid));
$node_storage->resetCache([$nid]);
// Use the responsive image formatter linked to file formatter.
$display_options = array(
$display_options = [
'type' => 'responsive_image',
'settings' => array(
'settings' => [
'image_link' => '',
'responsive_image_style' => 'style_one',
),
);
],
];
$display = entity_get_display('node', 'article', 'default');
$display->setComponent($field_name, $display_options)
->save();
@ -456,19 +452,19 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
*/
private function assertResponsiveImageFieldFormattersLink($link_type) {
$field_name = Unicode::strtolower($this->randomMachineName());
$field_settings = array('alt_field_required' => 0);
$this->createImageField($field_name, 'article', array('uri_scheme' => 'public'), $field_settings);
$field_settings = ['alt_field_required' => 0];
$this->createImageField($field_name, 'article', ['uri_scheme' => 'public'], $field_settings);
// Create a new node with an image attached.
$test_image = current($this->drupalGetTestFiles('image'));
// Test the image linked to file formatter.
$display_options = array(
$display_options = [
'type' => 'responsive_image',
'settings' => array(
'settings' => [
'image_link' => $link_type,
'responsive_image_style' => 'style_one',
),
);
],
];
entity_get_display('node', 'article', 'default')
->setComponent($field_name, $display_options)
->save();
@ -479,17 +475,17 @@ class ResponsiveImageFieldDisplayTest extends ImageFieldTestBase {
$this->assertPattern('/picture/');
$nid = $this->uploadNodeImage($test_image, $field_name, 'article');
$this->container->get('entity.manager')->getStorage('node')->resetCache(array($nid));
$this->container->get('entity.manager')->getStorage('node')->resetCache([$nid]);
$node = Node::load($nid);
// Use the responsive image formatter linked to file formatter.
$display_options = array(
$display_options = [
'type' => 'responsive_image',
'settings' => array(
'settings' => [
'image_link' => $link_type,
'responsive_image_style' => 'style_one',
),
);
],
];
entity_get_display('node', 'article', 'default')
->setComponent($field_name, $display_options)
->save();

54
web/core/modules/responsive_image/src/Tests/ResponsiveImageFieldUiTest.php
View file

@ -21,7 +21,7 @@ class ResponsiveImageFieldUiTest extends WebTestBase {
*
* @var array
*/
public static $modules = array('node', 'field_ui', 'image', 'responsive_image', 'responsive_image_test_module', 'block');
public static $modules = ['node', 'field_ui', 'image', 'responsive_image', 'responsive_image_test_module', 'block'];
/**
* {@inheritdoc}
@ -30,19 +30,19 @@ class ResponsiveImageFieldUiTest extends WebTestBase {
parent::setUp();
$this->drupalPlaceBlock('system_breadcrumb_block');
// Create a test user.
$admin_user = $this->drupalCreateUser(array('access content', 'administer content types', 'administer node fields', 'administer node form display', 'administer node display', 'bypass node access'));
$admin_user = $this->drupalCreateUser(['access content', 'administer content types', 'administer node fields', 'administer node form display', 'administer node display', 'bypass node access']);
$this->drupalLogin($admin_user);
// Create content type, with underscores.
$type_name = strtolower($this->randomMachineName(8)) . '_test';
$type = $this->drupalCreateContentType(array('name' => $type_name, 'type' => $type_name));
$type = $this->drupalCreateContentType(['name' => $type_name, 'type' => $type_name]);
$this->type = $type->id();
}
/**
* Tests formatter settings.
*/
function testResponsiveImageFormatterUI() {
public function testResponsiveImageFormatterUI() {
$manage_fields = 'admin/structure/types/manage/' . $this->type;
$manage_display = $manage_fields . '/display';
@ -52,35 +52,39 @@ class ResponsiveImageFieldUiTest extends WebTestBase {
$this->drupalGet($manage_display);
// 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')));
$edit = [
'fields[field_image][type]' => 'responsive_image',
'fields[field_image][region]' => 'content',
'refresh_rows' => 'field_image',
];
$this->drupalPostAjaxForm(NULL, $edit, ['op' => t('Refresh')]);
$this->assertText("Select a responsive image style.", 'The expected summary is displayed.');
// Submit the form.
$this->drupalPostForm(NULL, array(), t('Save'));
$this->drupalPostForm(NULL, [], t('Save'));
$this->assertText("Select a responsive image style.", 'The expected summary is displayed.');
// Create responsive image styles.
$responsive_image_style = ResponsiveImageStyle::create(array(
$responsive_image_style = ResponsiveImageStyle::create([
'id' => 'style_one',
'label' => 'Style One',
'breakpoint_group' => 'responsive_image_test_module',
'fallback_image_style' => 'thumbnail',
));
]);
$responsive_image_style
->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array(
->addImageStyleMapping('responsive_image_test_module.mobile', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'thumbnail',
))
->addImageStyleMapping('responsive_image_test_module.narrow', '1x', array(
])
->addImageStyleMapping('responsive_image_test_module.narrow', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'medium'
))
])
// Test the normal output of mapping to an image style.
->addImageStyleMapping('responsive_image_test_module.wide', '1x', array(
->addImageStyleMapping('responsive_image_test_module.wide', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'large',
))
])
->save();
\Drupal::entityManager()->clearCachedFieldDefinitions();
// Refresh the page.
@ -89,38 +93,38 @@ class ResponsiveImageFieldUiTest extends WebTestBase {
// Click on the formatter settings button to open the formatter settings
// form.
$this->drupalPostAjaxForm(NULL, array(), "field_image_settings_edit");
$this->drupalPostAjaxForm(NULL, [], "field_image_settings_edit");
// Assert that the correct fields are present.
$fieldnames = array(
$fieldnames = [
'fields[field_image][settings_edit_form][settings][responsive_image_style]',
'fields[field_image][settings_edit_form][settings][image_link]',
);
];
foreach ($fieldnames as $fieldname) {
$this->assertField($fieldname);
}
$edit = array(
$edit = [
'fields[field_image][settings_edit_form][settings][responsive_image_style]' => 'style_one',
'fields[field_image][settings_edit_form][settings][image_link]' => 'content',
);
];
$this->drupalPostAjaxForm(NULL, $edit, "field_image_plugin_settings_update");
// Save the form to save the settings.
$this->drupalPostForm(NULL, array(), t('Save'));
$this->drupalPostForm(NULL, [], t('Save'));
$this->assertText('Responsive image style: Style One');
$this->assertText('Linked to content');
// Click on the formatter settings button to open the formatter settings
// form.
$this->drupalPostAjaxForm(NULL, array(), "field_image_settings_edit");
$edit = array(
$this->drupalPostAjaxForm(NULL, [], "field_image_settings_edit");
$edit = [
'fields[field_image][settings_edit_form][settings][responsive_image_style]' => 'style_one',
'fields[field_image][settings_edit_form][settings][image_link]' => 'file',
);
];
$this->drupalPostAjaxForm(NULL, $edit, "field_image_plugin_settings_update");
// Save the form to save the third party settings.
$this->drupalPostForm(NULL, array(), t('Save'));
$this->drupalPostForm(NULL, [], t('Save'));
$this->assertText('Responsive image style: Style One');
$this->assertText('Linked to file');
}

228
web/core/modules/responsive_image/tests/src/Unit/ResponsiveImageStyleConfigEntityUnitTest.php
View file

@ -39,8 +39,8 @@ class ResponsiveImageStyleConfigEntityUnitTest extends UnitTestCase {
protected function setUp() {
$this->entityType = $this->getMock('\Drupal\Core\Entity\EntityTypeInterface');
$this->entityType->expects($this->any())
->method('getProvider')
->will($this->returnValue('responsive_image'));
->method('getProvider')
->will($this->returnValue('responsive_image'));
$this->entityManager = $this->getMock('\Drupal\Core\Entity\EntityManagerInterface');
$this->entityManager->expects($this->any())
@ -101,7 +101,7 @@ class ResponsiveImageStyleConfigEntityUnitTest extends UnitTestCase {
$this->breakpointManager->expects($this->any())
->method('getGroupProviders')
->with('test_group')
->willReturn(array('bartik' => 'theme', 'toolbar' => 'module'));
->willReturn(['bartik' => 'theme', 'toolbar' => 'module']);
$dependencies = $entity->calculateDependencies()->getDependencies();
$this->assertEquals(['toolbar'], $dependencies['module']);
@ -114,49 +114,49 @@ class ResponsiveImageStyleConfigEntityUnitTest extends UnitTestCase {
* @covers ::hasImageStyleMappings
*/
public function testHasImageStyleMappings() {
$entity = new ResponsiveImageStyle(array());
$entity = new ResponsiveImageStyle([]);
$this->assertFalse($entity->hasImageStyleMappings());
$entity->addImageStyleMapping('test_breakpoint', '1x', array(
$entity->addImageStyleMapping('test_breakpoint', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => '',
));
]);
$this->assertFalse($entity->hasImageStyleMappings());
$entity->removeImageStyleMappings();
$entity->addImageStyleMapping('test_breakpoint', '1x', array(
$entity->addImageStyleMapping('test_breakpoint', '1x', [
'image_mapping_type' => 'sizes',
'image_mapping' => array(
'image_mapping' => [
'sizes' => '(min-width:700px) 700px, 100vw',
'sizes_image_styles' => array(),
),
));
'sizes_image_styles' => [],
],
]);
$this->assertFalse($entity->hasImageStyleMappings());
$entity->removeImageStyleMappings();
$entity->addImageStyleMapping('test_breakpoint', '1x', array(
$entity->addImageStyleMapping('test_breakpoint', '1x', [
'image_mapping_type' => 'sizes',
'image_mapping' => array(
'image_mapping' => [
'sizes' => '',
'sizes_image_styles' => array(
'sizes_image_styles' => [
'large' => 'large',
),
),
));
],
],
]);
$this->assertFalse($entity->hasImageStyleMappings());
$entity->removeImageStyleMappings();
$entity->addImageStyleMapping('test_breakpoint', '1x', array(
$entity->addImageStyleMapping('test_breakpoint', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'large',
));
]);
$this->assertTrue($entity->hasImageStyleMappings());
$entity->removeImageStyleMappings();
$entity->addImageStyleMapping('test_breakpoint', '1x', array(
$entity->addImageStyleMapping('test_breakpoint', '1x', [
'image_mapping_type' => 'sizes',
'image_mapping' => array(
'image_mapping' => [
'sizes' => '(min-width:700px) 700px, 100vw',
'sizes_image_styles' => array(
'sizes_image_styles' => [
'large' => 'large',
),
),
));
],
],
]);
$this->assertTrue($entity->hasImageStyleMappings());
}
@ -165,17 +165,17 @@ class ResponsiveImageStyleConfigEntityUnitTest extends UnitTestCase {
* @covers ::getImageStyleMapping
*/
public function testGetImageStyleMapping() {
$entity = new ResponsiveImageStyle(array(''));
$entity->addImageStyleMapping('test_breakpoint', '1x', array(
$entity = new ResponsiveImageStyle(['']);
$entity->addImageStyleMapping('test_breakpoint', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'large',
));
$expected = array(
]);
$expected = [
'breakpoint_id' => 'test_breakpoint',
'multiplier' => '1x',
'image_mapping_type' => 'image_style',
'image_mapping' => 'large',
);
];
$this->assertEquals($expected, $entity->getImageStyleMapping('test_breakpoint', '1x'));
$this->assertNull($entity->getImageStyleMapping('test_unknown_breakpoint', '1x'));
}
@ -185,90 +185,90 @@ class ResponsiveImageStyleConfigEntityUnitTest extends UnitTestCase {
* @covers ::getKeyedImageStyleMappings
*/
public function testGetKeyedImageStyleMappings() {
$entity = new ResponsiveImageStyle(array(''));
$entity->addImageStyleMapping('test_breakpoint', '1x', array(
$entity = new ResponsiveImageStyle(['']);
$entity->addImageStyleMapping('test_breakpoint', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'large',
));
$entity->addImageStyleMapping('test_breakpoint', '2x', array(
]);
$entity->addImageStyleMapping('test_breakpoint', '2x', [
'image_mapping_type' => 'sizes',
'image_mapping' => array(
'image_mapping' => [
'sizes' => '(min-width:700px) 700px, 100vw',
'sizes_image_styles' => array(
'sizes_image_styles' => [
'large' => 'large',
),
),
));
$entity->addImageStyleMapping('test_breakpoint2', '1x', array(
],
],
]);
$entity->addImageStyleMapping('test_breakpoint2', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'thumbnail',
));
$entity->addImageStyleMapping('test_breakpoint2', '2x', array(
]);
$entity->addImageStyleMapping('test_breakpoint2', '2x', [
'image_mapping_type' => 'image_style',
'image_mapping' => '_original image_',
));
]);
$expected = array(
'test_breakpoint' => array(
'1x' => array(
$expected = [
'test_breakpoint' => [
'1x' => [
'breakpoint_id' => 'test_breakpoint',
'multiplier' => '1x',
'image_mapping_type' => 'image_style',
'image_mapping' => 'large',
),
'2x' => array(
],
'2x' => [
'breakpoint_id' => 'test_breakpoint',
'multiplier' => '2x',
'image_mapping_type' => 'sizes',
'image_mapping' => array(
'image_mapping' => [
'sizes' => '(min-width:700px) 700px, 100vw',
'sizes_image_styles' => array(
'sizes_image_styles' => [
'large' => 'large',
),
),
),
),
'test_breakpoint2' => array(
'1x' => array(
],
],
],
],
'test_breakpoint2' => [
'1x' => [
'breakpoint_id' => 'test_breakpoint2',
'multiplier' => '1x',
'image_mapping_type' => 'image_style',
'image_mapping' => 'thumbnail',
),
'2x' => array(
],
'2x' => [
'breakpoint_id' => 'test_breakpoint2',
'multiplier' => '2x',
'image_mapping_type' => 'image_style',
'image_mapping' => '_original image_',
),
)
);
],
]
];
$this->assertEquals($expected, $entity->getKeyedImageStyleMappings());
// Add another mapping to ensure keyed mapping static cache is rebuilt.
$entity->addImageStyleMapping('test_breakpoint2', '2x', array(
$entity->addImageStyleMapping('test_breakpoint2', '2x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'medium',
));
$expected['test_breakpoint2']['2x'] = array(
]);
$expected['test_breakpoint2']['2x'] = [
'breakpoint_id' => 'test_breakpoint2',
'multiplier' => '2x',
'image_mapping_type' => 'image_style',
'image_mapping' => 'medium',
);
];
$this->assertEquals($expected, $entity->getKeyedImageStyleMappings());
// Overwrite a mapping to ensure keyed mapping static cache is rebuilt.
$entity->addImageStyleMapping('test_breakpoint2', '2x', array(
$entity->addImageStyleMapping('test_breakpoint2', '2x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'large',
));
$expected['test_breakpoint2']['2x'] = array(
]);
$expected['test_breakpoint2']['2x'] = [
'breakpoint_id' => 'test_breakpoint2',
'multiplier' => '2x',
'image_mapping_type' => 'image_style',
'image_mapping' => 'large',
);
];
$this->assertEquals($expected, $entity->getKeyedImageStyleMappings());
}
@ -277,50 +277,50 @@ class ResponsiveImageStyleConfigEntityUnitTest extends UnitTestCase {
* @covers ::getImageStyleMappings
*/
public function testGetImageStyleMappings() {
$entity = new ResponsiveImageStyle(array(''));
$entity->addImageStyleMapping('test_breakpoint', '1x', array(
$entity = new ResponsiveImageStyle(['']);
$entity->addImageStyleMapping('test_breakpoint', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'large',
));
$entity->addImageStyleMapping('test_breakpoint', '2x', array(
]);
$entity->addImageStyleMapping('test_breakpoint', '2x', [
'image_mapping_type' => 'sizes',
'image_mapping' => array(
'image_mapping' => [
'sizes' => '(min-width:700px) 700px, 100vw',
'sizes_image_styles' => array(
'sizes_image_styles' => [
'large' => 'large',
),
),
));
$entity->addImageStyleMapping('test_breakpoint2', '1x', array(
],
],
]);
$entity->addImageStyleMapping('test_breakpoint2', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'thumbnail',
));
]);
$expected = array(
array(
$expected = [
[
'breakpoint_id' => 'test_breakpoint',
'multiplier' => '1x',
'image_mapping_type' => 'image_style',
'image_mapping' => 'large',
),
array(
],
[
'breakpoint_id' => 'test_breakpoint',
'multiplier' => '2x',
'image_mapping_type' => 'sizes',
'image_mapping' => array(
'image_mapping' => [
'sizes' => '(min-width:700px) 700px, 100vw',
'sizes_image_styles' => array(
'sizes_image_styles' => [
'large' => 'large',
),
),
),
array(
],
],
],
[
'breakpoint_id' => 'test_breakpoint2',
'multiplier' => '1x',
'image_mapping_type' => 'image_style',
'image_mapping' => 'thumbnail',
),
);
],
];
$this->assertEquals($expected, $entity->getImageStyleMappings());
}
@ -329,24 +329,24 @@ class ResponsiveImageStyleConfigEntityUnitTest extends UnitTestCase {
* @covers ::removeImageStyleMappings
*/
public function testRemoveImageStyleMappings() {
$entity = new ResponsiveImageStyle(array(''));
$entity->addImageStyleMapping('test_breakpoint', '1x', array(
$entity = new ResponsiveImageStyle(['']);
$entity->addImageStyleMapping('test_breakpoint', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'large',
));
$entity->addImageStyleMapping('test_breakpoint', '2x', array(
]);
$entity->addImageStyleMapping('test_breakpoint', '2x', [
'image_mapping_type' => 'sizes',
'image_mapping' => array(
'image_mapping' => [
'sizes' => '(min-width:700px) 700px, 100vw',
'sizes_image_styles' => array(
'sizes_image_styles' => [
'large' => 'large',
),
),
));
$entity->addImageStyleMapping('test_breakpoint2', '1x', array(
],
],
]);
$entity->addImageStyleMapping('test_breakpoint2', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'thumbnail',
));
]);
$this->assertTrue($entity->hasImageStyleMappings());
$entity->removeImageStyleMappings();
@ -360,24 +360,24 @@ class ResponsiveImageStyleConfigEntityUnitTest extends UnitTestCase {
* @covers ::getBreakpointGroup
*/
public function testSetBreakpointGroup() {
$entity = new ResponsiveImageStyle(array('breakpoint_group' => 'test_group'));
$entity->addImageStyleMapping('test_breakpoint', '1x', array(
$entity = new ResponsiveImageStyle(['breakpoint_group' => 'test_group']);
$entity->addImageStyleMapping('test_breakpoint', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'large',
));
$entity->addImageStyleMapping('test_breakpoint', '2x', array(
]);
$entity->addImageStyleMapping('test_breakpoint', '2x', [
'image_mapping_type' => 'sizes',
'image_mapping' => array(
'image_mapping' => [
'sizes' => '(min-width:700px) 700px, 100vw',
'sizes_image_styles' => array(
'sizes_image_styles' => [
'large' => 'large',
),
),
));
$entity->addImageStyleMapping('test_breakpoint2', '1x', array(
],
],
]);
$entity->addImageStyleMapping('test_breakpoint2', '1x', [
'image_mapping_type' => 'image_style',
'image_mapping' => 'thumbnail',
));
]);
// Ensure that setting to same group does not remove mappings.
$entity->setBreakpointGroup('test_group');