Help taking a Windows 8 tile and inserting a background image.

Question

Ok so I have been looking over the sample coding for the Windows 8 Tiles and I see they replaced the BackgroundImage with a default color.

 // These three strings encode placeholder images. You will want to set the
        // backgroundImage property in your real data to be URLs to images.
        var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC";
        var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";
        var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC";
        var calendar = "images\calendar.png";

        // Each of these sample groups must have a unique key to be displayed
        // separately.
        var sampleGroups = [
            { key: "group1", title: "RZ Marketing App Alpha Test", subtitle: "Group Subtitle: 1", backgroundImage: "calendar", description: groupDescription },
            { key: "group2", title: "Gojo", subtitle: "Group Subtitle: 2", backgroundImage: lightGray, description: groupDescription },
            { key: "group3", title: "3M", subtitle: "Group Subtitle: 3", backgroundImage: mediumGray, description: groupDescription },
            { key: "group4", title: "Robot Coupe", subtitle: "Group Subtitle: 4", backgroundImage: lightGray, description: groupDescription },
            { key: "group5", title: "American MetalCraft", subtitle: "Group Subtitle: 5", backgroundImage: mediumGray, description: groupDescription },
            { key: "group6", title: "San Jamar", subtitle: "Group Subtitle: 6", backgroundImage: darkGray, description: groupDescription }
        ];

My question is if I insert into the Images Directory a PNG file called Calendar, then how do I implement it to display the PNG image as the tile background instead of let's say light gray? Do I create a var for the image, if so what is the coding example. This is my first every coding for Windows 8 and have no idea. Thanks again.

-Todd J. Rohrer

Answer 1

Hello,

Which tile are you referring to? Are you referring to your application tile that shows on the desktop or are you referring to the group view? From the code sample above it looks like you are referring to the backgroundImage property of an individual <div> element for grouping items. If that is correct, then you can certainly use the backgroundImage and point it to an actual image rather than having to base64 encoded version of the image.

For example, if you create a test WinJS grid application (File -> New -> Project -> JavaScript -> Windows Store -> Grid App), replace the line:

//var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";

with:

var lightGray = "images/logo.png";

and then run the sample, you should be able to see the logo.png as the background of the group items. I hope that's the functionality you are looking for?

Thanks,

Prashant.

Answer 2

Ok so that did work however I want to add a few more images. I tried adding another Variable but it shows up blank. I tried

var lightBlue = "images/logo.png";

But it didn't work? At the same time I entered your code

var lightGray = "images/logo.png";

which came up with the image.

Is there some code somewhere that defines only 3 variables (darkGray, mediumGray, lightGray that I have to change or what?

Answer 3

No, you can use any variables you like and pointing to different elements. For example, you can replace the lightGray with lightBlue anywhere in the following group:

        var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";
        var lightBlue = "images/logo.png";

        // Each of these sample groups must have a unique key to be displayed
        // separately.
        var sampleGroups = [
            { key: "group1", title: "Group Title: 1", subtitle: "Group Subtitle: 1", backgroundImage: lightBlue, description: groupDescription },
            { key: "group2", title: "Group Title: 2", subtitle: "Group Subtitle: 2", backgroundImage: lightGray, description: groupDescription },
            { key: "group3", title: "Group Title: 3", subtitle: "Group Subtitle: 3", backgroundImage: mediumGray, description: groupDescription },
            { key: "group4", title: "Group Title: 4", subtitle: "Group Subtitle: 4", backgroundImage: lightGray, description: groupDescription },
            { key: "group5", title: "Group Title: 5", subtitle: "Group Subtitle: 5", backgroundImage: mediumGray, description: groupDescription },
            { key: "group6", title: "Group Title: 6", subtitle: "Group Subtitle: 6", backgroundImage: darkGray, description: groupDescription }
        ];

when you do that and when you click on any of the "Group" title, for example "Group 1", then you should be able to see your lightBlue image.