image name with space, not wrapped in span [#2266837]

I have Picture working great with wysiwyg (thanks!). The client often uploads folders of images via ftp, that naturally bypass transliteration. I've discovered with an image name that contains a space, the saved node does not have the image wrapped in a span (with data-picture-* attributes plus child spans for the image styles). It just keeps the data-picture-* attributes on the img tag, just like it does inside the wysiwyg.

This means I have to either instruct them to fix spaces before uploading to ftp, or have them use imce_uploader with imce_mkdir where the files would go through transliteration. I'd rather accommodate their workflow with less steps, although I prefer transliteration!

I wonder if there's a solution to image names with spaces working with Picture.

CKEditor 4.3.4
Wysiwyg 7.x-2.x-dev (Mar 19)
Picture 7.x-1.x-dev (Nov 1)
Breakpoints 7.x-1.1

Comments

Comment #1

attiks commented 15 May 2014 at 11:25

Is this a specific problem of picture? Sounds like a general problem with spaces?

Comment #2

echoz commented 17 May 2014 at 17:03

Thanks for responding. While I agree that filenames should not be allowed with spaces, I just ran a test (not using Picture) using a file field (with imce_filefield, so it could select a file not previously registered with the content type) and it worked normally entering an existing image with a space in the name (it obviously created %20 for the space) with the same wrapping html as an image name with no space.

So for Picture, does it make sense that when it encounters the space, the resulting html is different as I described (and can anything be done about it)?

Comment #3

attiks commented 19 May 2014 at 08:09

Can you post the HTML code inside the wysiwyg and the rendered code of the page please

Comment #4

echoz commented 20 May 2014 at 22:04

Here's a comparison of an image name with a space, followed by an image name without a space, both simply with the picture group chosen, no alignment set for brevity:

<p><span data-picture="" data-picture-group="half">
<span data-src="http://SITENAME.local/sites/SITENAME/files/styles/medium/public/upload/general/Agave.jpg?itok=zkAf3gLG" data-width="250" data-height="156"></span>
<span data-media="(min-width: 0px)" data-src="http://SITENAME.local/sites/SITENAME/files/styles/resp_half_narrow_1x/public/upload/general/Agave.jpg?itok=RXJeHg7U" data-width="480" data-height="300"></span>
<span data-media="(min-width: 481px)" data-src="http://SITENAME.local/sites/SITENAME/files/styles/resp_half_medium_1x/public/upload/general/Agave.jpg?itok=6E49htZE" data-width="300" data-height="188"></span>
<span data-media="(min-width: 769px)" data-src="http://SITENAME.local/sites/SITENAME/files/styles/resp_half_wide_1x/public/upload/general/Agave.jpg?itok=PGOb9tT9" data-width="300" data-height="188"></span>
<noscript><img typeof="foaf:Image" src="http://SITENAME.local/sites/SITENAME/files/styles/medium/public/upload/general/Agave.jpg?itok=zkAf3gLG" width="250" height="156" alt="" /></noscript>
</span></p>

The one with the space in the name shows the same source as in the wysiwyg, with the data-picture-* attributes on the img tag, no span nor child spans:

<p><img alt="" data-picture-group="half" src="/sites/SITENAME/files/upload/general/Bamboo%20Grove.jpg" /></p>

in the wysiwyg, they both are correct as expected, with the data-picture-* attributes on the img tag:

<p><img alt="" data-picture-group="half" src="/sites/SITENAME/files/upload/general/Agave.jpg" /></p>
<p><img alt="" data-picture-group="half" src="/sites/SITENAME/files/upload/general/Bamboo%20Grove.jpg" /></p>