Skip to content

Instantly share code, notes, and snippets.

@rafaehlers
Last active May 15, 2025 19:39
Show Gist options
  • Save rafaehlers/cc5b8fafa3b1b480d96ff0a33d2da7f2 to your computer and use it in GitHub Desktop.
Save rafaehlers/cc5b8fafa3b1b480d96ff0a33d2da7f2 to your computer and use it in GitHub Desktop.
Output a custom image icon for every uploaded file type in GravityView.
<?php // DO NOT COPY THIS LINE
/**
* Output a custom image icon for every uploaded file type in GravityView.
*
* @filter gravityview/fields/fileupload/files_array
*
* @param array $output_arr Array of uploaded files passed by GravityView.
* @return array Modified array with icon-image output.
*/
add_filter( 'gform_secure_file_download_location', '__return_false' ); // Filter necessary to output the full URL of uploaded files
add_filter( 'gravityview/fields/fileupload/files_array', 'gv_custom_icon_for_file_type', 10 );
function gv_custom_icon_for_file_type( $output_arr ) {
// 1️⃣ Map extension → icon URL. Change paths to your own icons.
$icon_map = array(
// Images
'png' => get_stylesheet_directory_uri() . '/assets/icons/png.svg',
'jpg' => get_stylesheet_directory_uri() . '/assets/icons/jpg.svg',
'jpeg' => get_stylesheet_directory_uri() . '/assets/icons/jpg.svg',
'gif' => get_stylesheet_directory_uri() . '/assets/icons/gif.svg',
'webp' => get_stylesheet_directory_uri() . '/assets/icons/img.svg',
// Documents
'pdf' => get_stylesheet_directory_uri() . '/assets/icons/pdf.svg',
'doc' => get_stylesheet_directory_uri() . '/assets/icons/doc.svg',
'docx' => get_stylesheet_directory_uri() . '/assets/icons/doc.svg',
// Spreadsheets
'xls' => get_stylesheet_directory_uri() . '/assets/icons/xls.svg',
'xlsx' => get_stylesheet_directory_uri() . '/assets/icons/xls.svg',
'csv' => get_stylesheet_directory_uri() . '/assets/icons/xls.svg',
// Archives
'zip' => get_stylesheet_directory_uri() . '/assets/icons/zip.svg',
'rar' => get_stylesheet_directory_uri() . '/assets/icons/zip.svg',
);
// Generic fallback icon if the extension isn't mapped above.
$default_icon = get_stylesheet_directory_uri() . '/assets/icons/file.svg';
foreach ( $output_arr as $key => $file ) {
$url = $file['file_path'];
$ext = strtolower( pathinfo( $url, PATHINFO_EXTENSION ) );
$icon_url = isset( $icon_map[ $ext ] ) ? $icon_map[ $ext ] : $default_icon;
// 2️⃣ Swap the rendered content for our icon-link HTML.
$output_arr[ $key ]['content'] = sprintf(
'<a href="%1$s" class="gv-file-icon-link" target="_blank" rel="noopener noreferrer">
<img src="%2$s" alt="%3$s icon" class="gv-file-icon" />
</a>',
esc_url( $url ),
esc_url( $icon_url ),
esc_attr( strtoupper( $ext ) )
);
}
return $output_arr;
}
@rafaehlers
Copy link
Author

How to use this snippet

Place your icon files in your-theme/assets/icons/ (or anywhere you like).
SVGs scale crisply, but PNG/WebP works too.

Update $icon_map paths to match the actual file names/locations.
You can also point to remote URLs if you prefer.

Read here on where to put code snippets: https://docs.gravitykit.com/article/210-where-to-put-code-samples

Now each file upload—whether it’s a single file or many—will show your custom icon, linked to the file itself.

CSS (optional but recommended)

/* Make the icons a consistent size and remove link underline */
.gv-file-icon-link {
	text-decoration: none;          /* no underline */
}

.gv-file-icon {
	width: 28px;                    /* pick a size */
	height: auto;
	vertical-align: middle;
	transition: opacity .2s;
}

.gv-file-icon-link:hover .gv-file-icon,
.gv-file-icon-link:focus .gv-file-icon {
	opacity: .75;                   /* simple hover feedback */
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment