Hi,
Welcome to Toolset support. Embedding base64-encoded images directly into HTML emails can be problematic, as support for such images varies across email clients. Notably, clients like Gmail and Outlook may not display these images correctly, leading to broken visuals or the images appearing as attachments instead.
To ensure consistent display across various email clients, it's advisable to embed the QR code image as an attachment and reference it within the email body. Here's how you can achieve this in Toolset:
1. Generate the QR Code Image:
Within the cred_save_data hook, generate the QR code and save it as an image file in your server's directory.
2. Attach and Reference the Image in the Notification Email:
Utilize the cred_notification_recipients filter to modify the notification email.
Attach the QR code image to the email and reference it using a Content-ID (CID).
Here's a sample implementation:
add_filter('cred_notification_recipients', 'attach_qr_code_to_email', 10, 4);
function attach_qr_code_to_email($recipients, $notification, $form_id, $post_id) {
// Specify your form ID
$target_form_id = 123; // Replace with your actual form ID
if ($form_id == $target_form_id) {
// Path to the QR code image
$upload_dir = wp_upload_dir();
$qr_code_path = $upload_dir['basedir'] . '/qr_codes/qr_code_' . $post_id . '.png';
// Check if the QR code image exists
if (file_exists($qr_code_path)) {
// Read the image data
$image_data = file_get_contents($qr_code_path);
$image_cid = 'qr_code_' . $post_id;
// Add the image as an attachment
add_filter('wp_mail', function($args) use ($image_data, $image_cid) {
$args['attachments'][] = [
'data' => $image_data,
'name' => $image_cid . '.png',
'encoding' => 'base64',
'type' => 'image/png',
'disposition' => 'inline',
'cid' => $image_cid
];
return $args;
});
// Modify the email content to include the image
add_filter('wp_mail_content_type', function() {
return 'text/html';
});
add_filter('wp_mail', function($args) use ($image_cid) {
$args['message'] .= '<br><img src="cid:' . $image_cid . '" alt="QR Code">';
return $args;
});
}
}
return $recipients;
}
Explanation:
QR Code Generation: Within the cred_save_data hook, generate the QR code and save it as an image file on your server.
Email Modification:
The cred_notification_recipients filter targets the specific form's notification email.
The QR code image is read from the server and prepared for attachment.
The wp_mail filter adds the image as an inline attachment using a CID.
The email content is modified to include an <img> tag that references the CID, ensuring the image displays within the email body.
All the recommendations given above are to be sure we do our best to help, but the question itself is a customization request which is way outside of our support scope. The code suggested above is just a general idea and there is no guarantee for a working solution.
The best way is to ask a developer to implement such a feature for you:
https://toolset.com/contractors/
