locked
Adding pictures to the article-content in data.js (Split app) RRS feed

  • Question

  • Hello. Im just fooling around and checking out the split app template from microsoft and I need some help. What Im trying to do is adding pictures to the article-content in the splitpage via the data.js already made groups. Is this possible and can someone please tell me how if it is? I've been trying to do this in every way I know and I cant seem to find the answer on google.

    If you need more info or want me to be more specific about what Im trying to do then please tell me and I will do my best (As you may be able to tell my english is not the best)

    Thank you!

    Tuesday, May 28, 2013 6:31 PM

Answers

  • If you want to add background images to groups (in first page) the change the background image to point to an image in your project.

    Lets say you have added images under images folder in the project.

    so in your data.js change this :

    var sampleGroups = [
                { key: "group1", title: 
    "Group Title: 1", 
    subtitle: "Group Subtitle: 1", backgroundImage: "/images/group1img.png", 
    description: groupDescription },
                { key: "group2", 
    title: "Group Title: 2", 
    subtitle: "Group Subtitle: 2", backgroundImage: "/images/group2img.png", 
    description: groupDescription },
                { key: "group3", 
    title: "Group Title: 3", 
    subtitle: "Group Subtitle: 3", backgroundImage: "/images/group3img.png", 
    description: groupDescription }
    ......
            ];

    Similarly if you want to set the image in data (2nd page when you click on one item in first page then you need to point to images in you images folder.. For example :

    var sampleItems = [
                { group: sampleGroups[0], 
    title: "Item Title: 1", 
    subtitle: "Item Subtitle: 1", 
    description: itemDescription, 
    content: itemContent, 
    backgroundImage: "images/Item1img.png"},
                { group: sampleGroups[0], 
    title: "Item Title: 2", 
    subtitle: "Item Subtitle: 2", 
    description: itemDescription, 
    content: itemContent, 
    backgroundImage: "images/Item2img.png"},
                { group: sampleGroups[0], 
    title: "Item Title: 3", 
    subtitle: "Item Subtitle: 3", 
    description: itemDescription, 
    content: itemContent, 
    backgroundImage: "images/Item1img.png"}
    .....
    ]

    Please make sure you images are then in some folder and added to the project.

    - Girija

     
    • Marked as answer by Emil Jensen Wednesday, May 29, 2013 1:30 PM
    Tuesday, May 28, 2013 7:05 PM

All replies

  • If you want to add background images to groups (in first page) the change the background image to point to an image in your project.

    Lets say you have added images under images folder in the project.

    so in your data.js change this :

    var sampleGroups = [
                { key: "group1", title: 
    "Group Title: 1", 
    subtitle: "Group Subtitle: 1", backgroundImage: "/images/group1img.png", 
    description: groupDescription },
                { key: "group2", 
    title: "Group Title: 2", 
    subtitle: "Group Subtitle: 2", backgroundImage: "/images/group2img.png", 
    description: groupDescription },
                { key: "group3", 
    title: "Group Title: 3", 
    subtitle: "Group Subtitle: 3", backgroundImage: "/images/group3img.png", 
    description: groupDescription }
    ......
            ];

    Similarly if you want to set the image in data (2nd page when you click on one item in first page then you need to point to images in you images folder.. For example :

    var sampleItems = [
                { group: sampleGroups[0], 
    title: "Item Title: 1", 
    subtitle: "Item Subtitle: 1", 
    description: itemDescription, 
    content: itemContent, 
    backgroundImage: "images/Item1img.png"},
                { group: sampleGroups[0], 
    title: "Item Title: 2", 
    subtitle: "Item Subtitle: 2", 
    description: itemDescription, 
    content: itemContent, 
    backgroundImage: "images/Item2img.png"},
                { group: sampleGroups[0], 
    title: "Item Title: 3", 
    subtitle: "Item Subtitle: 3", 
    description: itemDescription, 
    content: itemContent, 
    backgroundImage: "images/Item1img.png"}
    .....
    ]

    Please make sure you images are then in some folder and added to the project.

    - Girija

     
    • Marked as answer by Emil Jensen Wednesday, May 29, 2013 1:30 PM
    Tuesday, May 28, 2013 7:05 PM
  • Thank you! 
    Wednesday, May 29, 2013 1:30 PM
  • thank you for this information. but say I wanted to add more pictures to go along with the data that I am adding in the data.js file, how would I go about this?

    Thursday, March 26, 2015 2:12 AM