CODEWITHSUNDEEP
javascriptjquerysass
Raul
Raul

Reputation: 3081

Sass/JQuery - Dynamic url for image

I have the following style on my page:

  div#mockUp {
    @include fancy-container(
      $background-image:
        url("../../assets/images/mock-ups/minimalist-profile-en.png"),
      $height: auto,
      $min-height: 95vh
    );
  }

And this JS script:


/**
 * Gets the device's browser language.
 *
 * @memberof module:i18n/Functions
 * @function getNavigatorLanguage
 * @returns {string | undefined} The language of the browser
 */
export default () => navigator.language ?? navigator.userLanguage;

I want to change the url of the #mockUp container based on the user language.

For example, if the user's lang is spanish, then the url should be "../../assets/images/mock-ups/minimalist-profile-es.png".

Can this be done with sass only? Should I use JQuery instead?

Upvotes: 0

Views: 47

Answers (1)

Valeriu Ciuca
Valeriu Ciuca

Reputation: 2094

You can do it from Sass, by adding an additional class to div#mockup like

<div id="#mockUp" class="lang-es" ..

And if the element has the class lang-es, include a different background-image:

div#mockUp {
    @include fancy-container(
        $background-image:
           url("../../assets/images/mock-ups/minimalist-profile-en.png"),
        $height: auto,
        $min-height: 95vh
    );
    &.lang-es { 
        @include fancy-container(
            $background-image:
            url("../../assets/images/mock-ups/minimalist-profile-en.es"),
            $height: auto,
            $min-height: 95vh
        );
    }
}

Upvotes: 1

Related Questions