diff --git a/core/modules/responsive_image/lib/Drupal/responsive_image/ResponsiveImageMappingFormController.php b/core/modules/responsive_image/lib/Drupal/responsive_image/ResponsiveImageMappingFormController.php index d27db52..eab6afa 100644 --- a/core/modules/responsive_image/lib/Drupal/responsive_image/ResponsiveImageMappingFormController.php +++ b/core/modules/responsive_image/lib/Drupal/responsive_image/ResponsiveImageMappingFormController.php @@ -71,6 +71,7 @@ public function form(array $form, array &$form_state) { ); $image_styles = image_style_options(TRUE); + $image_styles[RESPONSIVE_IMAGE_EMPTY_IMAGE] = t('- empty image -'); foreach ($responsive_image_mapping->mappings as $breakpoint_id => $mapping) { foreach ($mapping as $multiplier => $image_style) { $breakpoint = $responsive_image_mapping->breakpointGroup->getBreakpointById($breakpoint_id); diff --git a/core/modules/responsive_image/responsive_image.module b/core/modules/responsive_image/responsive_image.module index 5113afc..be59ff2 100644 --- a/core/modules/responsive_image/responsive_image.module +++ b/core/modules/responsive_image/responsive_image.module @@ -8,6 +8,8 @@ use Drupal\responsive_image\Entity\ResponsiveImageMapping; use \Drupal\Core\Template\Attribute; +define('RESPONSIVE_IMAGE_EMPTY_IMAGE', '_empty image_'); + /** * Implements hook_help(). */ @@ -224,7 +226,7 @@ function theme_responsive_image($variables) { // Fallback image, output as source with media query. $sources[] = array( - 'src' => entity_load('image_style', $variables['style_name'])->buildUrl($variables['uri']), + 'src' => _responsive_image_image_style_url($variables['style_name'], $variables['uri']), 'dimensions' => responsive_image_get_image_dimensions($variables), ); @@ -243,7 +245,7 @@ function theme_responsive_image($variables) { // Only one image, use src. if (count($new_sources) == 1) { $sources[] = array( - 'src' => entity_load('image_style', $new_sources[0]['style_name'])->buildUrl($new_sources[0]['uri']), + 'src' => _responsive_image_image_style_url($new_sources[0]['style_name'], $new_sources[0]['uri']), 'dimensions' => responsive_image_get_image_dimensions($new_sources[0]), 'media' => $breakpoint->mediaQuery, ); @@ -252,7 +254,7 @@ function theme_responsive_image($variables) { // Multiple images, use srcset. $srcset = array(); foreach ($new_sources as $new_source) { - $srcset[] = entity_load('image_style', $new_source['style_name'])->buildUrl($new_source['uri']) . ' ' . $new_source['#multiplier']; + $srcset[] = _responsive_image_image_style_url($new_source['style_name'], $new_source['uri']) . ' ' . $new_source['#multiplier']; } $sources[] = array( 'srcset' => implode(', ', $srcset), @@ -353,7 +355,25 @@ function responsive_image_get_image_dimensions($variables) { 'height' => $variables['height'], ); - entity_load('image_style', $variables['style_name'])->transformDimensions($dimensions); + if ($variables['style_name'] == RESPONSIVE_IMAGE_EMPTY_IMAGE) { + $dimensions = array( + 'width' => 1, + 'height' => 1, + ); + } + else { + entity_load('image_style', $variables['style_name'])->transformDimensions($dimensions); + } return $dimensions; } + +/** + * Wrapper around image_style_url() so we can return an empty image. + */ +function _responsive_image_image_style_url($style_name, $path) { + if ($style_name == RESPONSIVE_IMAGE_EMPTY_IMAGE) { + return 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; + } + return entity_load('image_style', $style_name)->buildUrl($path); +}