Symfony - Find asset name with assetic - symfony

I would like to know the names of my assets in a controller. I use assetic, so the assets names are random.
For example for my css, in my Twig I have:
{% block stylesheets %}
{% stylesheets filter='uglifycss' filter='cssrewrite'
'assets/css/bootstrap.min.css'
'assets/css/core.css'
%}
<link rel="stylesheet" href="{{ asset(asset_url) }}" />
{% endstylesheets %}
{% endblock %}
The result:
<link rel="stylesheet" href="http://local.example.com/css/c491e8f-285c78f.css" />
Now, I would like to find the name c491e8f-285c78f.css automatically in my controller.
I tried:
var_dump($this->get('assetic.asset_manager')->getNames(),
$this->get('assetic.asset_manager')->get('c491e8f')->getTargetPath());
The result:
array(3) {
[0] => string(7) "c491e8f"
[1] => string(7) "b011b98"
[2] => string(7) "f4e7a09"
}
string(35) "_controller/css/c491e8f-285c78f.css"
It's not bad, but I have cheated to find the "c491e8f" name... How I can know it's my css asset name ? And how I can find automatically the asset path ?

As you read the source code of bundle kriswallsmith/assetic you realize that it's not trivial to get the names of you assets
(assets have really unique names) and they are in the getNames() array in order of appeararance in the templates.
One of the solutions is to Using Named Assets
http://symfony.com/doc/current/assetic/asset_management.html#using-named-assets
in config.yml:
assets:
bootstrap_and_core:
inputs:
- 'assets/css/bootstrap.min.css'
- 'assets/css/core.css'
you will probably also need to run the command_php app/console assetic:dump
and then:
var_dump($this->get('assetic.asset_manager')->get('bootstrap_and_core')->getTargetPath());
string 'assetic/bootstrap_and_core.css' (length=30)
Names:
var_dump($this->get('assetic.asset_manager')->getNames());
array (size=1)
0 => string 'bootstrap_and_core' (length=18)
Twig:
{% block stylesheets %}
{% stylesheets filter='uglifycss' filter='cssrewrite'
'#bootstrap_and_core'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Also note:
you don't have to use {{ asset(asset_url) }} - it would be enough to {{ asset_url }}

Related

css and scss in twig file

I want to include a .css and .scss file in a twig template, is it necessary to write is this way?
{% stylesheets filter="sass"
"css/proposal/edit.scss"
"bundles/bmatznerfontawesome/scss/font-awesome.scss"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% stylesheets
"bundles/simplemde/debug/simplemde.css"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
I dont like the redundant writing, but when I try to link the css file in the first block that is filtered for scss files it wont work.
Remove the filter attribute and add an 'apply_to' option in your config :
// app/config.yml :
assetic:
# ...
filters:
sass:
# ...
apply_to: ".scss$"
Then you can group everything in the first :
{% stylesheets
"css/proposal/edit.scss"
"bundles/bmatznerfontawesome/scss/font-awesome.scss"
"bundles/simplemde/debug/simplemde.css"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Images in CSS Asset in Symfony2

I have the following problem:
I included the CSS File from fancybox into my base.html.twig file:
{% block head_style %}
{% stylesheets
'../vendor/twbs/bootstrap/dist/css/bootstrap.min.css' filter='cssrewrite'
'#Bundle/Resources/public/css/site.css' filter='cssrewrite'
'#Bundle/Resources/public/css/jquery.fancybox.css' filter='cssrewrite'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock head_style %}
My directory is the following:
The Problem I'm fancing now is that fancybox can't find the fancybox_sprite.png,fancybox_overlay.png and fancybox_loading.gif.
Here's one of the paths in the jquery.fancybox.css:
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('../images/fancybox_sprite.png');
}
Here's the path that the browser is looking for:
http://project/Resources/public/images/fancybox_sprite.png
What I also found out is that the /images directory won't be loaded into the /web dir, but in the /bundles dir, though I used assets:install, assets:install --symlink and assetic:dump.
Why can't the system read the images or why aren't the images loaded into the /web dir?
I found a few Questions on SO about this, but neither of them helped me.
Do not use the #Bundle notation with cssrewrite, it is known to fail -- read the second notice here.
You should instead write the relative path to your css files from the web folder. Once you have exported your assets using bin/console assetic:install, your new base.html.twig should read:
{% block head_style %}
{% stylesheets
'../vendor/twbs/bootstrap/dist/css/bootstrap.min.css' filter='cssrewrite'
'bundles/something_online/css/site.css' filter='cssrewrite'
'bundles/something_online/css/jquery.fancybox.css' filter='cssrewrite'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock head_style %}

Assets - How to hide bundle name?

When I launch this command :
assets:install web
Symfony copy my asset into something like :
web/bundles/mybundle/img/img.png
So when I use this ressources, I have to do something like that :
{{ asset("bundles/mybundle/img/img.png") }}
That way, this part "bundles/mybundle/" is public.
How can I hide this part ?
I know that it's easily done with assetics like that :
{% javascripts '#AcmeDemoBundle/Resources/public/js/*' output='js/main.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
But for media (images, videos...) it's a different story. Any Idea ?
Use Assetic for images as well as for js, then set the output to wherever you wish.
{% image '#AcmeFooBundle/Resources/public/images/example.jpg'
output='/images/example.jpg' %}
<img src="{{ asset_url }}" alt="Example"/>
{% endimage %}

Javascripts output variable for Assetic Bundle in Symfony2

Here is my code:
{% block js %}
{% javascripts filter='?yui_js' output='js/m/myfiles.js'
'#MyBundle/Resources/public/js/m/one.js'
'#MyBundle/Resources/public/js/m/two.js'
'#MyBundle/Resources/public/js/m/three.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
I would like to be able to change my output value based on variable.
something like this:
{% set myOutput = 'js/m/myfiles_v2.js'%}
{% block js %}
{% javascripts filter='?yui_js' output=myOutput
'#MyBundle/Resources/public/js/m/one.js'
'#MyBundle/Resources/public/js/m/two.js'
'#MyBundle/Resources/public/js/m/three.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
But when I do that i get "Unexpected token "name" of value "myOutput" ("string" expected). Is there a way around this?
I think you need to create own assetic filter which will extends yui_js filter and overwrite function to create name.
Assetic filter is a service implements FilterInterface.
Here is sample definition of you filter as service:
<service id="my.if.filter" class="MyBundle\FilterClass">
<tag name="assetic.filter" alias="my_alias" />
<argument></argument>
<argument>....</argument>
</service>
Here is a tutorial:
http://richardmiller.co.uk/2011/05/24/symfony2-make-your-own-assetic-filter/

Twig Assetic Stylesheets Among Several Templates

I'm trying to add stylesheets to an array so that as twig templates extend through a second and third levels the aggregated styles will carry through.
This topic is related to Combining Assetic Resources across inherited templates
From config.yml, I made a global array mystyles so that we can add to the list of necessary styles as we "bubble up" through the rendering process.
twig:
debug: %kernel.debug%
strict_variables: %kernel.debug%
globals:
mystyles: []
The first template called from my action is from CommunicatorBundle/Resources/views/Admin/Workspace.html.twig and I've set the specific style for this page called admin.workspace.css.
{% extends "DJCommunicatorBundle::base.html.twig" %}
{% set mystyles = ["#DJCommunicatorBundle/Resources/public/css/admin.workspace.css"]|merge(mystyles) %}
It extends CommunicatorBundle/Resources/views/base.html.twig which has it's own requirement data-table.css.
{% extends "DJSharedBundle::base.html.twig" %}
{% set mystyles = ["#DJCommunicatorBundle/Resources/public/css/data-table.css" ]|merge(mystyles) %}
Finally, we load the outermost template, SharedBundle/Resources/views/base.html.twig, which has it's own styles to add before all others.
<head>
{% set mystyles = ['#DJSharedBundle/Resources/public/css/global.css', '#DJSharedBundle/Resources/public/css/grid.990.9-col.css']|merge(mystyles) %}
{% stylesheets {{ mystyles }} %}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
{% endstylesheets %}
</head>
However, it breaks at this line
{% stylesheets {{ mystyles }} %}
inspite of this type of test that prints the array that I expect in the proper order
{{ mystyles|join(', ') }}
It seems that the {% stylesheets %} tag wants something like the following snippit to work (which is understandably not an array object, but a whitespace separated list of delimited strings).
{% stylesheets
'#DJSharedBundle/Resources/public/css/global.css'
'#DJSharedBundle/Resources/public/css/grid.990.9-col.css'
'#DJCommunicatorBundle/Resources/public/css/data-table.css'
'#DJCommunicatorBundle/Resources/public/css/admin.workspace.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
{% endstylesheets %}
Even then, I tried setting a string to such a long value and printing it, but this doesn't work either:
{%
set str = "#DJSharedBundle/Resources/public/css/global.css
#DJSharedBundle/Resources/public/css/grid.990.9-col.css
#DJCommunicatorBundle/Resources/public/css/data-table.css
#DJCommunicatorBundle/Resources/public/css/admin.workspace.css"
%}
{% stylesheets {{ str }} %}
I feel like the global should be a viable solution, though not currently working. Hopefully I'm close. What might fix this?
This is not possible right now because Assetic statically analyzes your templates to find any assets you've defined there. Supporting these dynamic cases is on the roadmap.

Resources