Skip to main content
Mavens
Mavens
Participant
September 5, 2024
Answered

document generation for array of images

  • September 5, 2024
  • 1 reply
  • 1268 views

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-1ec11cfc3fe3/0f1d68ca-f54b-4cea-aeeb-c4360fcd5a20.png"

},

{

    "path":"https://s3.us-west-1.amazonaws.com/prod.us-west-1c.app.zuperpro/attachments/a016b489-08b1-4e6b-b954-1ec11cfc3fe3/0f1d68ca-f54b-4cea-aeeb-c4360fcd5a20.png"

}

]

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!

    This topic has been closed for replies.
    Correct answer Raymond Camden

    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. 

     


    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.

    1 reply

    Raymond Camden
    Community Manager
    Raymond CamdenCommunity Manager
    Community Manager
    September 5, 2024

    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
    MavensAuthor
    Participant
    September 5, 2024

    {
    "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
    Community Manager
    Raymond CamdenCommunity Manager
    Community Manager
    September 5, 2024

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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices