UPDATE: I added the lines to recognize Android, iPod Touch and Palm WebOS!
Chris, a reader of this website (and a cool photographer, check his website Intelligent Cloud), asked me how I did to setup an iPhone friendly version of ReallyJapan Photoblog and automatically redirect the users with an iPhone to this website.
As you know, ReallyJapan is using Pixelpost, a free photo blog application. Pixelpost has many great templates, and one of them, Hoo is an iPhone optimized template.
The problem is that in Pixelpost control panel you can select only one template, and there’s no option to specify one template for certain users and a different one for the others.
So, while the Hoo template is a great solution for iPhone users, if you configure Pixelpost to use this template, all your users will see the Hoo template, no matter if they’re using iPhone, Internet Explorer, Firefox or a cyberdeck Ono-Sendai (in that case they’ll probably just look to the code).
So, what do we need to do?
Simple: When someone visits our Pixelpost photoblog, check if they’re using iPhone, and just in that case tell Pixelpost to use Hoo template instead of the one we selected in the control panel.
It requires some changes in a php file, but it’s very simple. Let’s start:
- Download Hoo template, unzip it and upload the folder in your web host (/template/)
- Now we need to edit the index.php of your Pixelpost installation (/index.php) to specify the Hoo template just for iPhone users visiting your photoblog.
Remember: Do a backup or something. It’s better safe than sorry if something goes wrong!
A. First thing to do is to Search and Replace All the text $cfgrow['template'] to $template_dir.
$cfgrow['template'] is the variable where the name of the selected template (the one you chose on the Pixelpost control panel) is stored.B. Now Search the file for this text: // get config
You’ll find this code:// get config
if($cfgrow = sql_array(“SELECT * FROM “.$pixelpost_db_prefix.”config”))
{
$upload_dir = $cfgrow['imagepath'];
}else{
$extra_message= “Coming Soon. Not Installed Yet. Cause #1″;
show_splash($extra_message,”templates”);}
What does it do? Ok, basically it’s reading the configuration of your Pixelpost installation from the database (you know all the stuff you selected in Pixelpost control panel like paths, name of the blog and.. the template).
The first case of the IF statement means Pixelpost has been installed while the ELSE case means (as you can see in the extra_message) that.. well, it’s not installed yet.So, let’s add some code here (blue text):
// get config
if($cfgrow = sql_array(“SELECT * FROM “.$pixelpost_db_prefix.”config”))
{if (stristr($_SERVER['HTTP_USER_AGENT'], ‘Android’) ||stristr($_SERVER['HTTP_USER_AGENT'],’webOS’) ||stristr($_SERVER['HTTP_USER_AGENT'],’iPhone’) ||stristr($_SERVER['HTTP_USER_AGENT'],’iPod’)) {$template_dir=”hoo”;
}else{
$template_dir=$cfgrow['template'];
}$upload_dir = $cfgrow['imagepath'];
}else{
$extra_message= “Coming Soon. Not Installed Yet. Cause #1″;
show_splash($extra_message,”templates”);
}Basically: If Pixelpost has been installed (IF case 1), check if the user agent of the visitor is iPhone, iPod, Android or webOS.
In that case set $template_dir to ‘hoo’ (the hoo template, in the folder /template/hoo on your webhosting).
Otherwise set $template_dir to $cfgrow['template'] (the default template you selected on Pixelpost control panel).C. Save the file and..
That’s it!
From now on the iPhone users will see the Hoo template while all the other users will see the default template.
If you have any question please write a comment!
Last
FriendFeed
Twitter
StumbleUpon
Facebook
Digg
Delicious
Youtube
Emmanuel R.
June 23, 2009 at 5:08 pm
iPhone only will be detected (iPhone user agent only). iPod Touch owners may slightly modify your detection script:
// get config
if($cfgrow = sql_array("SELECT * FROM ".$pixelpost_db_prefix."config"))
{
if (stristr($_SERVER['HTTP_USER_AGENT'], 'iPhone')
|| strpos($_SERVER['HTTP_USER_AGENT'], 'iPod')) {
$template_dir='YOUR IPHONE or IPOD TEMPLATE NAME';
}else{
$template_dir=$cfgrow['template'];
}
$upload_dir = $cfgrow['imagepath'];
}else{
$extra_message= "Coming Soon. Not Installed Yet. Cause #1";
show_splash($extra_message,"templates");
}
$template_dir=’YOUR IPHONE or IPOD TEMPLATE NAME’; be aware here with quotes and double quotes
Works perfectly for me.
Thanks for sharing.
robert donovan
August 1, 2009 at 3:52 pm
I’ve followed these instructions exactly but my iPhone still loads the template that full scale browsers are seeing. What could I be missing.
I’ve checked the code so that it perfectly matches the example above.
pixel post 1.7
iPhone 3G
robert donovan
August 1, 2009 at 4:16 pm
Now getting this error
Error:
No template folder exists by the name of “” or the file image_template.html is missing in that folder.
Make sure that you have uploaded all necessary files with the exact same names as mentioned here.
Lefty Rodriguez
August 20, 2009 at 1:49 pm
I’m getting the same error as Robert Donovan is getting. Can anyone help?
Lefty Rodriguez
August 20, 2009 at 2:02 pm
Never mind…I was getting the first error that Robert mentioned, but once I replaced the code with Emmanuel’s, it fixed it. Robert, regarding your second error, make sure that you replace YOUR IPHONE or IPOD TEMPLATE NAME with hoo
MarcoH
November 27, 2009 at 9:13 pm
So okay, you added your I-Devices (I-Phone and I-Pod) but more and more users have all kind of small devices (i run a android based mobile) so my question,
wouldn’t it be better if you check the screen resolution and if it’s less than that much pixels, it should switch to mobile mode?
Blog e photoblog su IPod/IPhone | PuntiDiVista
December 7, 2009 at 4:43 pm
[...] file e di una modifica che è un semplice search&replace, alla fine ho preferito installarlo! Qui una piccola guida passo passo per implementare questo template sulla propria installazione di [...]
Blog e photoblog su IPod/IPhone « PuntiDiVista
December 7, 2009 at 5:16 pm
[...] file e di una modifica che è un semplice search&replace, alla fine ho preferito installarlo! Qui una piccola guida passo passo per implementare questo template sulla propria installazione di [...]
Will
January 23, 2010 at 6:36 pm
Check out the “pixelposter” app for the iPhone. It is free and is designed for uploading images to pixelpost photoblogs.
Iphone friendly photo gallery | Light is Life - Light painting
February 11, 2010 at 1:15 pm
[...] Further information about : – Pixelpost : Pixelpost.org Great photoblog, easy to setup and customize. – Hoo template : Reallyjapan – Iphone friendly pixelpost [...]
Galerie compatible Iphone et Ipod touch | Light is Life - Light painting
February 11, 2010 at 1:23 pm
[...] Informations concernant : – Pixelpost : Pixelpost.org Photoblog facile à mettre en place et à personnaliser. – Hoo template : Reallyjapan – Iphone friendly pixelpost [...]
chibbert
February 20, 2010 at 5:49 pm
For the ones trying to setup the Hoo! theme for Pixelpost using the World in 35mm main theme/addon, I wrote a tutorial on how to make it work.
In English :
Hoo! and The World in 35mm
En francais :
Hoo! et le theme The World in 35mm
Maybe it may help.
Kris
May 1, 2010 at 7:28 pm
Indeed, great tutorial, thanks, I’m still learning the mobile platforms.. but as MarcoH said: what about Android?..