document generation for array of images

[Mavens]

I am currently working on a process to turn json data into an inspection form.   I have gotten most of this mapped out already, the one thing I am struggling on is images.  

I have successfully added in an inline image. With the json data that will be passed through the amount of photos is unknown.  When trying to pass the images as an array, I only have the option to use the array in a table.  

Sample Data: 

"answer":[

{

    "path":"https://s3.us-west-1.amazonaws.com/prod.us-west-1c.app.zuperpro/attachments/a016b489-08b1-4e6b-b954-...

},

{

    "path":"https://s3.us-west-1.amazonaws.com/prod.us-west-1c.app.zuperpro/attachments/a016b489-08b1-4e6b-b954-..."

}

]

I am able to run this array when putting an image place holder and editing the alt text as so:

{% repeating-section answer %}

(image place holder)

{% end-section %}

When this runs it will only duplicate the image place holder for the amount of items within the array. It will not actually replace the placeholder with the image in the url. 

Last thing, when I am able to get an image to populate via inline image I can not for the life of me figure out how to get the images to display next to each other as opposed to on top of each other.  

Any help with this will be greatly appreciated!

[Raymond Camden]

The alt text used in image placeholders can, as far as I know, only refer to one value. Can you share what you used?

Also, it may be easier to switch to using HTML. <img src="{{path}}">

[Mavens]

{
"location-path": "`answer2`.path"
}
This is what the alt text looks like for the specific image tag.  I am not set on any set solution as  long as I can iterate through an array of answers and have the images in that array populate next to each other. 

[Raymond Camden]

First off, the backticks aren't needed. But try using just path and see if that helps.

[Mavens]

Yea I dont know why the backticks are there, they are auto populated when in word for some reason.  I was able to get it itterating through the array, but it only repeats the placeholder image.  It does not replace the place holder image with the image found in the URL. 

[Raymond Camden · Accepted solution]

Ok, I confirmed it isn't working as expected. I was able to get it work by changing the data from JUST the URL, to:

<img src=" the previous url ">

And obviously, don't use a placeholder image, just a variable: {{ path }}

I do think it should work for placeholder variables, but for now, this should get you going.

[Mavens]

Thank you so much that worked great! I spent way longer on that then I care to admit! Can you point me in the direction to find the answer for getting the images to line up horizontally and not vertically, as well as formatting to specific sizes? 

[Raymond Camden]

Horizontal not vertical: Can you try putting the repeating section on one line? That _may_ not work. Unfortunately, you may need to switch to an approach where you use one variable, call it blob, where the value looks like so: "<img src=...><img src=..>" and so forth.

Right now you can't change the width and height via attributes - but that's changing very soon.

[Mavens]

Ok sounds good look forward to seeing the update! Thank you for your help!

[Raymond Camden]

FYI, I filed a bug report for this.