locked
How to change image for tile in Grid App template - HTML5

    Question

  • How to change the image in each Grid for Grid App template provided with VS Express for Windows 8. I tried changing the default.css, groupDetail, groupeditems and itemDetails pages but no use..
    Wednesday, June 12, 2013 3:40 PM

Answers

  • Hi,

    I data.js you would find these lines:

    // 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";

    Change thse variables to your images relative path . For example :

    // 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 = "/images/image1.png";
            var lightGray = "/images/image2.png";
            var mediumGray = "/images/image3.png";

    These variables are used in the sample data. So you can directly change the image path here also.

     var sampleItems = [
                { group: sampleGroups[0], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },
                { group: sampleGroups[0], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },
                { group: sampleGroups[0], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
                { group: sampleGroups[0], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray },
                { group: sampleGroups[0], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
    
    .
    .
    .
    .
    .

    Note : Make sure you have the image added under the path in project before specifying that.

    Hope this helps...

    - Girija


    Please mark responses as answered if it helped you.. This helps others... - Girija Shankar Beuria

    Wednesday, June 12, 2013 7:00 PM

All replies

  • Hi,

    I data.js you would find these lines:

    // 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";

    Change thse variables to your images relative path . For example :

    // 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 = "/images/image1.png";
            var lightGray = "/images/image2.png";
            var mediumGray = "/images/image3.png";

    These variables are used in the sample data. So you can directly change the image path here also.

     var sampleItems = [
                { group: sampleGroups[0], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },
                { group: sampleGroups[0], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },
                { group: sampleGroups[0], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
                { group: sampleGroups[0], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray },
                { group: sampleGroups[0], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
    
    .
    .
    .
    .
    .

    Note : Make sure you have the image added under the path in project before specifying that.

    Hope this helps...

    - Girija


    Please mark responses as answered if it helped you.. This helps others... - Girija Shankar Beuria

    Wednesday, June 12, 2013 7:00 PM
  • Thanks for the solution
    But what are the sizes of the images for Grid (Square Image), for itemDetail page (Wide image) and how to give different image for the same item in in Grid form and in detail page.
    • Edited by ANILKUMAR A Saturday, June 15, 2013 9:00 PM
    Saturday, June 15, 2013 8:50 PM