diff --git a/core/modules/responsive_image/responsive_image.module b/core/modules/responsive_image/responsive_image.module
index ea75e5e..3898e14 100644
--- a/core/modules/responsive_image/responsive_image.module
+++ b/core/modules/responsive_image/responsive_image.module
@@ -85,7 +85,6 @@ function responsive_image_theme() {
'attributes' => array(),
'mapping_id' => array(),
),
- 'function' => 'theme_responsive_image',
),
'responsive_image_formatter' => array(
'variables' => array(
@@ -157,7 +156,9 @@ function theme_responsive_image_formatter($variables) {
}
/**
- * Returns HTML for a responsive image.
+ * Prepares variables for a responsive image.
+ *
+ * Default template: responsive-image.html.twig.
*
* @param $variables
* An associative array containing:
@@ -173,7 +174,7 @@ function theme_responsive_image_formatter($variables) {
*
* @ingroup themeable
*/
-function theme_responsive_image($variables) {
+function template_preprocess_responsive_image(&$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/
@@ -187,23 +188,12 @@ function theme_responsive_image($variables) {
}
$image = \Drupal::service('image.factory')->get($variables['uri']);
- $sources = responsive_image_build_source_tags($image, $variables);
- $output = array();
- $output[] = '';
- if (!empty($sources)) {
- // Internet Explorer 9 doesn't recognise source elements that are wrapped in
- // picture tags. See http://scottjehl.github.io/picturefill/#ie9
- $output[] = '';
- foreach ($sources as $source) {
- $output[] = drupal_render($source);
- }
- $output[] = '';
- }
+ $variables['sources'] = responsive_image_build_source_tags($image, $variables);
// Output the fallback image. Use srcset in the fallback image to avoid
// unnecessary preloading of images in older browsers. See
// http://scottjehl.github.io/picturefill/#using-picture and
// http://scottjehl.github.io/picturefill/#gotchas for more information.
- $fallback_image = array(
+ $variables['fallback_image'] = array(
'#theme' => 'image',
'#srcset' => array(
array(
@@ -213,15 +203,12 @@ function theme_responsive_image($variables) {
);
foreach (array('alt', 'title', 'attributes') as $key) {
if (isset($variables[$key])) {
- $fallback_image["#$key"] = $variables[$key];
+ $variables['fallback_image']["#$key"] = $variables[$key];
}
}
- $output[] = drupal_render($fallback_image);
- $output[] = '';
- return SafeMarkup::set(implode("\n", $output));
}
/**
- * Helper function for theme_responsive_image().
+ * Helper function for template_preprocess_responsive_image().
*
* Builds an array of render arrays that will output tags to be used in
* a tag. In other words, this function provides the contents for a
diff --git a/core/modules/responsive_image/templates/responsive-image.html.twig b/core/modules/responsive_image/templates/responsive-image.html.twig
new file mode 100644
index 0000000..b929163
--- /dev/null
+++ b/core/modules/responsive_image/templates/responsive-image.html.twig
@@ -0,0 +1,28 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a tag.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the tag.
+ * - sources: The tags for this tag.
+ * - fallback_image: The fallback
tag to use for this tag.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_responsive_image()
+ *
+ * @ingroup themeable
+ */
+#}
+
+ {% if sources %}
+ {#
+ Internet Explorer 9 doesn't recognise source elements that are wrapped in
+ picture tags. See http://scottjehl.github.io/picturefill/#ie9
+ #}
+
+ {{ sources }}
+
+ {% endif %}
+ {{ fallback_image }}
+