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 %}
Related
I'm trying to display the calendar of adesigns CalendarBundle
https://github.com/adesigns/calendar-bundle
I followed the "Installation" and "Usage" parts, but nothing shows up
{% extends '::base.html.twig' %}
{% block title %}calendar{% endblock %}
{% block body %}
{% include 'ADesignsCalendarBundle::calendar.html.twig' %}
{% endblock %}
I don't know what to do, do I have to write something in the controller? create a bundle?
It works now
I added:
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
It's important about this problem the position of the links must be in the layout.html.twig or in this example in base.html.twig.
In the documentation the calendar-bundle only say the requirement of installation FOSJsRouting but they not say configuration this links is obligatory:
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
For this job I work with Symfony 3
Regards
Considering that Twig has it's {% for %} loops and it's {% image %} sections, is there something such as the following be done with Twig to return all images within the AppBundle/Resources/images/gallery/ directory? It would seem to make sense but I've not been able to find anything so far:
{% image #AppBundle/Resources/images/gallery/*.jpg %}
<img src="{{ asset_url }} />
{% endimage %}
Yes, that is possible. Assetic just doesn't distinguish between different file types:
{% image '#AppBundle/Resources/images/gallery/*' %}
<img src="{{ asset_url }}" />
{% endimage %}
This will render all images from the gallery directory, no matter the file extension.
The same can be done with CSS and JS files via
{% stylesheets '#AppBundle/Resources/css/*' %}
<img src="{{ asset_url }}" />
{% endstylesheets %}
{% javascripts '#AppBundle/Resources/js/*' %}
<img src="{{ asset_url }}" />
{% endjavascripts %}
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 %}
I searched a lot but could not find a solution to achieve this:
{% for i in 1..6 %}
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/'~i~'.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
{% endfor %}
Name of the images should be dynamic. Please help.
The above code throws error:
Unexpected token "operator" of value "~"
Solution:
According to what #Nic posted (accepted answer), the only workaround seems to be this:
{% for i in 1..6 %}
<li>
<img src="{{ asset('bundles/digicreekil/images/college/demo/facilities/thumbs/laboratory/t'~i~'.jpg') }}" alt='demo'/>
</li>
{% endfor %}
You can't use variables in Assetic (and therefore in the {% image %} tag).
The reason is, according to Kris Wallsmith (creator of Assetic):
(...) that Assetic needs to be able to parse a Twig template and extract any assets that are defined there. This is not possible if you use a variable in the tag.
Christophe Coevoet adds:
The assets are dumped when using the CLI command for this, not when rendering the page. So you cannot use variables as you don't have their values.
See this GitHub issue for the complete conversation.
Remember that Assetic creates and optimizes the assets when you run app/console assetic:dump, not when the page is actually rendered. Therefore, it cannot know of any values, it can only work with static assets.
So if you want to work with dynamic assets, you'll have to do something like this:
{% for i in 1..6 %}
<li>
<img class="facThumb" src="{{ asset('images/college/demo/facilities/thumbs/laboratory/'~i~'.jpg') }}" alt="Facilitiy"/>
</li>
{% endfor %}
In this case, you can iterate through the numbers 1-6 and use the variable in the asset's URL because you're not using Assetic, but Twig's asset() function. asset() simply returns the full URL of the asset, it doesn't do any optimizations so it can be executed during runtime.
But if you want to use Assetic's optimizations and filters, you can also give it the static assets:
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/1.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/2.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/3.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
(etc.)
This way, you'll have to copy the same code 6 times, but it allows you to use Assetic.
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/