Email notification template - logo size

[andrixnet]

Logo image in the HTML template for email notifications should have a size (either width or height but not both) defined.

For example I am using on OCRO a SVG image which has a rather large pixel size if not restricted for display.

[stefopl]

@andrixnet Which email client (web, PC app, or mobile app) is having trouble with the logo? It looks fine for me in the web client and on the Xiaomi email app.

I’ve noticed that emails from opencaching.ro are going to spam. This might be because of an incorrect sender domain oc2.opencaching.ro or issues with SPF, DKIM, or DMARC.

[stefopl]

https://www.mail-tester.com/test-ebfdwrwhb

[andrixnet]

This is how it looks on PC, Mozilla Thunderbird email client:

This is how it looks on PC, Yahoo! Mail web interface

This is the generated HTML source of the email:

[andrixnet]

https://www.mail-tester.com/test-ebfdwrwhb

Thanks, I used it to improve some server settings.

[stefopl]

@andrixnet

All sites except opencaching.ro use a 64x64 PNG as the logo. You can see this best on their 404 pages:

• https://opencaching.pl/404
• https://opencache.uk/404
• https://www.opencaching.us/404
• https://www.opencaching.nl/404
• https://www.opencaching.ro/404

In the Git repository, we also have a dedicated .ro PNG available: https://www.opencaching.ro/images/oc_logo-ro.png

To fix this, you just need to update settings.inc.php $config['headerLogo'] on opencaching.ro to use the PNG logo.

Another option would be to replace the current SVG logo, which is 512x512, https://www.opencaching.ro/images/icons/oc_logo-ro.svg, with a 64x64 SVG version available here: https://ocpl.stefo.pl/images/icons/oc_logo-ro-v2.svg Since the current SVG isn’t in Git, it would be best if you replace it manually.

I checked in Outlook and Mozilla Thunderbird, and the 64x64 SVG displays well, but in Gmail SVGs unfortunately don’t show at all: https://css-tricks.com/a-guide-on-svg-support-in-email/ In general, SVGs are not ideal for email use, as they may not display correctly in some clients.

I suggest possible solutions:

1. Use a 64x64 PNG for the website and emails (fully supported across email clients).
2. Replace the 512x512 SVG with a 64x64 SVG (this improves support in Outlook and Mozilla Thunderbird, but not in Gmail).
3. Make a code change to use a separate logo for the website and emails (SVG for the website, PNG for emails). Is the SVG really necessary in this case?

[andrixnet]

All 3 suggested solutions are valid. There is another one:

4. modify email template to specify width and height for logo. (practically only width as it will resize proportionally) And the email display won't depend exactly on the pixel size of the image.

My initial intention was to have a good quality (ie vector = SVG) format logo that will scale to whatever size is needed and thus use a single file for likely all purposes where the logo is wanted.

On the other hand, I see your point about display problems in GMAIL.

Now my question changes to : how do I specify file_1 for website logo and file_2 for email template logo?

[stefopl]

I suggested options 1. and 2. because they don’t require changes that impact all sites.

1. Only needs a path change in settings.inc.php with $config['headerLogo'].
2. Only needs replacing the file with the one I attached. The result is similar to your suggestion, as it’s still an SVG file—fully scalable but with a default width set to 64px.

Option 3. would need adding something like $config['emailHeaderLogo'] in settings.inc.php and adding support in the code. If not defined, it could default to $config['headerLogo'].

When I have some time, I’ll work on implementing options 3 and 4. In the meantime, I recommend option 2 since the 512px SVG might affect more places than just the email and 404 pages. The 64px SVG is a safer choice that avoids issues elsewhere.

[andrixnet]

Understood. For now I will apply option 1.

Thank you.

[stefopl]

@andrixnet

You can test new solutions.

lib/settings.inc.php

$config['headerLogo'] = 'icons/oc_logo-ro.svg';
$config['emailHeaderLogo'] = 'icons/oc_logo-ro__64x64.png';

Duplicate #2286

[andrixnet]

Thank you