2c2
< index eb1864d..3b86835 100644
---
> index eb1864d..6353883 100644
25c25
< @@ -163,24 +156,54 @@ public function viewElements(FieldItemListInterface $items) {
---
> @@ -163,22 +156,52 @@ public function viewElements(FieldItemListInterface $items) {
89,92d88
<    }
< -}
< +}
< \ No newline at end of file
116c112
< index 0000000..494e6f4
---
> index 0000000..201a6e6
119c115
< @@ -0,0 +1,115 @@
---
> @@ -0,0 +1,113 @@
152c148
< +   * Tests usage of the theme_picture() function.
---
> +   * Tests usage of the template_preprocess_picture() function.
165,166c161
< +    // Test using theme_picture() with a NULL value for the alt option.
< +    $path = $this->randomName();
---
> +    // Test using template_preprocess_picture() with a NULL value for the alt option.
174,175c169
< +    $expected_result = '<img class="image-style-test" src="' . $url . '" />';
< +    $this->assertTrue(strpos($rendered_element, '<picture>') !== FALSE, 'picture element in theme_picture() correctly renders with a NULL value for the alt option.');
---
> +    $this->assertTrue(strpos($rendered_element, '<picture>') !== FALSE, 'picture element in template_preprocess_picture() correctly renders with a NULL value for the alt option.');
177c171
< +    // Test using theme_picture() without passing a value for the alt option.
---
> +    // Test using template_preprocess_picture() without passing a value for the alt option.
181,182c175,176
< +    $this->assertTrue(strpos($rendered_element, $expected_result) !== FALSE, 'img element in theme_picture() correctly renders the alt option.');
< +    $this->assertTrue(strpos($rendered_element, '<picture alt="">') !== FALSE, 'picture element in theme_picture() correctly renders the alt option.');
---
> +    $this->assertTrue(strpos($rendered_element, $expected_result) !== FALSE, 'img element in template_preprocess_picture() correctly renders the alt option.');
> +    $this->assertTrue(strpos($rendered_element, '<picture alt="">') !== FALSE, 'picture1 element in template_preprocess_picture() correctly renders the alt option.');
211c205
< +    );
---
> +    );$expected_result = '<img class="image-style-test" src="' . $url . '" alt=""/>';
236c230
< index ae676c9..331c6d0 100644
---
> index f7aecac..83d375c 100644
239c233
< @@ -118,94 +118,31 @@ function picture_theme() {
---
> @@ -94,94 +94,31 @@ function picture_theme() {
243c237,238
< -    ),
---
> +      'template' => 'picture',
>      ),
259,264c254,258
< +      'template' => 'picture',
<      ),
<    );
<  }
<  
<  /**
---
> -    ),
> -  );
> -}
> -
> -/**
294c288
< -  );
---
>    );
315,317c309,311
< -}
< -
< -/**
---
>  }
>  
>  /**
345c339
< @@ -218,124 +155,94 @@ function theme_picture($variables) {
---
> @@ -194,124 +131,94 @@ function theme_picture($variables) {
366a361,368
> +
> +  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),
> +    );
379,399d380
< +  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'];
410c391,394
<          }
---
> +        }
>  
> -      // Only one image, use src.
> -      if (count($new_sources) == 1) {
412c396
< -          'srcset' => implode(', ', $srcset),
---
> -          'src' => entity_load('image_style', $new_sources[0]['style_name'])->buildUrl($new_sources[0]['uri']),
417,427c401,405
< -    }
< -  }
<  
< -  if (!empty($sources)) {
< -    $attributes = array();
< -    foreach (array('alt', 'title') as $key) {
< -      if (isset($variables[$key])) {
< -        $attributes[$key] = $variables[$key];
< -      }
< -    }
< -    $output[] = '<picture' . new Attribute($attributes) . '>';
---
> -      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'];
435c413,417
< +        }
---
>          }
> -        $sources[] = array(
> -          'srcset' => implode(', ', $srcset),
> -          'dimensions' => picture_get_image_dimensions($new_sources[0]),
> -          'media' => $breakpoint->mediaQuery,
442,454c424
<  
< -    // Add source tags to the output.
< -    foreach ($sources as $source) {
< -      $picture_source = array(
< -        '#theme' => 'picture_source',
< -        '#src' => $source['src'],
< -        '#dimensions' => $source['dimensions'],
< -      );
< -      if (isset($source['media'])) {
< -        $picture_source['#media'] = $source['media'];
< -      }
< -      if (isset($source['srcset'])) {
< -        $picture_source['#srcset'] = $source['srcset'];
---
> +
470c440
< +        );
---
>          );
472d441
< -      $output[] = drupal_render($picture_source);
473a443,468
> -  }
> -
> -  if (!empty($sources)) {
> -    $attributes = array();
> -    foreach (array('alt', 'title') as $key) {
> -      if (isset($variables[$key])) {
> -        $attributes[$key] = $variables[$key];
> -      }
> -    }
> -    $output[] = '<picture' . new Attribute($attributes) . '>';
> -
> -    // Add source tags to the output.
> -    foreach ($sources as $source) {
> -      $picture_source = array(
> -        '#theme' => 'picture_source',
> -        '#src' => $source['src'],
> -        '#dimensions' => $source['dimensions'],
> -      );
> -      if (isset($source['media'])) {
> -        $picture_source['#media'] = $source['media'];
> -      }
> -      if (isset($source['srcset'])) {
> -        $picture_source['#srcset'] = $source['srcset'];
> -      }
> -      $output[] = drupal_render($picture_source);
> -    }
543c538
< @@ -358,7 +265,9 @@ function picture_get_image_dimensions($variables) {
---
> @@ -334,7 +241,9 @@ function picture_get_image_dimensions($variables) {
553,555c548
< -}
< +}
< \ No newline at end of file
---
>  }