/** * 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; }