I've put a css file in MyDirectoryBundle/Resources/public/css.
I then linked to it using:
<link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
I checked if it worked
short test: body {color: #FF0000;}
Nothing changed.
The parent layout (layout.twig.html) is in app/Resources/views (3 level architecture).
I still don't understand why:
css does not work
why the command: php console assets:install web/ --symlink fails
-> answer: The target directory web does not exist. (it does exist, actually).
I am quite new to symfony2 (2 weeks practice only).
I am working on Windows - just in case this may explain something...
Thank you very much for your help!
If the file first lived in MyDirectoryBundle/Resources/public/css, it'll be copied to web/bundles/mydirectory/css. So you have to include it like: {{ asset('bundles/mydirectory/css/main.css') }}.
You should execute the command from the root of your project. As you're using php console, it seems like you're in the app/ directory when executing this command. In that case, app/web/ does not exists, so the error is completely valid.
As you're on Windows, there is a change that symlink is not allowed/available. I believe it's available for admins only since Windows vista.
As a side tip, if MyDirectoryBundle is your app bundle (a bundle tied to your app and not meant to be reused by other apps), I would recommend to put the CSS file in the web/ directory directly. There is no need to put it in the bundle in such a case (this is only related to bundles that are shared, so the CSS is shared as well).
use php app/console instead of php console
Related
I've just done a fresh install of the latest Symfony version. Inside my templates folder I've created a new folder called website which contains a base.html.twig and a home.html.twig.
File structure: templates/website/base.html.twig
Inside my public directory I've created the following css/app.css. Now in my base I've done:
<link rel="stylesheet" href="{{ asset('css/app.css') }}" type="text/css">
Inside my stylesheet I'm just setting the body background colour to red so I know it works. For whatever reason it isn't loading my css. When I view source it appears as:
<link rel="stylesheet" href="/css/app.css" type="text/css">
and clicking the href I just get a Symfony 404. I cannot figure out why it isn't loading my static CSS file.
I don't want to use Symfony Encore as thats overcomplicating things for my project. I have also tried assets:install command and nothing installed or changed.
UPDATE:
I installed and done a basic setup with Symfony Encore in the hope I could at least get some CSS working. Still get the exact same issue.
If you want to use the asset funtion you have to install the component first with the following command:
composer require symfony/asset
That is really all there is to it if you do not wish to use webpack encore.
Optional: If you happen to use PHPStorm with the Symfony plugin, go to settings > symfony and change Web Directory from app to public for the new directory that Symfony 4 uses. This gives you all the autocomplete goodness and your references will work.
You should store your static files inside the assets directory at the root of your project. So just place the css-folder with the app.css-file in <root>/assets/css/app.css
Source: https://symfony.com/doc/current/best_practices/web-assets.html
I've added
"twbs/bootstrap" : "3.3.5",
"components/jquery" : "2.1.4"
to my composer.json file.
I've run composer:update with no problems.
However now it's time to use assetic to create the files and composer used symlinks to install the components and twbs folders.
In the ::base.html.twig I would write something like the following...
{% block stylesheets %}
{% stylesheets filter = 'cssrewrite'
'%kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/boostrap.css'
'%kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootsrtap-theme.css'
'#AppBundle/Resources/public/css/custom.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
however the path for the rewrite is not correct because of the symlink installed by composer...
My question: Where did the files actually go?
Or is there another syntax to get at the files in twig?
I guess I need this... '%kerner.root_dir%/path/to/the/files'
every thing that you install through composer json goes to vendor folder (outside web folder)
you should check under web/bundles/ folder if you are in a linux or osx OS, if you are under windows, i don't think you'll have symlinks (so probably it's a hard copy each time you make a composer update). anyway. i think you should never use %kernel.root_dir% on twig.
in my case one of the bundles i'm using are symlinked under web/bundles to the real folder. as example guzzle :
lrwxrwxrwx 1 odin odin 88 ago 9 13:47 guzzle -> ../../vendor/eightpoints/guzzle-bundle/EightPoints/Bundle/GuzzleBundle/Resources/public/
so probably the path you should be using is:
bundles/twbs/bootstrap/css/boostrap.css
bundles/twbs/bootstrap/css/boostrap-theme.css
bundles/yourbundle/css/custom.css
and instead of using the public folder of app, at least in the documentation recomends adding css, js, and img folder inside web (if you are using them in more than one bundle)
I think you just need to do a php app/console assetic:dump in the terminal to dump the required assets into your web folder where they'll be publicly accessible to reference in your code.
I have a gulp build process for my Symfony2 application and am trying to integrate cache busting, but have hit a roadblock. I use gulp-rev to append a hash to my concatenated javascript file and output a manifest file to map between the original and the hashed filename. I currently have a twig template that has a single script tag to import all my correctly built javascript files, but I need to find a way of updating that script tag to point at the version of the file with the correct hash, ensuring that a fresh version of the file is downloaded every time the hash changes.
I have thought of a number of solutions which I've described below, but none of them feel right. Does anyone have a better/correct solution, or some reasoning as to why I should go with one of the ways I have already thought of.
Use gulp-revreplace to replace the reference to app.js in my_template.html.twig to be a reference to app-8de7016eef.js as defined by the mapping in the manifest file. Problem: This will overwrite my actual template file if the command in run in my dev environment, leaving me with a dirty git tree and changes that shouldn't be committed.
Have gulp output an assets template file which is stored in public/html which is not committed to version control, and includes the correct script tag based on whether it was run on prod/dev environment (i.e. <script src='js/app.js'> on dev, and <script src='js/app-8de7016eef.js'> on prod. My main template can then #include 'public/html/assets.html.twig' and never needs to be overwritten. Problem: This gets increasingly complex when there are multiple templates that extend each other, and when there is both CSS and JS in separate blocks that need to be overwritten by other templates. It also feels messy to generate and output a twig file from my gulp task.
Use assetic to manage cache busting: instead of using gulp-rev I could use the {% javascripts 'public/js/app.js' %} <script src="{{ asset_url }}"></script> {% endjavascripts %} syntax of assetic and let that handle the cache busting for me. Problem: The whole point of using gulp was to move away from assetic, and if I have to use both gulp and assetic then the complexity is increased.
So has anyone solved the cache-busting with gulp and symfony problem? How did you do it?
You should make use of the two config directives:
framework.templating.assets_version
framework.templating.assets_version_format
You can read more about them in the documentation of the FrameworkBundle.
They do work with the regular {{ asset() }} function and don't require AsseticBundle.
Then just dump a parameter/config-file that assigns i.e. the md5sum of your compressed frontend source-files folder to assets_version in a git pre-commit hook.
.git/hooks/pre-commit
#!/usr/bin/env sh
echo "framework.templating.assets_version: $(tar -cf - ./src/Frontend | md5sum)" \
> app/config/assets_version.yml
app/config/config.yml
# ...
imports:
# ...
- { resource: './assets_version.yml' }
I have the code below (it's in my twig file) to attach a javascript file specific to this template.
<script type="text/javascript" src="{{ asset("bundles/myappmybundle/js/jobs.js") }}"></script>
It is working fine EXCEPT the fact even if I made changes to the javascript file, somehow my browser (firefox with firebug) is still loading a previous version.
I've tried:
clearing cache via php app/console
rm -rf app/cache/*
Any ideas on how to fix this?
Thanks a lot
It might be in two cases:
Your browser cached this js for you. Try to clear cache of your browser
You installed assets once with hard-copy option (by default). And after you changed files you didn't update your assets with php app/console assets:install.
To make your assets always synced with your bundle's code you can just run in CLI:
php app/console assets:install --symlink
It will create symlink to src/YourBundle/Resources/public folder in the /web/bundles/
I would like to know if it is possible with symfony 2 and Assetics to say that I want to load all of the css files in a specific folder even though this one has some other folders inside.
For example I have :
css/aaa.css
css/bbb.css
css/jquery/ccc.css
css/jquery/ddd.css
in assetics I would do that to load :
{% stylesheets 'bundles/my-bundle/css/*' %}
<link rel="stylesheet" href="{{ asset_url }}" media="screen" />
{% endstylesheets %}
this will only load aaa.css and bbb.css
Is there a way to say : 'take everything' in one single line (sure i could add each folder in the stylesheets tag but I want to know if I can avoid doing that)
Thank you
You can't do this thing directly with assetic as is yet but it's possible thanks to everzet and his AsseticPipeline class suite and will probably be brought in next Assetic major version.
So what to do now ?
test previous KnpRadBundle version by cloning it here
get more information about how to implement it in your project : read this discussion
Good luck.
In the app_dev environment, the files are processed for each request, and run through all the filters before they are provided by the Assetic controller. This is useful, because we will see every change directly:
In a production environment, this process is just too slow. In this case, Assetic is able to generate real files, which are static and can be delivered statically:
To generate the final assets, invoke the following script in your console:
$ php app/console assetic:dump --env=prod --no-debug
All the css will combine in the production environment.The above command will generate a css folder and a combined file into that folder.