Last active
May 15, 2025 19:39
-
-
Save rafaehlers/cc5b8fafa3b1b480d96ff0a33d2da7f2 to your computer and use it in GitHub Desktop.
Output a custom image icon for every uploaded file type in GravityView.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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)