Variable webpack_asset

[woutsluiter]

I'm trying to include a different logo per locale:

{{ webpack_asset('@app/Resources/assets/images/logo-' ~ app.request.locale ~ '.svg') }}

But the compiler trows this error: Argument passed to function webpack_asset must be text node to parse without context.

Any suggestions on how to handle this sort of thing?

[mariusbalcytis]

In general, similar feature could be added as variables in assetic.

I tried to avoid it as it's usually best to include JavaScript files conditionally inside other JavaScript files - Webpack itself handles this pretty nicely and this results in "better" asset files (no duplicated content across different assets, better caching, conditional loading etc.) In this case, it's the image that's being loaded, so it's a no-go for Webpack itself if you want it to load instantly.

For the moment, you could do this manually:

{{ app.request.locale == 'en'
        ? webpack_asset('@app/Resources/assets/images/logo-en.svg')
        : (
            app.request.locale == 'de'
                ? webpack_asset('@app/Resources/assets/images/logo-de.svg')
                : webpack_asset('@app/Resources/assets/images/logo-es.svg')
        )
}}

Or by splitting into separate if-else statements.

I think variables would be nice, though. In such case it would be something like

{{ webpack_asset('@app/Resources/assets/images/logo-{locale}.svg', variables= {locale: app.request.locale} ) }}

And you would also need to configure all possible values for locale variable in config.yml file.

[woutsluiter]

That would be nice indeed. For now I think i will load it the old fashioned way.

[vicnicius]

@mariusbalcytis would you be willing to accept a pull request to implement such feature? I would love to give it a try.

[mariusbalcytis]

For now, I'm thinking about another option how this could be handled. Webpack parses the code and sees the patterns where variables in the string takes place, then searches files by these patterns. I think this option would be less complicated to set-up and would work out-of-the-box in most cases.

For variables:

• you should define exact variables in configuration;
• you should pass each variable in twig tag / function;
• you should make your (still) static string so that it matches something like img/logo-{locale}.png so that the code could make different variations;
• if any file would not be found by all configures variable values, bundle would most probably need to throw an exception. For example, if you configure en, de and es as possible variables for locale, you should have img/logo-en.png, img/logo-de.png and img/logo-es.png all available in the system.

With parsing concatenation:

• no additional configuration or passing variables in any specific way;
• glob pattern is made from expression and used to find all files available. This would mean that your production values should match available files in your repository, there would be no way to check if images for all locales are there etc. But this might be good, also, if you do not intend to use any other variable there;
• there might be problems with globing if there are lots of files that matches the pattern. I'm also not sure whether it should extend more than a directory (* vs ** in glob). I think it's better to be restrictive at first - it should suit most of the needs.

So, I'm going towards the second option - the given example would work out-of-the box in this case.

I'm planning to look into this, so reopening the issue. @vicnicius feel free to make a pull request if you're up to it, though.