Upload SVG Logo images in admin panel

Hi, I have uploaded a SVG image as the logo file in the Canvas admin panel. This is the logo that is shown on our header and other places, and this generally works fine. However, we do get the following message:

image

Additionally, our sendgrid emails do not have logo in them (show error instead). How can we give canvas a separate file for sendgrid so that we do not have to replace our SVG file with a PNG everywhere on the website.

Why don’t we just upload a PNG like the error message suggests? Because the logo looks a lot sharper on screens of different sizes when using an SVG compared to a PNG. And that’s not a compromise we are willing to make. So ideally we want to find a way to be able to point sendgrid to the PNG version of the images in some other way.

2 Likes

Hello Bubble dev,

Thanks for posting.

This is an issue we are aware of and had a discussion about it several months ago. If I remember correctly, at that time we didn’t build any solution but just added the warning message that you posted above. Let me double check about this with the team.

Chris

Hello,

This is a feature that we released in version 3.2.0, so all apps created after February 17, 2021 already have a separate email logo.

For older apps, there is not an out of the box solution. One option would be building this functionality by adding an “Email icon” field to the Website object and using that “Email icon” PNG file only within the email workflows.

Hope this clears up your question. Let me know if you have any other questions!
Chris

Thanks for looking into this. Do you have a set of instructions that one might follow to do this? I’m sure others have similar challenge.

We don’t have a set of instructions - I think we’ve only done this once, when updating the base template.

My advice would be to use the search tool to find all the places that the logo is used, and go through and replace the appropriate ones with the new Email Logo field that you add to the database. Be sure to replace both the light and dark colored logo images.
image

If you’d like admins to be able to edit this logo from the admin page, then you’ll need to find the place where logos are assigned, add an extra PictureInput element there, and set up the Bubble logic for that. In apps on version 3.0.0 until the current version (3.4.5), logos are assigned in the admin_options reusable. Older apps will have the logo assigned in a different place, and that place can be found using the search pictured in the screenshot above.

Thanks,
Chris

2 Likes

This is helpful, thanks!

1 Like

@chris there’s a bug in the template. I’ve uploaded different logos in Website Dark Logo and Website Light Logo field. However, the website always shows the logo uploaded in the Website Dark Logo field. Could you please help me fix this?

@cmarchan

Hello @development

It would seem that some part of the logic that shows one vs the other logo may be missing or buggy.

One way to debug is to review how the default logic comes with the template and mimic it in your application.

Check you app’s version and look for it in this link. Once you find it open the read-only Bubble editor for it so that you take a peek inside default logic.

Locate the element that displays the image you need and back track the logic that supplies the image displayed and see how one is displayed vs the other and apply a fix.