Build iPhone Compatible Drupal Websites Using iWebkit: Part 1
on
September 1, 2009
Build iPhone Compatible Drupal Websites Using iWebkit: Part 1
The iPhone and iPod touch continue to gain market share of mobile web traffic. According to edibleapple 48% of all smartphone web requests in the US come from iPhones, while Windows and RIM devices together comprised 34% of mobile web requests.
These numbers show that it is becoming increasingly important to have iPhone compatible websites.
In a similar way you can build your secondary menu in iPhone style
menus using
Top bar and arrow links:
This code adds page title, home link (left-navigation) and logout links
(right-navigation) in top bar.
Teaser list display on home page
The code above adds a nice iPhone style title and arrow to title.
Form support: iWebKit offers excellent support for iPhone style forms. It outputs all forms in an iPhone styled way. For example to add a user-login form like this one
you would use the following code:
Themes with iWebKit: There are 13 iWebKit themes available for download in themes package. You can view demos of these themes.
Popup support: These are the same popups that you get in settings on your iPhone when you reset all settings. You can find the code for popups in the iWebKit documentation.
iWebkit 4.6.1 natively supports many other cool features - you can learn more about them at iwebkit.net.
A Demo OF this theme is available at: http://iphone.sumitk.net
These numbers show that it is becoming increasingly important to have iPhone compatible websites.
The good news is that with Drupal sites, it is becoming easier to make them mobile web compatible. Lets start converting your Drupal website into an iPhone compatible version using iWebkit.
iWebKit is a web toolkit designed to create iPhone and iPod touch compatible websites and webapps. It is very easy to use, extremely fast, compatible and extensible. iWebkit is available under GNU license and can be downloaded from iwebkit.net.
In first part of this series of tutorials I will cover the basics of the iWebKit Drupal theme and in second part I will discuss enabling it on your site along with a desktop theme.
Demo of iWebKit: Demo
(demo it on your iPhone or iPhoneTester)
- Download iWebKit Drupal theme from the bottom of this blog.
- Extract the theme in your site’s 'sites/all/themes' directory and enable it as default theme at http://mysite.com/admin/build/themes .
- Now if you visit your website from an iPhone it will look like this
- You will see the primary menu of your site is beautifully converted into iPhone type menus with a picture and details.
if(!empty($primary_links)) {
$out = '<ul class="pageitem" title="' . ($title ? $title : $site_name) . '" selected="true">
<li class="textbox"><p>My Example menu</p></li>';
foreach($primary_links as $link_name => $link) {
$out .= '<li class="menu"><a href="' . $link['href'] . '"><img alt="list" src="'.path_to_theme('iphone').'/thumbs/contacts.png" /><span class="name">' . $link['title'] . '</span><span class="comment">'.$link['attributes']['title'].'</span><span class="arrow"></span></a></li>';
}
$out .= '</ul>';
echo $out;
}$secondary_links variable instead of $primary_links above.
Top bar and arrow links:
<div id="topbar">
<div id="leftnav"><a href="<?php print base_path(); ?>"><img alt="home" src="<?php print base_path() . path_to_theme() ?>/images/home.png" /></a></div>
<div id="title"><?php print $site_name; ?></div>
<div id="rightnav"><a href="<?php print 'logout&'.drupal_get_destination(); ?>">logout</a></div>
</div><li class="menu">
<a href="<?php print $node_url ?>" title="<?php print $title ?>">
<span class="name"><?php print $title ?></span>
<span class="arrow" />
</a>
</li>you would use the following code:
<form action="?q=user/login&'. drupal_get_destination() .'" method="post" id="user-login">
<ul class="pageitem">
<li class="form"><input placeholder="Username" id="edit-name" name="name" type="text" /></li>
<li class="form"><input placeholder="Password" id="edit-pass" name="pass" type="password" /></li>
<input placeholder="" id="edit-pass" name="form_id" id="edit-user-login" type="hidden" value="user_login" />
<li class="form"><input name="Submit input" name="op" id="edit-submit" type="submit" value="Submit" /></li>
</ul></form>Popup support: These are the same popups that you get in settings on your iPhone when you reset all settings. You can find the code for popups in the iWebKit documentation.
iWebkit 4.6.1 natively supports many other cool features - you can learn more about them at iwebkit.net.A Demo OF this theme is available at: http://iphone.sumitk.net
| Attachment | Size |
|---|---|
| iphone.zip_.txt | 182.91 KB |
Thomas Sabo (not verified) October 29, 2009
Hey guys! Good work! Thats exactly what I've been looking for! Greetings from Germany,
Travis C (not verified) October 23, 2009
Super Job on this... Can't wait to dig into more...
Jamie T (not verified) October 2, 2009
I tried looking at the demo site using android browser (believe it uses webkit same as iphone) and it renders the std drupal theme not an iphone based theme. Does the demo site check the user agent - if so may want to set it up for android phones as well?
Jeremy (not verified) September 25, 2009
This theme is needed, as well as more info on how to customize it.
Bevan Rudge September 22, 2009
Please do!
Jeremy (not verified) September 22, 2009
Really eager to figure out how this works, like how do you customize the pages. So keep the tutorial coming. Thanks.
Bevan Rudge September 21, 2009
Great! Is this theme available on Drupal.org too?
MaximillianK September 8, 2009
SO happy to hear this. Love it
I am a php programmer.....
I am NOT using drupal, How can i make iphone compatible website....
Site is alredy existing one, i just want to make it iphone compatible, some thing similar to images shown in this link.
http://civicactions.com/blog/2009/sep/01/build_iphone_compatible_drupal_...