? ? Pending

User tests: Successful: Unsuccessful:

avatar ryandemmer
ryandemmer
14 Apr 2017

System - SEF does not support comma separated values when processing the srcset attribute so only the first URL is converted.

Summary of Changes

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.

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.

<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 as all the srcset values are converted.

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.

Documentation Changes Required

None

avatar ryandemmer ryandemmer - open - 14 Apr 2017
avatar ryandemmer ryandemmer - change - 14 Apr 2017
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 14 Apr 2017
Category Front End Plugins
avatar ryandemmer ryandemmer - change - 14 Apr 2017
Labels Added: ?
avatar zero-24
zero-24 - comment - 14 Apr 2017

@ryandemmer please take a look into drone ;) http://213.160.72.75/joomla/joomla-cms/2741 Thanks!

avatar ryandemmer
ryandemmer - comment - 14 Apr 2017

@zero-24 I have no idea what it is on about.

avatar Bakual
Bakual - comment - 14 Apr 2017
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
);
avatar ryandemmer
ryandemmer - comment - 14 Apr 2017

@Bakual Done, but it's still not happy.

Style over substance as far as I'm concerned.

avatar Bakual
Bakual - comment - 14 Apr 2017

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.

avatar david-bettondesign david-bettondesign - test_item - 21 Jun 2017 - Tested successfully
avatar david-bettondesign
david-bettondesign - comment - 21 Jun 2017

I have tested this item successfully on 1049e45


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/15300.

avatar webfeuerflo
webfeuerflo - comment - 22 Aug 2017

I have tested the edited sef.php-file and the srcset-images are working now!

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 22 Aug 2017

@webfeuerflo can you please mark your Test at issue Tracker

avatar webfeuerflo
webfeuerflo - comment - 22 Aug 2017

I am new to github and not sure how to do that!


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/15300.

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 22 Aug 2017
  • Please open Issue Tracker
  • Login with your github-Account
  • Click on blue "Test this"-Button above Authors-Picture
  • mark your Test as successfully
  • hit "submit test result"
avatar webfeuerflo webfeuerflo - test_item - 22 Aug 2017 - Tested successfully
avatar webfeuerflo
webfeuerflo - comment - 22 Aug 2017

I have tested this item successfully on 1049e45

With new sef.php the srcset-images are displayed correctly. did not experience any other issues.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/15300.

avatar webfeuerflo
webfeuerflo - comment - 22 Aug 2017

thank you :-)


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/15300.

avatar franz-wohlkoenig franz-wohlkoenig - change - 22 Aug 2017
Status Pending Ready to Commit
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 22 Aug 2017

RTC after two successful tests.

avatar mbabker mbabker - change - 22 Aug 2017
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: ?
avatar mbabker mbabker - close - 22 Aug 2017
avatar mbabker mbabker - merge - 22 Aug 2017
avatar ryandemmer
ryandemmer - comment - 22 Aug 2017

Thank you!

avatar wronax
wronax - comment - 14 Sep 2017

This modification causes doubled relative root path in the front of each image url in case image url already contains the relative root path. Please see #17919.

avatar ryandemmer
ryandemmer - comment - 14 Sep 2017

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;
}
avatar wronax
wronax - comment - 18 Sep 2017

Could you create PR with this fix ?

avatar wronax
wronax - comment - 20 Sep 2017

Perfect!

Add a Comment

Login with GitHub to post a comment