Adaptive design using adi_mobile and smd_thumbnail opens up all kinds of possibilities for high quality content delivery aimed at specific devices or screen sizes.
This TXP Tip explains what I did at Gobbinland. Please read Mobile Thumbnail for some reasons why this tip may be useful. Before you begin, you need to install adi_mobile and smd_thumbnail plugins and you need to read the Help on how to use them.
Create images for 3 widths
Create thumbnail profiles t1008, t768 and t480 for widths of 1008px, 768px, 480px and batch-create these thumbnails for your images (Textpattern then stores these in the t1008, t768, t480 subfolders within the images folder). Note that smd_thumbnail creates pretty good images at different sizes but it is simple to replace these with your own top quality ones.
Write alt text carefully for the images – this is used for headings.
Detect mobile devices
At the very beginning of your page put:
<txp:adi_mobile type="" wide="976" narrow="767" />
<txp:adi_if_not_mobile>
<txp:adi_mobile type="desktop" wide="976" narrow="767" />
</txp:adi_if_not_mobile>
Prepare adi_mobile to serve correct image sizes to each device
In the <head> of your page put:
<txp:output_form form="adi_devices" />
Form adi_devices has these contents:
<txp:adi_if_mobile>
<txp:adi_if_mobile type="desktop,ipad">
<meta name="viewport" content="width=device-width" />
<txp:adi_mobile_viewport width="" />
<txp:else />
<txp:adi_mobile_viewport width="320" />
</txp:adi_if_mobile>
</txp:adi_if_mobile>
<txp:adi_mobile_script />
<txp:variable name="adi_mobile_viewport" />
Put the article images in your page
<txp:if_individual_article>
<txp:article form="articlephoto" />
</txp:if_individual_article>
Form articlephoto has these contents:
<txp:if_article_image>
<div>
<txp:images>
<txp:adi_if_mobile width="narrow">
<txp:smd_thumbnail type="t480" />
<h1 class="h480"><txp:image_info type="alt" /></h1>
<txp:else />
<txp:adi_if_mobile width="wide">
<txp:smd_thumbnail type="t1008" />
<h1 class="h1008"><txp:image_info type="alt" /></h1>
<txp:else />
<txp:smd_thumbnail type="t768" />
<h1 class="h768"><txp:image_info type="alt" /></h1>
</txp:adi_if_mobile>
</txp:adi_if_mobile>
</txp:images>
</div>
</txp:if_article_image>
If the browser is desktop or ipad, adi_mobile detects its viewport width and serves the appropriate size of image. If the browser is mobile, the narrow size of image is served. It gets complicated serving more than one image size for mobiles (eg. 320px and 480px) because when the user turns their phone around there’s some delay with the new image and a refresh may be needed. Mobile users can’t be too fussy about image quality at such small sizes, so CSS can be used so they see full 480px horizontally and a squashed or a cut-off 480px vertically.
480px bandwidth is about a quarter of 1008px bandwidth; adi_mobile will deliver specific content to iPhone, iPad, Android, Blackberry, Opera, Windows, Palm and generic mobiles if you require it; smd_thumbnail will rapidly create any size of thumbnails — so there are all kinds of possibilities with these plugins combined with media queries or other adaptive styling.