diff --git a/core/modules/picture/lib/Drupal/picture/Plugin/field/formatter/PictureFormatter.php b/core/modules/picture/lib/Drupal/picture/Plugin/field/formatter/PictureFormatter.php
index e53f236..763a809 100644
--- a/core/modules/picture/lib/Drupal/picture/Plugin/field/formatter/PictureFormatter.php
+++ b/core/modules/picture/lib/Drupal/picture/Plugin/field/formatter/PictureFormatter.php
@@ -116,16 +116,10 @@ public function settingsSummary() {
*/
public function viewElements(FieldInterface $items) {
$elements = array();
- // Check if the formatter involves a link.
- if ($this->getSetting('image_link') == 'content') {
- $uri = $items->getEntity()->uri();
- }
- elseif ($this->getSetting('image_link') == 'file') {
- $link_file = TRUE;
- }
$breakpoint_styles = array();
- $fallback_image_style = '';
+ $image_styles = array_keys(image_style_options(FALSE));
+ $fallback_image_style = reset($image_styles);
$picture_mapping = entity_load('picture_mapping', $this->getSetting('picture_mapping'));
if ($picture_mapping) {
@@ -164,22 +158,53 @@ public function viewElements(FieldInterface $items) {
}
foreach ($items as $delta => $item) {
- if (isset($link_file)) {
- $uri = array(
- 'path' => file_create_url($item->entity->getFileUri()),
- 'options' => array(),
- );
+ $item = $item->getValue(TRUE);
+ if (!isset($item['uri']) && isset($item['entity'])) {
+ $item['uri'] = $item['entity']->getFileUri();
}
- $elements[$delta] = array(
- '#theme' => 'picture_formatter',
+ if (isset($item['title']) && drupal_strlen($item['title']) == 0) {
+ unset($item['title']);
+ }
+ $picture = array(
+ '#theme' => 'picture',
+ '#style_name' => $fallback_image_style,
+ '#uri' => $item['uri'],
+ '#width' => $item['width'],
+ '#height' => $item['height'],
+ '#breakpoints' => $breakpoint_styles,
+ '#alt' => isset($item['alt']) ? $item['alt'] : NULL,
+ '#title' => isset($item['title']) ? $item['title'] : NULL,
+ '#attributes' => isset($item['attributes']) ? $item['attributes'] : NULL,
'#attached' => array('library' => array(
array('picture', 'picturefill'),
)),
- '#item' => $item->getValue(TRUE),
- '#image_style' => $fallback_image_style,
- '#breakpoints' => $breakpoint_styles,
- '#path' => isset($uri) ? $uri : '',
);
+
+ // Check if the formatter involves a link.
+ if ($this->getSetting('image_link') == 'content') {
+ $uri = $entity->uri();
+ }
+ elseif ($this->getSetting('image_link') == 'file') {
+ $uri = array(
+ 'path' => file_create_url($item['uri']),
+ 'options' => array(),
+ );
+ }
+
+ if (isset($uri)) {
+ $elements[$delta] = array(
+ '#type' => 'link',
+ '#href' => $uri['path'],
+ '#title' => $picture,
+ '#options' => array(
+ 'html' => TRUE,
+ 'attributes' => isset($uri['attributes']) ? $uri['attributes'] : array(),
+ ),
+ );
+ }
+ else {
+ $elements[$delta] = $picture;
+ }
}
return $elements;
diff --git a/core/modules/picture/lib/Drupal/picture/Tests/PictureFieldDisplayTest.php b/core/modules/picture/lib/Drupal/picture/Tests/PictureFieldDisplayTest.php
index 1e1598a..1fcbfed 100644
--- a/core/modules/picture/lib/Drupal/picture/Tests/PictureFieldDisplayTest.php
+++ b/core/modules/picture/lib/Drupal/picture/Tests/PictureFieldDisplayTest.php
@@ -200,14 +200,13 @@ public function _testPictureFieldFormatters($scheme) {
);
$default_output = '';
$this->drupalGet('node/' . $nid);
- $this->assertRaw($default_output, 'Image style thumbnail formatter displaying correctly on full node view.');
+ $this->assertRaw($default_output, 'Fallback image style (large) printed correctly on full node view.');
if ($scheme == 'private') {
// Log out and try to access the file.
$this->drupalLogout();
$this->drupalGet($large_style->buildUrl($image_uri));
- $this->assertResponse('403', 'Access denied to image style thumbnail as anonymous user.');
+ $this->assertResponse('403', 'Access denied to image style (large) as anonymous user.');
}
}
-
}
diff --git a/core/modules/picture/picture.module b/core/modules/picture/picture.module
index 2a6e6d2..7278449 100644
--- a/core/modules/picture/picture.module
+++ b/core/modules/picture/picture.module
@@ -133,94 +133,30 @@ function picture_theme() {
'attributes' => array(),
'breakpoints' => array(),
),
- ),
- 'picture_formatter' => array(
- 'variables' => array(
- 'item' => NULL,
- 'path' => NULL,
- 'image_style' => NULL,
- 'breakpoints' => array(),
- ),
- ),
- 'picture_source' => array(
- 'variables' => array(
- 'src' => NULL,
- 'srcset' => NULL,
- 'dimensions' => NULL,
- 'media' => NULL,
- ),
+ 'template' => 'picture',
),
);
}
/**
- * Returns HTML for a picture field formatter.
+ * Prepares variables for picture templates.
*
- * @param array $variables
- * An associative array containing:
- * - item: An array of image data.
- * - image_style: An optional image style.
- * - path: An optional array containing the link 'path' and link 'options'.
- * - breakpoints: An array containing breakpoints.
- *
- * @ingroup themeable
- */
-function theme_picture_formatter($variables) {
- if (!isset($variables['breakpoints']) || empty($variables['breakpoints'])) {
- $image_formatter = array(
- '#theme' => 'image_formatter',
- '#item' => $variables['item'],
- '#image_style' => $variables['image_style'],
- '#path' => $variables['path'],
- );
- return drupal_render($image_formatter);
- }
-
- $picture = array(
- '#theme' => 'picture',
- '#width' => $variables['item']['width'],
- '#height' => $variables['item']['height'],
- '#style_name' => $variables['image_style'],
- '#breakpoints' => $variables['breakpoints'],
- );
- if (isset($variables['item']['uri'])) {
- $picture['#uri'] = $variables['item']['uri'];
- }
- elseif (isset($variables['item']['entity'])) {
- $picture['#uri'] = $variables['item']['entity']->getFileUri();
- $picture['#entity'] = $variables['item']['entity'];
- }
- if (isset($variables['item']['alt'])) {
- $picture['#alt'] = $variables['item']['alt'];
- }
- if (isset($variables['item']['title']) && drupal_strlen($variables['item']['title']) != 0) {
- $picture['#title'] = $variables['item']['title'];
- }
- if (isset($variables['path']['path'])) {
- $path = $variables['path']['path'];
- $options = isset($variables['path']['options']) ? $variables['path']['options'] : array();
- $options['html'] = TRUE;
- return l($picture, $path, $options);
- }
-
- return drupal_render($picture);
-}
-
-/**
- * Returns HTML for a picture.
+ * Default template: picture.html.twig.
*
* @param $variables
* An associative array containing:
- * - uri: Either the path of the image file (relative to base_path()) or a
+ * - path: Either the path of the image file (relative to base_path()) or a
* full URL.
* - width: The width of the image (if known).
* - height: The height of the image (if known).
- * - alt: The alternative text for text-based browsers.
* - breakpoints: An array containing breakpoints.
- *
- * @ingroup themeable
+ * - alt: The alternative text for text-based browsers.
+ * - title: The title text is displayed when the image is hovered in some
+ * popular browsers.
+ * - attributes: Attributes for the picture element.
+ * - style_name: The name of the style to be used to alter the original image.
*/
-function theme_picture($variables) {
+function template_preprocess_picture(&$variables) {
// Make sure that width and height are proper values
// If they exists we'll output them
// @see http://www.w3.org/community/respimg/2012/06/18/florians-compromise/
@@ -233,124 +169,93 @@ function theme_picture($variables) {
unset($variables['height']);
}
- $sources = array();
- $output = array();
+ $variables['sources'] = array();
- // Fallback image, output as source with media query.
- $sources[] = array(
- 'src' => entity_load('image_style', $variables['style_name'])->buildUrl($variables['uri']),
- 'dimensions' => picture_get_image_dimensions($variables),
- );
+ // Prepare picture tag attributes.
+ $attributes = array();
+ foreach (array('alt', 'title') as $key) {
+ if (isset($variables[$key])) {
+ $attributes[$key] = $variables[$key];
+ }
+ }
+ $variables['attributes'] = new Attribute($attributes);
- // All breakpoints and multipliers.
- foreach ($variables['breakpoints'] as $breakpoint_name => $multipliers) {
- $breakpoint = breakpoint_load($breakpoint_name);
- if ($breakpoint) {
- $new_sources = array();
- foreach ($multipliers as $multiplier => $image_style) {
- $new_source = $variables;
- $new_source['style_name'] = $image_style;
- $new_source['#multiplier'] = $multiplier;
- $new_sources[] = $new_source;
- }
+ if (!empty($variables['breakpoints'])) {
+ // Fallback image, output as source with media query.
+ $src_attributes = picture_get_image_dimensions($variables);
+ $src_attributes['src'] = entity_load('image_style', $variables['style_name'])->buildUrl($variables['uri']);
+ $variables['sources'][] = array(
+ 'attributes' => new Attribute($src_attributes),
+ );
- // 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']),
- 'dimensions' => picture_get_image_dimensions($new_sources[0]),
- 'media' => $breakpoint->mediaQuery,
- );
- }
- else {
- // 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'];
+ // All breakpoints and multipliers.
+ foreach ($variables['breakpoints'] as $breakpoint_name => $multipliers) {
+ $breakpoint = breakpoint_load($breakpoint_name);
+ if ($breakpoint) {
+ $new_sources = array();
+ foreach ($multipliers as $multiplier => $image_style) {
+ $new_source = $variables;
+ $new_source['style_name'] = $image_style;
+ $new_source['#multiplier'] = $multiplier;
+ $new_sources[] = $new_source;
}
- $sources[] = array(
- 'srcset' => implode(', ', $srcset),
- 'dimensions' => picture_get_image_dimensions($new_sources[0]),
- 'media' => $breakpoint->mediaQuery,
- );
- }
- }
- }
- if (!empty($sources)) {
- $attributes = array();
- foreach (array('alt', 'title') as $key) {
- if (isset($variables[$key])) {
- $attributes[$key] = $variables[$key];
- }
- }
- $output[] = '';
- return implode("\n", $output);
- }
-}
-
-/**
- * Returns HTML for a source tag.
- *
- * @param type $variables
- * An associative array containing:
- * - media: The media query to use.
- * - srcset: The srcset containing the the path of the image file or a full
- * URL and optionally multipliers.
- * - src: Either the path of the image file (relative to base_path()) or a
- * full URL.
- * - dimensions: The width and height of the image (if known).
- *
- * @ingroup themeable
- */
-function theme_picture_source($variables) {
- $output = array();
- if (isset($variables['media']) && !empty($variables['media'])) {
- if (!isset($variables['srcset'])) {
- $output[] = '';
- $output[] = '';
- }
- elseif (!isset($variables['src'])) {
- $output[] = '';
- $output[] = '';
- }
}
else {
- $output[] = '';
- $output[] = '';
+ // No matching picture mapping or style name.
+ $variables['fallback'] = array(
+ '#theme' => 'image',
+ '#uri' => $variables['uri'],
+ '#width' => $variables['width'],
+ '#height' => $variables['height'],
+ '#alt' => isset($variables['alt']) ? $variables['alt'] : NULL,
+ '#title' => isset($variables['title']) ? $variables['title'] : NULL,
+ );
}
- return implode("\n", $output);
+
}
/**
@@ -373,7 +278,9 @@ function picture_get_image_dimensions($variables) {
'height' => $variables['height'],
);
- entity_load('image_style', $variables['style_name'])->transformDimensions($dimensions);
+ if ($image_style = entity_load('image_style', $variables['style_name'])) {
+ $image_style->transformDimensions($dimensions);
+ }
return $dimensions;
}
diff --git a/core/modules/picture/templates/picture.html.twig b/core/modules/picture/templates/picture.html.twig
new file mode 100644
index 0000000..bbd8ef9
--- /dev/null
+++ b/core/modules/picture/templates/picture.html.twig
@@ -0,0 +1,26 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a picture tag.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the picture tag.
+ * - sources: A set of source data.
+ * - source.attributes: HTML attributes for each source tag.
+ * - fallback: Fallback image tag for non-JS browsers.
+ *
+ * @see template_preprocess_picture()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if sources %}
+
+{% else %}
+ {{- fallback -}}
+{% endif %}