• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Using dynamic images in a table with Document Generation

Adobe Employee ,
Dec 01, 2022 Dec 01, 2022

Copy link to clipboard

Copied

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.

RaymondCamden_0-1669934881286.png

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:

RaymondCamden_1-1669934985563.png

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.

TOPICS
Document Generation API

Views

88

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation
Resources