/**
* Tests formatter settings.
*/
function testResponsiveImageFormatterUI()
{
$manage_fields = 'admin/structure/types/manage/' . $this->type;
$manage_display = $manage_fields . '/display';
// Create a field, and a node with some data for the field.
$this->fieldUIAddNewField($manage_fields, 'image', 'Image field', 'image');
// Display the "Manage display".
$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')));
$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 style.", 'The expected summary is displayed.');
// Create responsive image styles.
$responsive_image_style = ResponsiveImageStyle::create(array('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('image_mapping_type' => 'image_style', 'image_mapping' => 'thumbnail'))->addImageStyleMapping('responsive_image_test_module.narrow', '1x', array('image_mapping_type' => 'image_style', 'image_mapping' => 'medium'))->addImageStyleMapping('responsive_image_test_module.wide', '1x', array('image_mapping_type' => 'image_style', 'image_mapping' => 'large'))->save();
\Drupal::entityManager()->clearCachedFieldDefinitions();
// Refresh the page.
$this->drupalGet($manage_display);
$this->assertText("Select a responsive image style.", 'The expected summary is displayed.');
// Click on the formatter settings button to open the formatter settings
// form.
$this->drupalPostAjaxForm(NULL, array(), "field_image_settings_edit");
// 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][image_link]');
foreach ($fieldnames as $fieldname) {
$this->assertField($fieldname);
}
$edit = array('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->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('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->assertText('Responsive image style: Style One');
$this->assertText('Linked to file');
}
/**
* Tests integration with entity view display.
*/
public function testEntityViewDisplayDependency()
{
// Create a responsive image style.
ResponsiveImageStyle::create(['id' => 'foo', 'label' => 'Foo', 'breakpoint_group' => 'responsive_image_test_module'])->save();
// Create an image field to be used with a responsive image formatter.
FieldStorageConfig::create(['type' => 'image', 'entity_type' => 'entity_test', 'field_name' => 'bar'])->save();
FieldConfig::create(['entity_type' => 'entity_test', 'bundle' => 'entity_test', 'field_name' => 'bar'])->save();
/** @var \Drupal\Core\Entity\Display\EntityViewDisplayInterface $display */
$display = EntityViewDisplay::create(['targetEntityType' => 'entity_test', 'bundle' => 'entity_test', 'mode' => 'default']);
$display->setComponent('bar', ['type' => 'responsive_image', 'label' => 'hidden', 'settings' => ['responsive_image_style' => 'foo', 'image_link' => ''], 'third_party_settings' => []])->save();
// Check that the 'foo' field is on the display.
$this->assertNotNull($display = EntityViewDisplay::load('entity_test.entity_test.default'));
$this->assertTrue($display->getComponent('bar'));
$this->assertArrayNotHasKey('bar', $display->get('hidden'));
// Delete the responsive image style.
ResponsiveImageStyle::load('foo')->delete();
// Check that the view display was not deleted.
$this->assertNotNull($display = EntityViewDisplay::load('entity_test.entity_test.default'));
// Check that the 'foo' field was disabled.
$this->assertNull($display->getComponent('bar'));
$this->assertArrayHasKey('bar', $display->get('hidden'));
}
/**
* Tests responsive image formatter on node display with one source.
*/
public function testResponsiveImageFieldFormattersOneSource()
{
$this->responsiveImgStyle->addImageStyleMapping('responsive_image_test_module.empty', '1x', array('image_mapping_type' => 'image_style', 'image_mapping' => 'medium'))->addImageStyleMapping('responsive_image_test_module.empty', '2x', array('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'));
// 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));
// Use the responsive image formatter linked to file formatter.
$display_options = array('type' => 'responsive_image', 'settings' => array('image_link' => '', 'responsive_image_style' => 'style_one'));
$display = entity_get_display('node', 'article', 'default');
$display->setComponent($field_name, $display_options)->save();
// View the node.
$this->drupalGet('node/' . $nid);
// Assert the media attribute is present if it has a value.
$large_style = ImageStyle::load('large');
$medium_style = ImageStyle::load('medium');
$node = $node_storage->load($nid);
$image_uri = File::load($node->{$field_name}->target_id)->getFileUri();
$this->assertRaw('<img srcset="' . file_url_transform_relative($medium_style->buildUrl($image_uri)) . ' 1x, ' . file_url_transform_relative($large_style->buildUrl($image_uri)) . ' 2x"');
}
/**
* Tests responsive image formatter on node display with an empty media query.
*/
public function testResponsiveImageFieldFormattersEmptyMediaQuery()
{
$this->responsiveImgStyle->addImageStyleMapping('responsive_image_test_module.empty', '1x', array('image_mapping_type' => 'image_style', 'image_mapping' => RESPONSIVE_IMAGE_EMPTY_IMAGE))->addImageStyleMapping('responsive_image_test_module.mobile', '1x', array('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'));
// 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));
// Use the responsive image formatter linked to file formatter.
$display_options = array('type' => 'responsive_image', 'settings' => array('image_link' => '', 'responsive_image_style' => 'style_one'));
$display = entity_get_display('node', 'article', 'default');
$display->setComponent($field_name, $display_options)->save();
// View the node.
$this->drupalGet('node/' . $nid);
// Assert an empty media attribute is not output.
$this->assertNoPattern('@srcset="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== 1x".+?media=".+?/><source@');
// Assert the media attribute is present if it has a value.
$thumbnail_style = ImageStyle::load('thumbnail');
$node = $node_storage->load($nid);
$image_uri = File::load($node->{$field_name}->target_id)->getFileUri();
$this->assertPattern('/srcset="' . preg_quote($thumbnail_style->buildUrl($image_uri), '/') . ' 1x".+?media="\\(min-width: 0px\\)"/');
}
/**
* @covers ::setBreakpointGroup
* @covers ::getBreakpointGroup
*/
public function testSetBreakpointGroup()
{
$entity = new ResponsiveImageStyle(array('breakpoint_group' => 'test_group'));
$entity->addImageStyleMapping('test_breakpoint', '1x', array('image_mapping_type' => 'image_style', 'image_mapping' => 'large'));
$entity->addImageStyleMapping('test_breakpoint', '2x', array('image_mapping_type' => 'sizes', 'image_mapping' => array('sizes' => '(min-width:700px) 700px, 100vw', 'sizes_image_styles' => array('large' => 'large'))));
$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->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->hasImageStyleMappings());
}
/**
* {@inheritdoc}
*/
public function calculateDependencies()
{
$dependencies = parent::calculateDependencies();
$style_id = $this->getSetting('responsive_image_style');
/** @var \Drupal\responsive_image\ResponsiveImageStyleInterface $style */
if ($style_id && ($style = ResponsiveImageStyle::load($style_id))) {
// Add the responsive image style as dependency.
$dependencies[$style->getConfigDependencyKey()][] = $style->getConfigDependencyName();
}
return $dependencies;
}
