Added styling support for displaying images as a grid.

Removed support for displaying non-image file types and made links mandatory.

Author: spivurno

gp-file-upload-pro/gpfup-display-images-in-entry-details.php

@@ -3,10 +3,8 @@
  * Gravity Perks // File Upload Pro // Show Images in Entry Details
  * https://gravitywiz.com/documentation/gravity-forms-file-upload-pro/
  *
- * Instead of an unordered list with links to the files, display the images. Non-images will still
- * be displayed as a text link.
- *
- * By default, the images will be hyperlinks linking to the original image.
+ * Instead of an unordered list with links to the files, display the images. Image previews will be hyperlinked to the
+ * original image.
  *
  * Instructions: https://gravitywiz.com/documentation/how-do-i-install-a-snippet/
  */
@@ -33,45 +31,36 @@
 	$html      = '';
 
 	foreach ( $file_urls as $file_index => $file_url ) {
-		/* Skip file if the file is not an image supported by mPDF */
-		$extension = pathinfo( $file_url, PATHINFO_EXTENSION );
-		$file_name = pathinfo( $file_url, PATHINFO_FILENAME );
-
-		if ( ! in_array( strtolower( $extension ), array(
-			'gif',
-			'png',
-			'jpg',
-			'wmf',
-			'svg',
-			'bmp',
-		), true ) ) {
-			// Link directly to other file types (e.g. PDF) without further processing
-			$html .= '<ul><li><a href="' . esc_url( $file_url ) . '">' . $file_name . '</a>' . "</li></ul>\n";
-			continue;
-		}
-
-		if ( $link_images ) {
-			$html .= '<a href="' . esc_url( $file_url ) . '"><img src="' . $file_url . '" style="max-width: 100%"  /></a>' . "\n";
-		} else {
-			$html .= '<img src="' . $file_url . '" style="max-width: 100%" />' . "\n";
-		}
-
-		if ( count( $file_urls ) > 1 && $file_index + 1 < count( $file_urls ) ) {
-			$html .= "<br />\n";
-		}
+		$html .= '<a href="' . esc_url( $file_url ) . '"><img src="' . $file_url . '" style="max-width: 100%"  /></a>';
 	}
 
 	/**
 	 * Strip all HTML except for img, a, ul, li, and br tags.
 	 */
-	return wp_kses( $html, array(
-		'img' => array(
-			'src'   => array(),
-			'style' => array(),
-		),
-		'a'   => array( 'href' => array() ),
-		'br'  => array(),
-		'ul'  => array(),
-		'li'  => array(),
-	) );
+	return '<style>
+.gpfup-preview-container { display: flex; flex-wrap: wrap; }
+.gpfup-preview-container a {
+	flex: 1; 
+	flex-basis: 25%; 
+	max-width: 25%; 
+	overflow: hidden; 
+	padding: 0.4rem;
+	box-sizing: border-box;
+}
+.gpfup-preview-container img {
+	display: block;
+	object-fit: cover;
+	aspect-ratio: 1/1;
+}
+</style>
+<div class="gpfup-preview-container">' . wp_kses( $html, array(
+			'img' => array(
+				'src'   => array(),
+				'style' => array(),
+			),
+			'a'   => array( 'href' => array() ),
+			'br'  => array(),
+			'ul'  => array(),
+			'li'  => array(),
+		) ) . '</div>';
 }, 10, 4 );