Skip to content

Commit

Permalink
Add support for comma separated srcset values in sef.php
Browse files Browse the repository at this point in the history
System - SEF does not support comma separated values when processing the srcset attribute so only the first URL is converted.

This PR removes srcset from the $attributes array on line 120 and processes instances of the attribute separately, splitting the value by a comma and processing each part individually, then returning the value.

For example,

```html
<img src="images/responsive/winter.jpg" srcset="images/responsive/winter-hd.jpg 2x,images/responsive/winter-2x.jpg 1.5x,images/responsive/winter.jpg 1x" alt="winter" />
```
becomes
```html
<img src="/images/responsive/winter.jpg" srcset="/images/responsive/winter-hd.jpg 2x,/images/responsive/winter-2x.jpg 1.5x,/images/responsive/winter.jpg 1x" alt="winter" /> 
```
whereas before, only the first url in the srcset attribute would have been converted, ie:
```html
<img src="/images/responsive/winter.jpg" srcset="/images/responsive/winter-hd.jpg 2x,images/responsive/winter-2x.jpg 1.5x,images/responsive/winter.jpg 1x" alt="winter" />
```
A more elegant solution may be available, but this one appears to work OK.

### Testing Instructions

Create a new article using the following HTML code, or similar. You will need 3 images of different resolutions, or just three different images of any resolution.
 
```html
<img src="images/image1.jpg" srcset="images/image3.jpg 2x,images/image2.jpg 1.5x,images/image1.jpg 1x" alt="" />
```

### Expected result
The image displays correctly in the browser.

### Actual result
With the current sef.php the images will not display correctly in a modern browser. You can check the code using the browser console to see that the srcset values have not all been converted.
  • Loading branch information
Ryan Demmer committed Apr 14, 2017
1 parent 5a455bc commit 94e8212
Showing 1 changed file with 21 additions and 7 deletions.
28 changes: 21 additions & 7 deletions plugins/system/sef/sef.php
Original file line number Diff line number Diff line change
Expand Up @@ -117,16 +117,30 @@ public function onAfterRender()

// Check for all unknown protocals (a protocol must contain at least one alpahnumeric character followed by a ":").
$protocols = '[a-zA-Z0-9\-]+:';
$attributes = array('href=', 'src=', 'srcset=', 'poster=');

foreach ($attributes as $attribute)
$attributes = array('href=', 'src=', 'poster=');
foreach ($attributes as $attribute)
{
if (strpos($buffer, $attribute) !== false)
if (strpos($buffer, $attribute) !== false)
{
$regex = '#\s+' . $attribute . '"(?!/|' . $protocols . '|\#|\')([^"]*)"#m';
$buffer = preg_replace($regex, ' ' . $attribute . '"' . $base . '$1"', $buffer);
$this->checkBuffer($buffer);
}
}

if (strpos($buffer, 'srcset=') !== false)
{
$regex = '#\s+srcset="([^"]+)"#m';
$buffer = preg_replace_callback($regex, function ($match) use ($base, $protocols) {
$data = array();
foreach (explode(",", $match[1]) as $url)
{
$regex = '#\s' . $attribute . '"(?!/|' . $protocols . '|\#|\')([^"]*)"#m';
$buffer = preg_replace($regex, ' ' . $attribute . '"' . $base . '$1"', $buffer);
$this->checkBuffer($buffer);
$data[] = preg_replace('#(?!/|' . $protocols . '|\#|\')([^\s]+)\s+(.*)#', $base . '$1 $2', $url);
}
return ' srcset="' . implode(",", $data) . '"';
}, $buffer);
$this->checkBuffer($buffer);
}

// Replace all unknown protocals in javascript window open events.
Expand Down

0 comments on commit 94e8212

Please sign in to comment.