Issue with Weglot – media translation (logo image file) not working

Hi forum,

My bilingual (English/French) site uses the Weglot plugin.

I need 2 logos translated on my website. One is a smaller submark-type logo. It sits in my banner and switches consistently, as it should. I've never seen it do anything unexpected.

The other is my main logo, which appears on my home page. This one switches over in certain browsers; sometimes consistently, sometimes not at all, and in certain cases, when it feels like it, or so it seems. There's no rhyme or reason to it.

I've scoured all the forums for tips. A number of people seem to have this problem, but I haven't found a straightforward fix.

I wonder if a feature called "lazy loading" might have anything to do with this. This may be enabled in Squarespace, or on my site at this time, by default. 

I found this plugin on this forum, but I have no idea if this is safe to integrate. I tried inputting it as header code injection, and it seems to work – but then a few ugly lines of code appeared on the page.

https://flintstitch-beadwork.squarespace.com – pw: bluesky

Here's hoping... Thanks!

NOTE: The media translation for my main logo does not work at all in a recent version of Chrome for mobile.

UPDATE: I think I've finally solved this. Posting pointers here because it's a simple fix that took way too long to figure out due to there being a shortage of posts on this particular sticking point.

I found this strategy on a Weglot forum, and it seems applicable to Squarespace. Bubble is another CMS that uses Weglot.

As I understand it, my home page logo, unlike the logo added to my header, is a dynamic element: an image file contained in a fluid engine block. From the Weglot dashboard: "Weglot might not translate some parts of your website that are dynamic and that we don’t detect by default. With this option, you can specify, using a CSS selector, what HTML block is dynamic and should be actively detected by Weglot."

Now for the quick fix:

I inspected the logo on my home page which wasn't responsive to language switching, and tracked down its fluid engine block identifier, which looks like "fe-block-[a bunch of letters and numbers].

Then I went to the Weglot dashboard > Settings > Squarespace Settings > Add dynamic. I typed a period, pasted my fe-block identifier and labeled my dynamic element, as seen below, and hit save.

My home page now seems to reliably respond to language switcher toggling on all systems tested.