How to Increase Image Size in Notification Emails

Introduction

Do you need to display uploaded images from the Modern File Upload field in larger sizes in your WPForms notification emails? With a simple PHP snippet, you can easily adjust the size of these images to better suit your needs. In this tutorial, we’ll show you how to accomplish this.

Adding the Snippet

To increase the size of images uploaded via the Modern File Upload field in your notification emails, add the following custom snippet to your site. If you need help with adding snippets to your site, please take a look at this tutorial.

/**
* How to Increase Image Size in Notification Emails
*
* @link https://wpforms.com/developers/how-to-increase-image-size-in-notification-emails
*/
function wpf_custom_wpforms_email_notification_message_thumbnail($message) {
    // Define the new width and height
    $new_width = 'auto';
    $new_height = 200;
 
    // Use preg_replace to modify the width and height of the image
    $pattern = '/<img([^>]*)width="(\d+)"([^>]*)height="(\d+)"([^>]*)>/';
    $replacement = '<img$1width="' . $new_width . '"$3height="' . $new_height . '"$5>';
    $message = preg_replace($pattern, $replacement, $message);
 
    return $message;
}
add_filter('wpforms_emails_notifications_message', 'wpf_custom_wpforms_email_notification_message_thumbnail');

This snippet defines a new function wpf_custom_wpforms_email_notification_message_thumbnail() that takes the email message as a parameter. Inside the function, we set the new width to auto and the new height to 200 pixels. You can adjust these values to fit your needs.

We use regular expressions to find all <img> tags in the email message and replace their width and height attributes with our new values. The modified message is then returned. Finally, we use the wpforms_emails_notifications_message filter to apply our function to the email notification message.

Customizing the Image Size

If you want to adjust the image size, you can modify the $new_width and $new_height variables in the snippet. For example:

$new_width = 300; // Set a fixed width of 300 pixels
$new_height = 'auto'; // Allow the height to adjust automatically

And that’s it! You’ve successfully increased the size of uploaded images in your WPForms notification emails. Would you also like to customize the file upload field itself? Take a look at our article on How to Change the File Upload Button Styling.