Forum Discussion

natalietrahan's avatar
natalietrahan
Guide
8 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 can be showen by using the language api check.

In the meantime i will try to just upload the svg files as images and try based on custom text that way.

  • Claudius's avatar
    Claudius
    Boss
    8 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>