Forum Discussion

natalietrahan's avatar
natalietrahan
Guide
11 months ago

Showing SVG images based on Forum language

I am trying to show an SVG image based on Forum language. I would like to know the best way to complete this. I have tried putting the SVG content in custom text. I would also like to know if this c...
Claudius's avatar
Claudius
Boss
11 months ago

One possible solution would be going the CSS skin styling route and rely on the lang attribute on the root <html> object, e.g.

html[lang="de"] .lia-button-searchForm-action {
    background-image: url(/html/assets/icon_search-german.svg);
}

or even encode the SVG inline

html[lang="fr"] .SearchForm.lia-form-inline .lia-button-searchForm-action {
    background-image: url("data&colon;image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.4 21'%3E%3Cg fill=' %23000 ' fill-rule='evenodd' stroke=' %23000 '%3E%3Ccircle cx='8' cy='8' r='7.5' fill='none' /%3E%3Cpath d='M14.24 13.15l6.85 6.17c.38.35.4.94.05 1.34-.34.4-.94.43-1.33.07l-6.9-6.2c.48-.4.92-.85 1.32-1.38z'/%3E%3C/g%3E%3C/svg%3E");  
}

 

If you want to build it in a Freemarker component you should be able to obtain the current user's profile language via:

<#assign userLanguage = rest("/users/id/${user.id}/settings/name/profile.language").value>