Commit 73889242 authored by alexpott's avatar alexpott

Issue #2349461 by Jelle_S, mdrummond, attiks, Wim Leers: Move fallback image...

Issue #2349461 by Jelle_S, mdrummond, attiks, Wim Leers: Move fallback image style into the responsive image style entity
parent 629003e3
......@@ -362,6 +362,7 @@ public function doResponsiveImageListTest() {
$edit = array();
$edit['label'] = $this->randomMachineName();
$edit['id'] = strtolower($edit['label']);
$edit['fallback_image_style'] = 'thumbnail';
$this->drupalPostForm('admin/config/media/responsive-image-style/add', $edit, t('Save'));
$this->assertRaw(t('Responsive image style %label saved.', array('%label' => $edit['label'])));
......
......@@ -34,6 +34,9 @@ responsive_image.styles.*:
breakpoint_group:
type: string
label: 'Breakpoint group'
fallback_image_style:
type: string
label: 'Fallback image style'
responsive_image.image_mapping_type.image_style:
type: string
......@@ -61,9 +64,6 @@ field.formatter.settings.responsive_image:
responsive_image_style:
type: string
label: 'Responsive image style'
fallback_image_style:
type: string
label: 'Fallback image style'
image_link:
type: string
label: 'Link image to'
......@@ -77,7 +77,6 @@ function responsive_image_theme() {
return array(
'responsive_image' => array(
'variables' => array(
'style_name' => NULL,
'uri' => NULL,
'width' => NULL,
'height' => NULL,
......@@ -91,7 +90,6 @@ function responsive_image_theme() {
'variables' => array(
'item' => NULL,
'url' => NULL,
'image_style' => NULL,
'responsive_image_style_id' => array(),
),
'function' => 'theme_responsive_image_formatter',
......@@ -105,7 +103,6 @@ function responsive_image_theme() {
* @param array $variables
* An associative array containing:
* - item: An ImageItem object.
* - image_style: An optional image style.
* - responsive_image_style_id: The ID of the responsive image style.
* - url: An optional \Drupal\Core\Url object.
*
......@@ -117,7 +114,6 @@ function theme_responsive_image_formatter($variables) {
$image_formatter = array(
'#theme' => 'image_formatter',
'#item' => $item,
'#image_style' => $variables['image_style'],
'#url' => $variables['url'],
);
return drupal_render($image_formatter);
......@@ -127,7 +123,6 @@ function theme_responsive_image_formatter($variables) {
'#theme' => 'responsive_image',
'#width' => $item->width,
'#height' => $item->height,
'#style_name' => $variables['image_style'],
'#responsive_image_style_id' => $variables['responsive_image_style_id'],
);
if (isset($item->uri)) {
......@@ -163,7 +158,6 @@ function theme_responsive_image_formatter($variables) {
* - title: The title text is displayed when the image is hovered in some
* 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.
* - responsive_image_style_id: The ID of the responsive image style.
*/
function template_preprocess_responsive_image(&$variables) {
......@@ -196,7 +190,7 @@ function template_preprocess_responsive_image(&$variables) {
'#theme' => 'image',
'#srcset' => array(
array(
'uri' => _responsive_image_image_style_url($variables['style_name'], $image->getSource()),
'uri' => _responsive_image_image_style_url($responsive_image_style->getFallbackImageStyle(), $image->getSource()),
),
),
);
......
......@@ -88,6 +88,13 @@ class ResponsiveImageStyle extends ConfigEntityBase implements ResponsiveImageSt
*/
protected $breakpoint_group = '';
/**
* The fallback image style.
*
* @var string
*/
protected $fallback_image_style = '';
/**
* {@inheritdoc}
*/
......@@ -167,6 +174,21 @@ public function getBreakpointGroup() {
return $this->breakpoint_group;
}
/**
* {@inheritdoc}
*/
public function setFallbackImageStyle($fallback_image_style) {
$this->fallback_image_style = $fallback_image_style;
return $this;
}
/**
* {@inheritdoc}
*/
public function getFallbackImageStyle() {
return $this->fallback_image_style;
}
/**
* {@inheritdoc}
*/
......@@ -231,7 +253,7 @@ public function getImageStyleMapping($breakpoint_id, $multiplier) {
* {@inheritdoc}
*/
public function getImageStyleIds() {
$image_styles = [];
$image_styles = [$this->getFallbackImageStyle()];
foreach ($this->getImageStyleMappings() as $image_style_mapping) {
// Only image styles of non-empty mappings should be loaded.
if (!$this::isEmptyImageStyleMapping($image_style_mapping)) {
......
......@@ -94,7 +94,6 @@ public static function create(ContainerInterface $container, array $configuratio
public static function defaultSettings() {
return array(
'responsive_image_style' => '',
'fallback_image_style' => '',
'image_link' => '',
) + parent::defaultSettings();
}
......@@ -121,15 +120,6 @@ public function settingsForm(array $form, FormStateInterface $form_state) {
'#options' => $responsive_image_options,
);
$image_styles = image_style_options(FALSE);
$elements['fallback_image_style'] = array(
'#title' => t('Fallback image style'),
'#type' => 'select',
'#default_value' => $this->getSetting('fallback_image_style'),
'#empty_option' => t('Automatic'),
'#options' => $image_styles,
);
$link_types = array(
'content' => t('Content'),
'file' => t('File'),
......@@ -155,15 +145,6 @@ public function settingsSummary() {
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['']);
if (isset($image_styles[$this->getSetting('fallback_image_style')])) {
$summary[] = t('Fallback Image style: @style', array('@style' => $image_styles[$this->getSetting('fallback_image_style')]));
}
else {
$summary[] = t('Automatic fallback');
}
$link_types = array(
'content' => t('Linked to content'),
'file' => t('Linked to file'),
......@@ -204,13 +185,6 @@ public function viewElements(FieldItemListInterface $items) {
$link_file = TRUE;
}
$fallback_image_style = '';
// Check if the user defined a custom fallback image style.
if ($this->getSetting('fallback_image_style')) {
$fallback_image_style = $this->getSetting('fallback_image_style');
}
// 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();
......@@ -220,18 +194,6 @@ public function viewElements(FieldItemListInterface $items) {
$image_styles_to_load = $responsive_image_style->getImageStyleIds();
}
// If there is a fallback image style, add it to the image styles to load.
if ($fallback_image_style) {
$image_styles_to_load[] = $fallback_image_style;
}
else {
// The <picture> element uses the first matching breakpoint (see
// http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#update-the-source-set
// points 2 and 3). Meaning the breakpoints are sorted from large to
// small. With mobile-first in mind, the fallback image should be the one
// selected for the smallest screen.
$fallback_image_style = end($image_styles_to_load);
}
$image_styles = $this->imageStyleStorage->loadMultiple($image_styles_to_load);
foreach ($image_styles as $image_style) {
$cache_tags = Cache::mergeTags($cache_tags, $image_style->getCacheTags());
......@@ -250,7 +212,6 @@ public function viewElements(FieldItemListInterface $items) {
),
),
'#item' => $file->_referringItem,
'#image_style' => $fallback_image_style,
'#responsive_image_style_id' => $responsive_image_style ? $responsive_image_style->id() : '',
'#url' => $url,
'#cache' => array(
......
......@@ -100,6 +100,15 @@ public function form(array $form, FormStateInterface $form_state) {
$image_styles = image_style_options(TRUE);
$image_styles[RESPONSIVE_IMAGE_EMPTY_IMAGE] = $this->t('- empty image -');
$form['fallback_image_style'] = array(
'#title' => $this->t('Fallback image style'),
'#type' => 'select',
'#default_value' => $responsive_image_style->getFallbackImageStyle(),
'#options' => $image_styles,
'#required' => TRUE,
);
$breakpoints = $this->breakpointManager->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup());
foreach ($breakpoints as $breakpoint_id => $breakpoint) {
foreach ($breakpoint->getMultipliers() as $multiplier) {
......
......@@ -71,6 +71,24 @@ public function setBreakpointGroup($breakpoint_group);
*/
public function getBreakpointGroup();
/**
* Sets the fallback image style for the responsive image style.
*
* @param string $fallback_image_style
* The fallback image style ID.
*
* @return $this
*/
public function setFallbackImageStyle($fallback_image_style);
/**
* Returns the fallback image style ID for the responsive image style.
*
* @return string
* The fallback image style ID.
*/
public function getFallbackImageStyle();
/**
* Gets the image style mapping for a breakpoint ID and multiplier.
*
......
......@@ -51,6 +51,7 @@ public function testResponsiveImageAdmin() {
'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'));
......@@ -65,6 +66,7 @@ public function testResponsiveImageAdmin() {
$this->drupalGet('admin/config/media/responsive-image-style/style_one');
$this->assertFieldByName('label', 'Style One');
$this->assertFieldByName('breakpoint_group', 'responsive_image_test_module');
$this->assertFieldByName('fallback_image_style', 'thumbnail');
$cases = array(
array('mobile', '1x'),
......@@ -84,6 +86,7 @@ public function testResponsiveImageAdmin() {
$edit = array(
'label' => 'Style One',
'breakpoint_group' => 'responsive_image_test_module',
'fallback_image_style' => 'thumbnail',
'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',
......
......@@ -63,6 +63,7 @@ protected function setUp() {
'id' => 'style_one',
'label' => 'Style One',
'breakpoint_group' => 'responsive_image_test_module',
'fallback_image_style' => 'large',
));
}
......@@ -232,8 +233,6 @@ protected function doTestResponsiveImageFieldFormatters($scheme, $empty_styles =
// 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';
$display->setComponent($field_name, $display_options)
->save();
......@@ -345,7 +344,6 @@ public function testResponsiveImageFieldFormattersEmptyMediaQuery() {
'settings' => array(
'image_link' => '',
'responsive_image_style' => 'style_one',
'fallback_image_style' => 'medium',
),
);
$display = entity_get_display('node', 'article', 'default');
......@@ -384,7 +382,6 @@ private function assertResponsiveImageFieldFormattersLink($link_type) {
'settings' => array(
'image_link' => $link_type,
'responsive_image_style' => 'style_one',
'fallback_image_style' => 'large',
),
);
entity_get_display('node', 'article', 'default')
......@@ -406,7 +403,6 @@ private function assertResponsiveImageFieldFormattersLink($link_type) {
'settings' => array(
'image_link' => $link_type,
'responsive_image_style' => 'style_one',
'fallback_image_style' => 'large',
),
);
entity_get_display('node', 'article', 'default')
......
......@@ -69,6 +69,7 @@ function testResponsiveImageFormatterUI() {
'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(
......@@ -97,7 +98,6 @@ function testResponsiveImageFormatterUI() {
// Assert that the correct fields are present.
$fieldnames = array(
'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]',
);
foreach ($fieldnames as $fieldname) {
......@@ -105,7 +105,6 @@ function testResponsiveImageFormatterUI() {
}
$edit = array(
'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',
);
$this->drupalPostAjaxForm(NULL, $edit, "field_image_plugin_settings_update");
......@@ -113,7 +112,6 @@ function testResponsiveImageFormatterUI() {
// Save the form to save the settings.
$this->drupalPostForm(NULL, array(), t('Save'));
$this->assertText('Responsive image style: Style One');
$this->assertText('Fallback Image style: Thumbnail (100×100)');
$this->assertText('Linked to content');
// Click on the formatter settings button to open the formatter settings
......@@ -121,7 +119,6 @@ function testResponsiveImageFormatterUI() {
$this->drupalPostAjaxForm(NULL, array(), "field_image_settings_edit");
$edit = array(
'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',
);
$this->drupalPostAjaxForm(NULL, $edit, "field_image_plugin_settings_update");
......@@ -129,7 +126,6 @@ function testResponsiveImageFormatterUI() {
// Save the form to save the third party settings.
$this->drupalPostForm(NULL, array(), t('Save'));
$this->assertText('Responsive image style: Style One');
$this->assertText('Automatic fallback');
$this->assertText('Linked to file');
}
......
......@@ -67,7 +67,7 @@ protected function setUp() {
public function testCalculateDependencies() {
// Set up image style loading mock.
$styles = [];
foreach (['small', 'medium', 'large'] as $style) {
foreach (['fallback', 'small', 'medium', 'large'] as $style) {
$mock = $this->getMock('Drupal\Core\Config\Entity\ConfigEntityInterface');
$mock->expects($this->any())
->method('getConfigDependencyName')
......@@ -90,6 +90,7 @@ public function testCalculateDependencies() {
$entity = new ResponsiveImageStyle(['breakpoint_group' => 'test_group']);
$entity->setBreakpointGroup('test_group');
$entity->setFallbackImageStyle('fallback');
$entity->addImageStyleMapping('test_breakpoint', '1x', ['image_mapping_type' => 'image_style', 'image_mapping' => 'small']);
$entity->addImageStyleMapping('test_breakpoint', '2x', [
'image_mapping_type' => 'sizes',
......@@ -110,7 +111,7 @@ public function testCalculateDependencies() {
$dependencies = $entity->calculateDependencies();
$this->assertEquals(['toolbar'], $dependencies['module']);
$this->assertEquals(['bartik'], $dependencies['theme']);
$this->assertEquals(['image.style.large', 'image.style.medium', 'image.style.small'], $dependencies['config']);
$this->assertEquals(['image.style.fallback', 'image.style.large', 'image.style.medium', 'image.style.small'], $dependencies['config']);
}
/**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment