Use display template to display random image

Question

I am attempting to use the display templates to show a random image.

Right now the code below works for displaying one image, but if I add an additional line of code with a different image url source, it does not work.

Any ideas on what I could be doing wrong? Thanks so much!

function supportsDisplay() {
  var hasDisplay =
    this.event.context &&
    this.event.context.System &&
    this.event.context.System.device &&
    this.event.context.System.device.supportedInterfaces &&
    this.event.context.System.device.supportedInterfaces.Display

  return hasDisplay;
}

function renderTemplate (content) {

   switch(content.templateToken) {
       case "factBodyTemplate":
        
           var response = {
             "version": "1.0",
             "response": {

               "directives": [
                 {
                   "type": "Display.RenderTemplate",
                   "template": {
                     "type": "BodyTemplate7",
                     "title": content.bodyTemplateTitle,
                     "image": {
                        "contentDescription": "",
                        "sources": [
                          {
                            "url": "https://www.example.com/image.jpg",
                            "url": "https://www.example.com/image2.jpg",
                            "url": "https://www.example.com/image3.jpg"
                          }
                        ]
                      },
                    
                   }
                 }
               ],
             "sessionAttributes": content.sessionAttributes
           }
           this.context.succeed(response);
           break;
   }

}

Cedric Hutchings · Accepted Answer · 2018-01-02T00:49:52.240

2

EDIT:

Okay, this might work... At the top of the post, add an array of your image sources, like so:

const sourcesList = [
    "https://www.example.com/image.jpg",
    "https://www.example.com/image2.jpg",
    "https://www.example.com/image3.jpg"
]

Then, where it asks you for a url over at images:

"image": {
    "contentDescription": "",
    "sources": [
    {
        "url": sourcesList[Math.floor(Math.random() * sourcesList.length)],

That should work. If it doesn't, try adding this at the bottom of your file: (no guarantee that this will work either)

setInterval(function(){
    handlers['Get Fact']();
), 10000);//second value is the amount of time it takes to change image

Did you include a file type with your new image?

When you add an extra attribute to the JSON, make sure to add another comma after it. I.E.

"url": "anotherURL.jpg",
"url": "anotheranotherURL.jpg"

Notice the comma at the end of line one.

edited Jan 02 '18 at 00:49

answered Jan 01 '18 at 22:40

Cedric Hutchings

154
8

Great question - I did, and it looks like this, but that results in an error ("Parsing error - unexpected token: URL"): https://imgur.com/a/DYSXF – kanpanian Jan 01 '18 at 23:09
Add a comma after the new attribute. See edited answer for example – Cedric Hutchings Jan 01 '18 at 23:20
Good call on the comma issue, that was super helpful to fix the parsing error! The code looks like this now however the Alexa service simulator is still only pulling in the last image every time, instead of randomly picking one of the 3 images: https://imgur.com/a/euk0E Maybe I should be setting the randomizing behavior elsewhere in the code? Also I added an upvote for you but it says users with less than 20 rep don't have their votes publicly shown :'( – kanpanian Jan 01 '18 at 23:27
Yeah, StackOverflow doesn't want people to write bots that give themselves rep. I don't see where your randomizing behavior is defined in the code provided in the original post? You might be better off just posting all of it, if you can. – Cedric Hutchings Jan 02 '18 at 00:01
I've updated the original post to include the entire .js file for the Alexa skill. Thanks so much for your help!! – kanpanian Jan 02 '18 at 00:28
No problem. I've edited in some code into the answer. It should work... hopefully! – Cedric Hutchings Jan 02 '18 at 00:51
Excellent explanation and snippets - it worked!! Thank you so much! – kanpanian Jan 02 '18 at 00:59
Just out of curiosity, did you have to add the setInterval? I'd test it, but I don't have an Echo, or even anything of the type. I've never even used the Amazon Echo Show API before... I'm just a 15 year old who likes to make games using JavaScript... – Cedric Hutchings Jan 02 '18 at 01:06
Alright. I thought you wanted the image that was being displayed to change after a while, so the setInterval was (supposed to) redisplay an image every ten seconds. Since you're having trouble playing gifs and videos, what you could do is get a separate image for every frame that you want to play, and name them something like "frame1.png", "frame2.png", "frame3.png", and then one of us can write some JavaScript that loops through each image with a wait of a dozen or so milliseconds in between, effectively animating the images. – Cedric Hutchings Jan 02 '18 at 02:16
I have a game that I can send you (it's an unfinished tower defense game about defending yourself from an onslaught of sandwiches), but I'd rather not post it for all the world to download, in case I ever try to monetize it. However, if you email me at cedhut02@gmail.com, I'll email a copy of the game back to you. – Cedric Hutchings Jan 02 '18 at 02:18
And I will email you about the game nao :D – kanpanian Jan 02 '18 at 02:21

Use display template to display random image

1 Answers1