+1
Completed

How to manage images within a Universal App

ajones 8 years ago updated by dbdesign 8 years ago 3
One of the key advantages of Wire is it's ability to do so much in so few lines of code as well as crafting code that is reusable across multiple devices.

With the introduction of the tag you may be tempted to code multiple images in your Wire to achieve serving the right image to the right device.



<platform device="iPad">
<image name="myButton" source="myiPadImage.png" xpos="5%" valign="center"></image>
</platform>
<platform device="iPhone">
<image name="myButton" source="myiPhoneImage.png" xpos="5%" valign="center"></image>
</platform>


*please note that iOS takes care of delivering your retina images internally. Simply amend your file names with a '@2x' (myipadimage@2x.png) and iOS will substitute these as requested.

While this will work, this requires you to manage two individual image objects that will share very similar attributes and you will have a wire with a multitude of tags.

The best approach we have found internally at RareWire is the use of to source our images across multiple platforms. This allows us to consolidate our use of the tag as well as keep all of you image needs in a nice tidy block for easy management.

First we will create two platform blocks within our block to single out the use of iPad or iPhone.



<styles>
<platform device="iPad">

</platform>
<platform device="iPhone">

</platform>
</styles>


Next, we will create a style that we will place in both blocks.



<styles>
<platform device="iPad">
<style name="myButton-image" />
</platform>
<platform device="iPhone">
<style name="myButton-image" />
</platform>
</styles>


Then we will source the image within these styles with the appropriate image for the device.



<styles>
<platform device="iPad">
<style name="myButton-image" source="myiPadImage.png" />
</platform>
<platform device="iPhone">
<style name="myButton-image" source="myiPhoneImage.png" />
</platform>
</styles>


Next all we need to do is remove the reference from the image objects, reference this new style we created and remove the platform tags and extra image object from our first example.



<image name="myButton" style="myButton-image" xpos="5%" valign="center"></image>


The final code will look like this



<wire>
<styles>
<platform device="iPad">
<style name="myButton-image" source="myiPadImage.png" />
</platform>
<platform device="iPhone">
<style name="myButton-image" source="myiPhoneImage.png" />
</platform>
</styles>
<main>
<image name="myButton" style="myButton-image" xpos="5%" valign="center"></image>
</main>
</wire>


I now have a nice manageable block of all my universal images as well as simple reuse and simplification of my wire. If I need to alter shared attributes, I can change it once in the section instead of across two image objects.

I have found that I feel I have a better grasp on my image management within the app with this method as well.
I'm a little confused on how to include retina images with the @2x amendment. If i have both a iPhone and iPhone-Retina image (2 separate images) and want the code to display (and load) only what is needed for the device, should my code look like this? (or does it just scale the image up and down as needed?)


<platform device="iPhone">
<image name="myButton" source="myiPhoneImage@2x.png" xpos="5%" valign="center"></image>
</platform>
iOS is actually very intelligent in handling and serving up the appropriate image for your app. As the developer, all you must do is ensure that your corresponding retina images are in the same location with the non-retina and contain the amendment of '@2x' on the filename. *Notice that it is a lowercase 'x', iOS is case sensitive in this situation.

So in your example and in all situations within your wire, you only have to declare the non-retina image. iOS will do the rest.

Hope this helps!
This makes sense! Thank you!