Mobile Tools, Build modes and ImageCache: let's play together

Yesterday I blogged shortly about the new Mobile Tools integration with Context.

I currently updated the support for Build modes, and would like to illustrate this with an example using ImageCache.

First of all if you want to use build modes, you have enable the Mobile Tools module to provide build modes:

Enable build modes

Let's say I have a content type for a Brand that contains an image and a logo.

The goal of this example is, to show the logo and image on both desktop and mobile site, but with different sizes. We will use ImageCache to resize the images for the different platforms.

First of all, have a content type that contains images.
Brand content type

Secondly create two mobile imagecache profiles. One for the logo and one for the image. In this case we just show the logo settings, where we set the image to have a max width of 100px

imagecache 2

So eventually you end up with two imagecache profiles
imagecache profiles

The next thing you need to do is to go to the configuration page of your content type and choose "Display Fields". Here you can configure which fields need to be displayed on the node page and which formatter you want to use.

Mobile Tools add two new display modes:

  • Mobile Groups: configure the fields per device group (iphone/android/ipad/...)
  • Mobile Type: configure the fields per device type (mobile/desktop)

Now you can easily select the mobile logo and mobile image in the dropdown boxes as default formatters for these fields on e.g. mobile devices.
content types build modes

After clicking save, you are all set!

Now you just have to look at your site from a desktop browser and a mobile browser.


The mobile version shows the smaller image... Simple and easy.

iphone screenshot

Note: For the mobile template I used the new Fusion Mobile template.