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:
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.
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
So eventually you end up with two 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.
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.
Note: For the mobile template I used the new Fusion Mobile template.