Using dynamic images in a table with Document Generation

[Raymond Camden]

A friend just asked me about this so I thought I'd share an example. He asked - with a dynamic table, is it possible to support dynamic images as well? You definitely can. Here's the JSON I used as a sample:

{
	"cats":[
		{"name":"ray", "pic":"https://placekitten.com/300/300"},
		{"name":"chad", "pic":"https://placekitten.com/500/500"}
	]
}

As you can see, I've got an array of cats with two properties, name and pic. I opened up Word, used our Document Generation add in and pasted in my JSON.

In the Advanced tab, I inserted a table. It knew cats was an array so the add in suggested that. I then specified name and pic as my columns.

Now, for my test, I wanted to leave the pic column alone, just so I could ensure it was getting the right URL. So I used Word's table editing to add a third column to the right. Again though that was just for testing. At this point I had a table where the first column specified {{ cats.name }}, the second {{ cats.pic }}, and the third was empty.

For the third column I wanted to add an image. If you try to use the add in for this, you wll not be able to. So instead I used Word and inserted an image from my hard drive. The image doesn't matter, but it just so happens I have a cat icon so I did that.

Per our docs for images (https://developer.adobe.com/document-services/docs/overview/document-generation-api/templatetags/#im...), I right clicked on the image and edited the alt tag. I set the path value to cats.pic:

{
  "location-path": "cats.pic",
  "image-props": {
    "alt-text": "This is an alt-text for the image placeholder"
  }
}

And that's all it took! I generated the doc and you can see the result here:

I've attached the Word doc below. A few notes:

* To be clear, the column in the middle isn't necessary, I was just testing.

* My sample data uses images from a Cat placeholder service and are different sizes. But in Document Generation, the images are all the same size - the size they are in the Word template. If my images were truly random sizes and stuff, that wouldn't work well. I'd use a consistent size.

That's it - enjoy.