[✅ Solution] Displaying multiple images from a single field on a [web page]

🙏 Ask the Community
1

Here is a script ot allow you to display multiple images on a external web page.

:green_circle: IMAGES IN A ROW

var_html_images = '';
const number_of_images = deliverable_field_image_file_urls.length;

for(const image_url of deliverable_field_image_file_urls) {
  var_html_images += `<img width="${100 / number_of_images}%" src="${image_url}" />`
}

:green_circle: IMAGES STACKED @ 100% WIDTH

var_html_images = '';
const number_of_images = deliverable_field_image_file_urls.length;

for(const image_url of deliverable_field_image_file_urls) {
  var_html_images += `<img width="${100}%" src="${image_url}" /><br>`
}
  • You need to define “html_images” as the var for the script
  • You need to replace “deliverable_field_image_file_urls” with your items “file_urls”

2023-01-17_ (5)
2023-01-17_ (5)911×459 67.7 KB

2 Likes
2

Shout out to @Ben for the information!

Ah yeah two things:
(1) in the header of the action “Execute script”, you need to hit the “+” button to add a new variable (html_images). You should be able to find the html_images variable in the @-mentioning menu in the web page action

(2) The “deliverable_field_image_file_urls” variable needs to be changed to the field of your app. You can simply delete the variable name and start typing the name of your image field, the auto-completion should do the rest!

2 Likes
3

Thanks for documenting this useful scripting snippet. Here is the share link for anyone who wants to quickly duplicate an example app + automation of this into their organization:

https://share.tapeapp.com/workspace/app/16078?view=31250&auth=deaa9028d3c8384c18965627920a0457