0

I have created a custom JavaScript file in a Magento 2.1.7 theme that serves a different logo depending on the month.

The .js file is in app/design/ inside the theme’s /web/js/ folder. The logos are in the theme’s /web/images/ folder.

The .js contains switch/case code with relative links to the images ../images/logo1.png etc.

I assumed that once deployed and the files had moved to pub/static that it would work, but it didn’t. The images aren’t being transferred from the theme web/images folder to the pub/static images folder.

I have got it working by using links from the root to /pub/media/logos/logo1.png but are there better ways of achieving this? I would appreciate help. I’m assuming that there aren’t any directives with a shortcut to the pub/media folder that can be used in JavaScript?

  • Use url.build() function in js to get url path. – Prince Patel Sep 8 '17 at 5:07
0

You can set the URL in your PHTML file and pass it through to your JS like so:

PHTML

<script type="text/x-magento-init">
    {
        "*": {
            "yourJsAliasHere": {
                "imageUrl": "<?php echo $block->getViewFileUrl('images/image-name.jpg'); ?>"
            }
        }
    }
</script>

JS

define([
    'jquery'
], function ($) {
    'use strict';

    return function(config) {
        alert(config.imageUrl);
    }
});
| improve this answer | |
  • Is it possible without changes to the theme's phtml? I always try to avoid making changes to keep my upgrades easier and usually only create a module for more larger functions. The part of the js with the path I’m currently using is… case 8: case 9: case 10: logoimg = "/pub/media/logos/logo-autumn.png"; – SilkSpin Sep 8 '17 at 9:17
  • You could do it this way but it isn't much better than hardcoding it, personally I find following best practices to be better than using 'dirtier' methods just for the sake of not overriding a template. – Ben Crook Sep 8 '17 at 13:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.