uploading @2x images for mobile site

Hi,

So if I understand correctly, your frame would require an image with the name testImage.jpg be output as testImage@2x.jpg. Is that right?

Instead of modifying cms builder files, we can output this format on the fly. You can still upload the normal file with the name testImage.jpg and then format it like this:

EXAMPLE:

<?php foreach ($record['images'] as $image): ?>

<?php $imageName = basename($image['filename'], ".".$image['extension'])."@2x.".$image['extension']; ?>
//ouptut image

<?php endforeach ?>

So in our example, the variable $imageName would have a value of testImage@2x.jpg

Hope this helps

Another approach is to have your regular images as the first thumbnail in /images/thumb/ and your double size images as the second thumbnail in /images/thumb2/. Then set up a mod_rewrite rule so URL requests so when the user requests /images/thumb/anything@2x.jpg it serves up /images/thumb2/anything.jpg

Does that make sense? And what are all the images sizes you want/need to have available?

Hi Jason,
I see where you are going with this. Trying to wrap my head around it. I think I will need for example:
image@2x.jpg (600x200 pixels)
image.jpg (300x100 pixels)

How do I actually upload both images through the cms? I see where you are renaming the regular image but I will actually need to upload both images. Not sure how renaming the regular image will help if I have to upload two images. I see Dave posted about using the thumbnail area which may work. So I can upload the larger (higher res) image as the first image, automatically create the thumbnail as the regular smaller image. That would upload /uploads/image.jpg and /uploads/thumb/image.jpg. Then how do I code it so that when an iphone 4 is looking for the image@2x.jpg it will use that and if not it will default to the image.jpg. I am trying to grasp what the iphone does vs what the php will do and make them work together. Maybe I am making it harder than it seems? I guess I am thinking both images will have to be in the same folder (for the iphone) since it is looking for one and defaults to the other. Or do I upload one image as image.jpg and one as image2.jpg and then somehow rewrite the image2.jpg to become image@2x.jpg and they both will be in the same directory?

Hi,

I think Dave's solution is probably going to be the one that works for you. If you set up a mod_rewrite in your htaccess file to redirect @2x images to the thumb2 folder.

So if you upload image.jgp, and set the 2nd thumbnail to be twice as big as the first thumbnail, CMS Builder will create these 2 images for you. Then it's just a matter of outputting image@2x.jpg on your page.

Hope this helps

OK, I don't have any experience with mod rewrites. Any advice?

Hi,

Here are some articles that should help get you started:

http://www.workingwith.me.uk/articles/scripting/mod_rewrite
http://www.theadminzone.com/forums/showthread.php?t=7779

Please let us know if you run into any problems.

Thanks,

Hi petejdg,

Another approach (and potentially easier) would be to autodetect the iPad and iPhone4/4S hardware with a simple detection script (try Google's at http://code.google.com/p/php-mobile-detect/) and then load the higher res images using files without using fancy characters (which I think was Daves original idea).

It should be noted, however, that Safari automatically downsamples images being loaded (to save bandwidth) so having the higher resolution images in place of the lower resolution images may not be as beneficial as you might want (check out http://www.tomshardware.com/reviews/ipad-3-benchmark-review,3156-5.html). Unless you're developing a native Retina app, the higher resolution isn't really useable. Yet.

Tom

NB I'm not associated with Tom's Hardware, it's just one of those coincidences.