andrewmacpherson [andrewmacpherson] [#681460]

CVS edit link for andrewmacpherson

I have developed a module which allows site administrators and themers to specify "apple-touch" icons for any Drupal website, as seen when adding a "webclip" bookmark to the homescreen of an iPhone or iPod touch.

I'd like to contribute the module to Drupal.org, maintain it in contrib, and carry on development with new features.

Functionality of this Module
----------------------------
* Provides an extra UI fieldset at admin/build/themes/settings/* for setting apple-touch icons on a per-theme basis, similar to the Logo image and Shortcut icon fieldsets provided by Drupal core.

* Allows themers to provide apple-touch icons with themes, much like favicon.ico and logo.jpg can be provided now.

* Adds
elements to the $head theme template variable, specifying the icon URLs.

* Supports customization of both kinds of apple-touch icon (rel='apple-touch-icon' and rel='apple-touch-icon-precomposed').

* Provides default icons featuring the Druplicon, which complement Garland's default blue look and Drupal core's /misc/favicon.ico

* Link to Apple documentation on webclip icons:
http://developer.apple.com/iPhone/library/documentation/AppleApplication...

Use-case Considerations
------------------------
* The module is not needed by everybody. Like favicon.ico, webmasters can simply drop apple-touch-icon.png in their web root directory alongside index.php, where it will be found automatically by an iPhone.

* This module should be useful where FTP access not available, or it is otherwise impractical to place the icon in the drupal root directory, for example:
- Hosted Drupal services.
- Multi-site or multi-domain installations.

* Theme developers can distribute apple-touch icons with their theme. This module makes it easy to do so.

* Sites with more than one active theme can benefit greatly from this module, for example:
- Sites using Drupal core's Administration Theme setting, or user theme preferences. A site administrator could bookmark their front page and admin section with different icons on their iPhone homescreen.
- Sites using various multi-theme modules from contrib: Sections, Themekey, Node Type Theme, Content Theme, Role Theme Switcher.

* apple-touch icons are a relevant feature for bookmarking any website, not just those that provide a mobile version of the site. They've become a fairly popular feature of the web.

Development progress to date
----------------------------
* I have a working version with the basic functionality complete. It's now ready for a development snapshot and/or alpha-1 releases.

* I aim to move to a 6.x-1.0 release swiftly, with perhaps some interim beta/RC releases for testing planned UI improvements.

* The module complies with drupal coding standards (checked with coder review module).

* A demo site is already working, which I intend to maintain. Examine the element to see this module's output.
http://drupal.fuzzbomb.net

Documentation
-------------
* A Handbook page is in preparation for Drupal.org, with a first draft complete.

Road Map for Future Development
-------------------------------
* UI improvements, to offer previews of default and custom icons (high priority).
* Validation - ensure uploaded images are suitable to use as apple-touch icons.
* Ability to resize uploaded images to 57px, and convert to PNG.
* Handle requests for /apple-touch-icon.png and /apple-touch-icon-precomposed.png, redirecting like the Favicon module in contrib. Unsure whether feature this is necessary (low priority).
* I intend to provide a Drupal 7 version of this module (and take the D7CX pledge).
* I'm following the speculation in various gadget blogs about a forthcoming tablet device from Apple (the iSlate?). If a future Apple tablet device introduces any new icon formats, I'll want to support those too ;-)

Security
--------
* The code for handling uploaded files is based on the D6 core code which handles custom logo uploads (Drupal 6.15 lines 353-365).

* I'm not a web security expert, but have studied Drupal's secure coding guidleines and I will respond to any issue which is raised through the Drupal.org security team.

Previous Drupal.org Issues
--------------------------
* My module satifies an earlier D7 core feature request, and the suggestion that it should be fulfilled by a module in contrib (http://drupal.org/node/365187).

* The AdaptiveTheme Mobile theme already provides basic support for an apple-touch-icon. However it does not support the precomposed variety or provide a theme settings UI for custom icons. My module provides a more flexible approach enabling non-themers to use both kinds of icon, with any theme.

Comment	File	Size	Author
#9	touch_icons-6.x-1.0-alpha2.tgz	9.03 KB	andrewmacpherson
#4	touch_icons_ui.png	140.67 KB	andrewmacpherson
#2	touch_icons.tgz	9.02 KB	andrewmacpherson

Comments

Comment #1

andrewmacpherson commented 11 January 2010 at 15:36

The part about a demo site should read "Examine the <head> element to see this module's output".

Comment #2

andrewmacpherson commented 12 January 2010 at 02:31

Status:

Postponed (maintainer needs more info)

» Needs review

Status	File	Size
new	touch_icons.tgz	9.02 KB

Working version of my module.

Comment #3

andrewmacpherson commented 12 January 2010 at 03:07

You can try out the theme settings UI by logging in at the demo site:

http://drupal.fuzzbomb.net

username:cvsdemo
password:ver4j46

Permissions are configured so this user can access theme administration.

Additionally, the switchtheme block is installed, so you can quickly switch themes and examine the <head> element source with Firebug.

Comment #4

andrewmacpherson commented 12 January 2010 at 02:38

Status	File	Size
new	touch_icons_ui.png	140.67 KB

Screenshot of theme settings UI

Comment #5

andrewmacpherson commented 12 January 2010 at 02:54

The first point under security should read:

"The code for handling uploaded files is based on the D6 core code which handles custom logo uploads (Drupal 6.15, modules/system/system.admin.inc lines 353-365)."

Just realized I didn't say which file...

Comment #6

andrewmacpherson commented 12 January 2010 at 03:04

To clarify exactly how themers can provide touch icons with their themes...

Just drop apple-touch-icon.png and, optionally apple-touch-icon-precomposed.png into the theme's main directory, i.e. next to the .info file.

I've done this on the demo website. I've added some grey druplicon icons to a copy of the Stark theme.

Comment #7

sreynen commented 12 January 2010 at 03:20

Lines 197 and 200 both present the uploaded file as type="image/png" even if it's not a PNG.


  // output links
  if (check_url($url_plain)) {
    $variables['head'] .= '<link href="'. $url_plain .'" type="image/png" rel="apple-touch-icon"/>' . "\n";
  }
  if (check_url($url_precomp)) {
    $variables['head'] .= '<link href="'. $url_precomp .'" type="image/png" rel="apple-touch-icon-precomposed"/>' . "\n";
  }

I think you want to use file_get_mimetype() to display the correct type here.

http://api.drupal.org/api/function/file_get_mimetype

Everything else looks good to me.

Comment #8

Jeff Burnz commented 12 January 2010 at 04:02

This is great Andrew, I was looking around for something like this and thinking about it, I have two mobile websites to build in the coming weeks and had hard coded the apple-touch-icon functionality into my AT Mobile base theme, but this is much better!

Works as expected. You might want to run it through coder to bring it up to Drupal coding standards (mostly indentation and concatenation issues from glancing at the code, noting major).

Leaving status for now re#7.