Make your images compatible with Retina Display
Had a little problem with trying to make images that display high res on retina displays. Christopher Webb replied with a link to a canvas example which made me realise this is alot easier than I thought!
Here’s how to make a 100pixel image ready for retina
HTML
<img class="retina" src="http://test.com/image.jpg" height="200px" width="200px" />
CSS
img.retina {
width:100px;
height:auto;
}
Thats it! Make sure the image is actually a decent resolution at 200px to start with so when it’s scaled down the resolution will be ok.
More resources
- Add @×2 to a higher resolution image in the same folder. so the files would be image.jpg for normal but image@x2.jpg for retina display
- -webkit-background-size if the image is in the background
FTP on the Go + FPX image import + txpmobile = textpattern app!
The one main problem with txpmobile is that you can’t upload pictures to the admin, but there are work arounds by using FTP on the go and fpx image import. You can upload an image to the import folder from your gallery and then import via the admin system. The next release of txpmobile will support the import plugin.
I posted a little video showing an image I imported using this method, not as slick as I would like but going somewhere.
Textpattern Mobile Site on a Subdomain
If you have been following my previous textpattern mobile site versions you may be pleased to know that I have new and more solid method of creating a mobile site but on a subdomain, still using the same database.
Create sub domain
This must be on the same host to match the root folder. Either copy the files below to you sub domain or download my commented files and upload.
iPhone site version using Textpattern:Extra
After some further ideas, testing and help from Marty I now have a method that lets iPhone/mobile users to view the full site if they wish.
Things you’ll need
- Detect Mobile User Agents & Browsers Script php script
- chs_cookie Textpattern plugin
- iPhone for testing
First things first
- Upload the mobile_device_detect.php file to your root file on server (you can put anywhere but just need to direct the script to it’s path later.)
- Install the chs_cookie script in the plugin area of textpattern – and remember to turn it on! Seems daft, but I did spend about 20mins wondering why it wasn’t working!
Create a page template and two new sections
I created a page template and called it setmobile, paste this code into into it and save.
iPhone site version using Textpattern
UPDATE: I have written a new post of a newer and slightly more complicated method to display a mobile version – please use this one if it suits you better.
If you use Textpattern and wanted to create an alternative iPhone version for faster and slimed down browsing, then I think I’ve finally done it!
I have been on the quest for this on and off for the last month or two ever since I read(skimmed) over the alternative site version article by the Erskine boys which set me thinking how to replicate this in Textpattern. I am no php programer but know how to copy and paste, and have been searching for the piece of code to serve up a different site for iPhones.