Unable to see barcodes in Gmail

Created on 11 November 2024, about 1 month ago

Problem/Motivation

I need to send several barcodes inside of an HTML email

Steps to reproduce

Use the twig approach to render the barcodes - works fine in browser - but when passed via Gmail - all approaches fail.

Proposed resolution

Has anyone got success in sending barcodes via HTML email - to a web / Android Gmail mail client?

πŸ’¬ Support request
Status

Active

Version

2.1

Component

Code

Created by

πŸ‡¬πŸ‡§United Kingdom newaytech

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @newaytech
  • πŸ‡ΊπŸ‡ΈUnited States tr Cascadia

    Drupal core does not have support for HTML email. Because of that, you need to use other modules to send HTML email. You didn't say what you're using, and you didn't show the raw content of your email so I can't suggest what the problem may be. But there is a close to 100% chance that this has nothing to do with the Barcodes module. However, it may be that your email module doesn't support certain HTML tags, so one thing you can try is to use a different output format for your barcode.

  • πŸ‡ΊπŸ‡ΈUnited States tr Cascadia
  • πŸ‡¬πŸ‡§United Kingdom newaytech

    Thanks for the feedback and all the work on the module - it's a great resource. I'm using the MimeMail module combined with the Sendgrid module - and have been using these for a while now to send HTML emails from Drupal Commerce (tables / buttons / images).

    The pertintent source of the HTML email is here:

    <span style=3D"vertical-align: middle;width: 400px; displ=
    ay: inline-block;"><img alt=3D"Embedded Image" src=3D"data:image/png;base64=
    ,iVBORw0KGgoAAAANSUhEUgAAAZAAAACgAQMAAAAYfKiWAAAABlBMVEX///8AAABVwtN+AAAAAX=
    RSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAGpJREFUWIXty7ENgCAURVFcQFs6Z7Cz+=
    zMZB2ADHIFVfvcHYQEpTQjKGCbc27y84jhHRESDpf5N5XrU53q0ydac7lnM91mKSXYhiu65hrhp=
    f2cTg0AgEAgEAoFAIBAIBAKBQCB/JERENFgfUP01AsCN8GsAAAAASUVORK5CYII=3D"></span>
                    </td>
                  </tr>
                  </tbody>
                </table>

    I have read that embedded images do not work with Gmail?

    Once I have this working for Gmail - I'll move onto using Litmus to test the most popular email clients before delivering the solution to my client.

    I tried svg - and they don't work with many email clients either

    Is it possible to generate a filesystem image to the public web folder with the module - once I've done that - I can refer to the real png from within the email. I have a hunch that may be the lowest common denominator we need to drop to...

  • πŸ‡ΊπŸ‡ΈUnited States tr Cascadia

    Is it possible to generate a filesystem image to the public web folder with the module - once I've done that - I can refer to the real png from within the email. I have a hunch that may be the lowest common denominator we need to drop to...

    You can certainly use the provided drush command to generate actual binary PNG images and save them in an image filed or on the public file system. See drush help barcodes:generate for an example of how to use this command.

    I have thought of doing this automatically, much the same way the core image module generates new scaled/cropped/etc. images styles with image effects on the fly from a original image stored in an image field. The idea would be to generate binary barcode images encoding the text value stored in some field, and dynamically generate an HTML img element containing the URL to this image rather than an img element with a base64-encoded version of the image. The basics of this aren't hard, but the details require a lot of work to manage the filesystem and caching to make sure you don't generate a new image every time but also make sure you re-generate the image when the barcode text is changed. That's a lot of code - the core image module is not small.

    I would want to first do a lot of research to see if there are any existing contributed modules that display text fields as images, and try to hook into those - that could be a simple way to leverage other modules. Or there could be some other clever way to do this. But for now the only way would be to use an image field on your nodes and generate the barcode manually using the drush command then upload that image into the image field.

  • πŸ‡¬πŸ‡§United Kingdom newaytech

    I have an opportunity on code to generate the image. Drush would be more work to perform at run time. Are there any public methods / services we could leverage?

  • πŸ‡ΊπŸ‡ΈUnited States tr Cascadia

    No 1-line call, but it's only a few lines of code:

    use Com\Tecnick\Barcode\Barcode as BarcodeGenerator;
    
        $generator = new BarcodeGenerator();
        $barcode = $generator->getBarcodeObj(
          'QRCODE',
          $value,
          (int) $options['width'],
          (int) $options['height'],
          $options['color'],
          [
            (int) $options['padding_top'],
            (int) $options['padding_right'],
            (int) $options['padding_bottom'],
            (int) $options['padding_left'],
          ]
        );
        $png_image = $barcode->getPngData());
  • πŸ‡ΊπŸ‡ΈUnited States tr Cascadia

    Oh, and also try the htmldiv output format - that should be accepted by any mail program as it is just HTML div tags with background color set to make the barcodes. It's a little more verbose, but it should work unlike the svg tags which aren't well supported by mail clients.

  • πŸ‡¬πŸ‡§United Kingdom newaytech

    Got this running by generating the png's and referencing the image with an absolute URL inside an img tag. Thanks for the help!

     $generator = new BarcodeGenerator();
        $barcode = $generator->getBarcodeObj('C39E', $voucherCode, 240, 60, "#000", [30, 10, 30, 10]);
        //Save image to folder
        $directory = "public://vouchers/";
        $this->fileSystem->prepareDirectory($directory, FileSystemInterface::CREATE_DIRECTORY);
        $this->fileSystem->saveData($barcode->getPngData(), $directory . $filename, FileExists::Replace);
Production build 0.71.5 2024