Work with theme assets¶
To install theme assets you need to run sylius:theme:assets:install
command.
Theme assets (JavaScript, CSS etc. files) should be placed inside the theme directory. There are few ways of reading theme assets in your Twig templates. The below how-to describes where to place the assets, how to install it and use it.
Load assets from the theme’s public directory (app/themes/<theme-name>/public
)¶
- Put the
example.css
asset file inside<theme-name>/public/css/
directory. - Install assets by running command:
php bin/console sylius:theme:assets:install
. - Make use of the asset file in twig templates:
1 2 | <!-- loads test.css file directly /public/css/ in theme directory -->
<link rel="stylesheet" href="{{ asset('theme/css/example.css') }}" />
|
Load assets from the public web
directory¶
- Put the
example.css
asset file directly insideweb
directory. - Make use of the asset file in twig templates:
1 2 | <!-- loads asset file directly from `web` dir (`web/example.css`) -->
<link rel="stylesheet" href="{{ asset('example.css') }}" />
|
Generate simple links for current theme assets¶
If You need to get link to asset from outside of twig template then you can use this url:
1 2 3 | /public/{filePath}
ex. <link rel="stylesheet" href="/public/css/example.css" />
|
Where {filePath} is path for your file from public directory inside theme.
Load Service Worker files (from domain root level)¶
If You want to use service worker or manifest file (it must be placed in root level) then you can use this url:
1 2 3 | /{fileName}.{fileExtension}
ex. <link rel="manifest" href="/manifest.json">
|
Where {fileName} can be only sw
or manifest
.
Load bundles’ assets¶
- Install Symfony assets by running command:
php bin/console assets:install
. - Make use of the asset file in twig templates:
1 2 | <!-- loads bundle's asset file from bundles dir -->
<link rel="stylesheet" href="{{ asset('bundles/framework/css/body.css') }}" />
|
Override bundles’ assets from the theme¶
There is a possibility to override bundle specific assets. For example, you have AcmeDemoBundle
registered in your project.
Let’s assume there is a body.css
file placed inside this bundle (Resources/public/css/body.css
).
To override body.css
file from your theme, you need to place your new body.css
file inside app/themes/<theme-name>/AcmeDemoBundle/public
directory:
- Put the
body.css
asset file insideapp/themes/<theme-name>/AcmeDemoBundle/public
directory. - Install assets by running command:
php bin/console sylius:theme:assets:install
. - Make use of the asset file in twig templates:
1 | <link rel="stylesheet" href="{{ asset('theme/acmedemo/css/body.css') }}" />
|
Note
theme
prefix in {{ asset('theme/css/example.css') }}
indicates that the asset refers to current theme.