? ? Pending

User tests: Successful: Unsuccessful:

avatar ryandemmer
ryandemmer
13 Oct 2017

Summary of Changes

With reference to #18269 and #18273 this PR updates the srcset URL conversion to correctly identify each srcset url based on https://html.spec.whatwg.org/multipage/images.html#image-candidate-string

So, the following srcset values should be correctly converted

srcset="images/responsive/winter-hd.jpg 2x, images/responsive/winter-2x.jpg 1.5x, images/responsive/winter.jpg 1x"

and

srcset="images/responsive/winter-hd.jpg, images/responsive/winter-2x.jpg 1.5x, images/responsive/winter.jpg 1x"

and

srcset="images/responsive/winter-hd.jpg,images/responsive/winter-2x.jpg 1.5x,images/responsive/winter.jpg 1x"

and variations thereof, including instances where the url contains a comma, eg: https://res.cloudinary.com/demo/image/upload/w_133,h_133,c_thumb,g_face/bike.jpg

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

See #18269 and #18273

Documentation Changes Required

None

Votes

# of Users Experiencing Issue
1/1
Average Importance Score
5.00

avatar joomla-cms-bot joomla-cms-bot - change - 13 Oct 2017
Category Front End Plugins
avatar ryandemmer ryandemmer - open - 13 Oct 2017
avatar ryandemmer ryandemmer - change - 13 Oct 2017
Status New Pending
avatar ryandemmer ryandemmer - change - 13 Oct 2017
Labels Added: ?
avatar steffans
steffans - comment - 13 Oct 2017

@ryandemmer This works, i tuned the regex a bit. Here is my proposal:

preg_match_all('#(?:[^\s]+)\s*(?:[\d\.]+[wx])?(?:\,\s*)?#i', $match[1], $matches);

foreach ($matches[0] as &$src)
{
    $src = preg_replace('#^(?!/|' . $protocols . '|\#|\')(.+)#', $base . '$1', $src);
}

return ' srcset="' . implode($matches[0]) . '"';
avatar ryandemmer
ryandemmer - comment - 13 Oct 2017

@steffans - Thanks, that looks OK. Perhaps we can neaten things up a bit like this:

preg_match_all('#(?:[^\s]+)\s*(?:[\d\.]+[wx])?(?:\,\s*)?#i', $match[1], $matches);

foreach ($matches[0] as &$src)
{
    $src = preg_replace('#^(?!/|' . $protocols . '|\#|\')(.+)#', $base . '$1', $src);
    $src = trim($src);
}

return ' srcset="' . implode(' ', $matches[0]) . '"';

The spaces are not required if the url contains a descriptor, but it gives a consistent result if the original value is missing spaces between some urls.

avatar steffans
steffans - comment - 13 Oct 2017

@ryandemmer Sure, this works. My goal was it to keep the original srcset as it was generated without normalizing anything. In your case you can move the trim() as preg_replace $src.

$src = preg_replace('#^(?!/|' . $protocols . '|\#|\')(.+)#', $base . '$1', trim($src));
avatar ryandemmer
ryandemmer - comment - 13 Oct 2017

My goal was it to keep the original srcset as it was generated without normalizing anything

I agree. I will revert the change to use your original code.

avatar OlegKi
OlegKi - comment - 8 Nov 2017

I see that the version 3.8.2 is in preparing. I posted the issue #18269 with the bug report in version 3.8.1 and I have interest that the bug will be fixed. The pull request, which fixes the bug, was prepared almost one month ago. Why it will be not merged? Is there are exist some reason not merging it?

avatar mbabker
mbabker - comment - 8 Nov 2017

Why it will be not merged? Is there are exist some reason not merging it?

All pull requests require tests from two individuals other than the person who created it to test and make sure that it fixes the reported issue without introducing other issues. Most pull requests that don't get merged are usually due to a lack of testing or interest.

avatar OlegKi OlegKi - test_item - 8 Nov 2017 - Tested successfully
avatar OlegKi
OlegKi - comment - 8 Nov 2017

I have tested this item successfully on 022419e

I tested the changes suggested by the pull request and can confirm that it fixes the bug reported in the issue #18269


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

avatar OlegKi
OlegKi - comment - 8 Nov 2017

@mbabker Thank you for clearing! I verified the latest state of changes suggestion by the pull request and everything is working OK.

avatar jseverse jseverse - test_item - 14 Dec 2017 - Tested successfully
avatar jseverse
jseverse - comment - 14 Dec 2017

I have tested this item successfully on 022419e

Srcset broke images on mobile devices with the update to 3.8.2 because the space was trimmed. I added this update and it fixed my broken images.


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

avatar franz-wohlkoenig franz-wohlkoenig - change - 14 Dec 2017
Status Pending Ready to Commit
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 14 Dec 2017

Ready to Commit after two successful tests.

avatar hansspiess
hansspiess - comment - 17 Dec 2017

when will this fix be released?

avatar mbabker mbabker - close - 18 Dec 2017
avatar mbabker mbabker - merge - 18 Dec 2017
avatar mbabker mbabker - change - 18 Dec 2017
Status Ready to Commit Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2017-12-18 03:35:02
Closed_By mbabker
Labels Added: ?

Add a Comment

Login with GitHub to post a comment