image field changes file name

[adinuno]

Hi there,

When I upload my files on the image field, it changes their name and uploads a file with a different name.

In this case I am building a Retina ready site and I really need these files t be uploaded as they are.

Their names end with '@2x', so 'file@2x.png' could be an example, but when I upload it, the file that appears on the assets/files/ folder is named 'file_2x.png'.

How can I control this?

Thanks

[kongondo]

I think that's the sanitizer at work. Can't think of a solution atm, but am sure somebody else will give you a better answer

[adrian]

It doesn't really help you, but this is the culprit line:

https://github.com/ryancramerdesign/ProcessWire/blob/a8024bb49785370aa2e3867bd683094663cfeabf/wire/core/Pagefiles.php#L264

Ryan may consider adding @ to the list of allowed characters. I don't think there are any reasons why it needs to be removed.

I think historically it wasn't allowed in filenames, but now should be fine.

Some more reading:

http://en.wikipedia.org/wiki/Filename#Comparison%5Fof%5Ffile%5Fname%5Flimitations

http://superuser.com/questions/358855/what-characters-are-safe-in-cross-platform-file-names-for-linux-windows-and-os

[adinuno]

Indeed it should already permit the '@' usage. It should definitely be included on a future update, since it is having its own importance on retina support nowadays.

Thanks for the help guys

(sorry for the long delay, but for some unknown reason I wasn't notified of your contributions, even though I have e-mail notifications on )

[BUCKHORN]

You can create a repeater and allow users to upload a normal version of an image and a hd version. You won't need retina.js, however you'll need to pull out the hd detection and put it in a custom script that sets a session var or cookie or passes the variable to php via other methods json or ajax. 

<script>
// hd detection
// if hd enabled, set a cookie
</script>

Then when you loop through the repeater...

foreach ($images_repeater as $image) {
    if (($_COOKIE['hd'] === true) && ($image->hd_image)) {
        //show hd image
    } else {
        //show normal image
    }
}

You could also just upload the HD version and let PW create the normal sized image. 

foreach($page->images as $image) {
    $hd = $image->width(500); 
    $normal = $image->size(250);
    
    if ($_COOKIE['hd'] === true) {
        echo '<img src="{$hd->url}">';
    } else {
        echo '<img src="{$normal->url}">';
    }
}

[adinuno]

It doesn't really help you, but this is the culprit line:

https://github.com/ryancramerdesign/ProcessWire/blob/a8024bb49785370aa2e3867bd683094663cfeabf/wire/core/Pagefiles.php#L264

Ryan may consider adding @ to the list of allowed characters. I don't think there are any reasons why it needs to be removed.

I think historically it wasn't allowed in filenames, but now should be fine.

Some more reading:

http://en.wikipedia.org/wiki/Filename#Comparison%5Fof%5Ffile%5Fname%5Flimitations

http://superuser.com/questions/358855/what-characters-are-safe-in-cross-platform-file-names-for-linux-windows-and-os

I have tested this, replacing the line with:

$basename = preg_replace('/[^-_.a-zA-Z0-9@]/', '_', $basename); 
 

But it doesn't solve the problem and every image with a name ending in @2x.png will end up being uploaded as _2x.png

Any help?

Thanks

[BUCKHORN]

There's a transliteration check box in the field config that rewrites the filename. If it's checked, that could be your problem.

[adinuno]

There's a transliteration check box in the field config that rewrites the filename. If it's checked, that could be your problem.

Where can I find this option? I checked the input field and found nothing related to this.

[BUCKHORN]

Sorry, i was calling it by the wrong name. Details tab: Entity encode file description/tags?

[adinuno]

Sorry, i was calling it by the wrong name. Details tab: Entity encode file description/tags?

I have tried this with that option checked and unchecked. The result is the same, I upload the image and it changes from it's original name image@2x.png to image_2x.png

Any other solutions on this?

[adrian]

Ok, I tracked down the problem.

You would need to also edit this line to allow @:

https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/core/Upload.php#L200 (or "WireUpload.php if you are using the dev version)

If you do that along with the change I mentioned above in this line:

https://github.com/ryancramerdesign/ProcessWire/blob/a8024bb49785370aa2e3867bd683094663cfeabf/wire/core/Pagefiles.php#L264

it will let the @ go through.

Of course editing the core files is not recommended!

[ryan]

I'm not exactly sure how those retina clients are testing for the existence of the @2x version, but if it's doing it by seeing if the request results in a 404 or not (which is what I'm assuming), then you should be able to accomplish this with an Apache rewrite rule in your .htaccess file:

RewriteRule ^(site/assets/files/[0-9]+/.+)@(2x\.[a-z]+)$ $1_$2

That would convert a request for /site/assets/files/123/filename@2x.jpg to /site/assets/files/filename_2x.jpg