User tests: Successful: Unsuccessful:
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,
<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
<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:
<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.
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.
<img src="images/image1.jpg" srcset="images/image3.jpg 2x,images/image2.jpg 1.5x,images/image1.jpg 1x" alt="" />
The image displays correctly in the browser as all the srcset values are converted.
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.
None
Status | New | ⇒ | Pending |
Category | ⇒ | Front End Plugins |
Labels |
Added:
?
|
FILE: /drone/src/github.com/joomla/joomla-cms/plugins/system/sef/sef.php
--------------------------------------------------------------------------------
FOUND 2 ERROR(S) AFFECTING 2 LINE(S)
--------------------------------------------------------------------------------
135 | ERROR | Opening parenthesis of a multi-line function call must be the
| | last content on the line
142 | ERROR | Closing parenthesis of a multi-line function call must be on a
| | line by itself
You will have to rewrite this lines
$buffer = preg_replace_callback($regex, function ($match) use ($base, $protocols) {
$data = array();
foreach (explode(",", $match[1]) as $url)
{
$data[] = preg_replace('#(?!/|' . $protocols . '|\#|\')([^\s]+)\s+(.*)#', $base . '$1 $2', $url);
}
return ' srcset="' . implode(",", $data) . '"';
}, $buffer);
to something like
$buffer = preg_replace_callback(
$regex,
function ($match) use ($base, $protocols)
{
$data = array();
foreach (explode(",", $match[1]) as $url)
{
$data[] = preg_replace('#(?!/|' . $protocols . '|\#|\')([^\s]+)\s+(.*)#', $base . '$1 $2', $url);
}
return ' srcset="' . implode(",", $data) . '"';
},
$buffer
);
Done, but it's still not happy.
Codestyle is fine now. I've restarted drone as it had a hickup with JavaScript something. Now it looks fine.
Style over substance as far as I'm concerned.
To be fair, those lines weren't really easy to read. Not it's much clearer which parts belong together.
So the codestyle rule made sense here.
I have tested this item
I have tested the edited sef.php-file and the srcset-images are working now!
@webfeuerflo can you please mark your Test at issue Tracker
I am new to github and not sure how to do that!
I have tested this item
With new sef.php the srcset-images are displayed correctly. did not experience any other issues.
thank you :-)
Status | Pending | ⇒ | Ready to Commit |
RTC after two successful tests.
Status | Ready to Commit | ⇒ | Fixed in Code Base |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2017-08-22 12:01:41 |
Closed_By | ⇒ | mbabker | |
Labels |
Added:
?
|
Thank you!
The foreach loop could be modified to check the URL for the root path, eg:
foreach (explode(",", $match[1]) as $url)
{
if (strpos($url, $base) === false) {
$url = preg_replace('#(?!/|' . $protocols . '|\#|\')([^\s]+)\s+(.*)#', $base . '$1 $2', $url);
}
$data[] = $url;
}
Could you create PR with this fix ?
Perfect!
@ryandemmer please take a look into drone ;) http://213.160.72.75/joomla/joomla-cms/2741 Thanks!