How To Display Multiple Images Uploaded in GravityForms Multiple File Upload Field inside the PDF template

Hello,

We have a GravityForm with a file upload field that allows for multiple files to be uploaded in the field.

In our e2pdf template, is there a way to visually display ALL of the possible uploaded images? We are curious if there is a way to display them without have to map them each to an individual image field, meaning, is there a way to just have it show ALL the possible images?

Thank you,

Hello,

Currently, the only way to output multiple images is through the "HTML" object. You can use an example value like https://codefile.io/f/Lo8WoqsGg2* along with the "Multipage" or "Parent/Child" functionality. It is recommended to check the option to disable the WYSIWYG Editor.

* {File:32} should be replaced with your multiple-file-upload slug.

If this solution works for you, please let us know which layout you need for the output, and we will provide a more specific example if possible. However, please note that there are some limitations with CSS/HTML usage, and creating the required layout for the output may not always be straightforward.

P.S. We are working on other possible options, such as displaying images in a grid using the Image object. However, this feature will likely only be available next year.

---

We would really appreciate your feedback at WordPress.org!

Hello,

We have implemented this approach with the HTML element, but are having an issue where it only works with image files (jpg, png, etc.). The multi-upload fields we have also allow for .PDF uploads, and this worked well when we used an image element, but unfortunately, the image element doesn't work for multi-page options (if there is more than one attached file upload), but additionally the HTML element with this code doesn't seem to support showing a PDF. Is there any way to use the HTML object but also display PDFs like the image object does?

Hello,

Unfortunately, the HTML object does not yet support inserting PDFs as images; only the Image object supports this functionality. This feature is on our TODO list, but we do not have an ETA for its release.

P.S. We are also working on direct attachments to PDFs, which will allow uploaded files to be included directly in the PDF without inserting them into pages. This feature will support multiple file uploads and is expected to be available by early January. However, we’re not sure if it can be a suitable replacement in your case.

---

We would really appreciate your feedback at WordPress.org!

Okay, is there a way to use the image object but accomodate for multiple uploads? Perhaps some sort of conditional page display that has new pages for additional file uploads?

You can try using conditional logic to hide pages; however, this would require pre-creating a structure and checking where the value of the shortcode renders as empty.

For example, if it’s two images per page in the multi-file upload field, you should be able to use the shortcode to output:

1st Page:

1st image: [e2pdf-format-output explode=", " output="{0}"]{Upload:4}[/e2pdf-format-output]

2nd image: [e2pdf-format-output explode=", " output="{1}"]{Upload:4}[/e2pdf-format-output]

2nd Page:

1st image: [e2pdf-format-output explode=", " output="{2}"]{Upload:4}[/e2pdf-format-output]

2nd image: [e2pdf-format-output explode=", " output="{3}"]{Upload:4}[/e2pdf-format-output]

-------------------

For the 1st page, you would check if the value for the field is empty or not (Screenshot 1):
[e2pdf-format-output explode=", " output="{0}"]{Upload:4}[/e2pdf-format-output]

For the 2nd page, you would check if the value for the field is empty or not (Screenshot 2):
[e2pdf-format-output explode=", " output="{2}"]{Upload:4}[/e2pdf-format-output]

---

We would really appreciate your feedback at WordPress.org!

Is there a way to allow the above solution from December 18th to also allow for PDFs that are more than one page? We could not find a way to do so within this current solution. Essentially, it works great for both images and pdfs, and generating the additional pages conditionally, but this solution seems to not work if one of the attached multi-file upload fields is a PDF of say 4 pages, this only displays the first page (or essentially whatever fits within the image box). This presents an issue on the solution on our end sine most of our PDF submissions will be a few pages of varying length.

Is there any way to modify the above solution to accomodate for that?

Thank you-

It's a bit complex because you have a mix of "images" and "PDFs." Indeed, with the previous solution, all PDF pages would be drawn in the size of a "single" image object.

Maybe you can separate files uploaded by different fields? If not, in this case, the only possible solution we see is to create a custom "filter" that can extract "images" and "PDFs" separately. However, in this case, the order of the output in the final PDF will be different. For example, the output would be images first and then the uploaded PDFs pages. If such behavior fits your needs, we can try to prepare a solution.

Also, can you let us know if you need to output 1 image per page, 1 PDF page per page? Or is it a a different layout?

---

We would really appreciate your feedback at WordPress.org!

Hello,

Having the order of how it outputs, such as images first, or pdfs first, etc., wouldn't be an issue at all. So if there is a solution that would output images first followed by uploaded PDF pages that would be great, but our layout is essentially needing to output one full size image or pdf page PER template page if that makes sense. So if there is a solution that would just generate additional template pages (or even if we used conditional to hide the excess pages), the order of the output doesn't matter, but ideally we need one image or pdf page per template page.

Thank you for all the help.

Okay, in this case, please follow the current possible solution:

1. Add the code to your theme's functions.php file or as a PHP snippet: https://codefile.io/f/otXfQp2K5H.

This code allows separating the output of images and PDF files:

1.1 To output the first "PDF":
[e2pdf-format-output explode=", " output="{0}" pdfs="true"]{File:32}[/e2pdf-format-output]

1.2 To output the first "Image":
[e2pdf-format-output explode=", " output="{0}" images="true"]{File:32}[/e2pdf-format-output]

Unfortunately, pre-creating pages for additional PDF pages / images remains necessary. With code it's possible to design the layout as follows.

2. Example for PDFs:

2.1 For the first possible PDF, create a page, add an image object, and insert the shortcode: [e2pdf-format-output explode=", " output="{0}" pdfs="true"]{File:32}[/e2pdf-format-output]. Set the page to "1" and enable the "Hide Page (If empty)" option.

2.2 For the next page, apply the same settings but set the page to "2" and so on. Unfortunately, it is still necessary to pre-create pages for different PDFs.

2.3 For the second possible PDF, create a page, add an image object, and insert the shortcode: [e2pdf-format-output explode=", " output="{1}" pdfs="true"]{File:32}[/e2pdf-format-output]. Set the page to "1" and enable the "Hide Page (If empty)" option.

2.4 For the next page, apply the same settings but set the page to "2" and so on.

Screenshots: 1, 2, 3, 4

3. Example for Images:
3.1 For the first possible image, create a page, add an image object, and insert the shortcode: [e2pdf-format-output explode=", " output="{0}" images="true"]{File:32}[/e2pdf-format-output]. Enable the "Hide Page (If empty)" option.

3.2 For the second possible image, create a page, add an image object, and insert the shortcode: [e2pdf-format-output explode=", " output="{1}" images="true"]{File:32}[/e2pdf-format-output]. Enable the "Hide Page (If empty)" option.

Screenshots: 5, 6

---

We would really appreciate your feedback at WordPress.org!