Is there a way I can extend Assetic so it will allow me to have it load my images from a CDN which I configure somewhere else. If I can write a plugin/extension/event listener/etc which allows fine-grain control, that would be awesome.
Likewise, are there any hooks for the assetic:dump console command which I could use so when I perform a dump I can automatically push images from the local box to the CDN (since I want the images to load locally on dev)?
Basically, I want to be able to have an images sitting somewhere in on my local machine, say:
web/images/image.png
On dev, when I do something like:
asset('images/image.png')
It would spit out a URL like this on dev:
http://1.2.3.4/images/image.png
And on production it'd spit out something like:
http://my.cdn.net/images/image.png
And when I run assetic:dump, the image is automatically uploaded.
Thanks.
Check out this link: http://symfony.com/doc/master/reference/configuration/framework.html#assets-base-urls
You can add a base url in your config.yml like:
framework:
templating:
assets_base_urls:
http: my.cdn.net
Since Symfony 2.7, configuration has changed:
framework:
assets:
base_urls:
- 'http://cdn.example.com/'
check out :
http://symfony.com/blog/new-in-symfony-2-7-the-new-asset-component
Related
I'm using Symfony2 and Assetic. Lately I've been doing a lot of CSS work so at a certain point I needed the command
$ php app/console assetic:dump --env=prod --no-debug
Ever since I've used it I need to run that command everytime I change CSS to see the difference. Now I've did some research and found out that I can put Assetic in to watch mode so I don't have to run the command above after every change using the following command:
$ php app/console assetic:dump --watch --env=prod
However, I just want it back to before I put it into this manual mode. The Symfony2 documentation explains how to do an assetic dump, but not how to put it back in dynamic mode (http://symfony.com/doc/current/cookbook/assetic/asset_management.html#dumping-asset-files)
Does anyone know how to put it back in dynamic mode?
There are two likely possibilities for Symfony not dynamically serving assets from the internal controller:
1. assetic.use_controller is not really true
Confirm 100% you are telling Symfony assetic.use_controller is true. One straightforward method of debugging would be adding this to the top of your controller action and reloading the page:
var_dump($this->container->getParameter('assetic.use_controller'));die();
Not getting true as a return value could mean you are overriding use_controller in either config_dev.php or config_prod.php depending on what environment you are pointing at.
2. Your web server is checking for static assets before passing to Symfony
Most webservers can be configured to check if a URL points to a physical file asset and deliver that file. So if you have dumped assets in Symfony, the webserver might be serving that file and not passing the request onto Symfony.
For nginx see: http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files
For apache see: Apache rewrite rule similar to Nginx try_files
The solution would be to remove the dumped asset files from the file system. Their location depends on where you configured them to go, but check in web/js, web/bundles, etc.
I would like to use the Amazon Cloudfront service as a CDN.
My question is:
How can get Gregwar/ImageBundle to work with S3?
So this:
{% set img_path = asset('assets/' ~ app.request.get('product_id') ~ '/images/' ~ contents.background) %}
<img src="{{ web_image(img_path).forceResize(1000) }}" alt="{{contents.title|default('') }}">
generates this:
https://s3-cdn.com/cache/f/5/f/1/4/f5f1407eb85e38e94019a03082b10611f57b22e5.png
instead of this:
/cache/f/5/f/1/4/f5f1407eb85e38e94019a03082b10611f57b22e5.png (local fylesystem)
Some update:
I could figure out the asset dumping with this:
Dump Symfony2 assets to Amazon S3
I can not set the permission to readable for the public.
I have written a stream wrapper for S3 (protocol) in Symfony.
Also it seems that the Gregwar/ImagineBundle does not support CDN...
As you track down the upload folder config, you can see... tell me if i wrong...
Other thing:
https://github.com/symfony/symfony/issues/4014
Closing as generating the cache directly on S3 won't be supported as
there are many other ways to move files from the computer where you
generated your cache to S3.
by fabpot
Anyway it is sorted out as I can use the assetic:install in symfony command line, just could not figure out setting the public access for the uploaded/generated assets with S3 streamwrapper...
Problems remaining:
symfony assetic install/dump to S3 with the right settings so
available for the public
Gregwar/ImageBundle -> generated images (ie.: forceResize(), usually to /web/cache/...) to CDN
Another update:
symfony assetic install/dump -> I decided to use Bower and Grunt to get the same result. Still no idea how to add that public amazon ACL thingie for the command line... sorry, add a comment here if you know
image uploads -> I am on to "extend" the symfony UploadedFile so when that is triggered to move the file, than the official AWS SDK S3 take over the process and handles it... will let you know with the solution.... [update] I could not modify the move method in a "standard" or non-hacking way. So I created a helper class (using the SDK) and did refactoring with it on the right places.
the Gregwar/ImageBundle cache (after processing images based upon the Twig "function" you know .forceResize) still outstanding... any thoughts are welcome
Cheers
Greg
If https://s3-cdn.com will not change you can concatenate it for your src like this :
src="https://s3-cdn.com~{{ web_image(img_path).forceResize(1000) }}"
or make a twig extension to be cleaner or override the web_image function to build correctly your url and return the right one, overriding it would result on the bundle working only for S3.
update
This question is ambiguous, he wants to upload to S3 not read from it, the twig have nothing to do here.
for more information on the upload :
github.com/1up-lab/OneupFlysystemBundle/blob/master/Resources/… this is a nice bundle it uses the league/flysystem take a look at the page see how they handle uploads to amazon flysystem.thephpleague.com/adapter/aws-s3-v3
What are the different frontends that can be set with OneupUploaderBundle in the config.yml file?
I googled this and I found some frontend like: mooupload, blueimp.
What is the full list?
# app/config/config.yml
oneup_uploader:
mappings:
gallery:
frontend: blueimp # or any uploader you use in the frontend
Is it possible to use VichUploaderBunde as frontend in OneupUploaderBundle?
If you are curious about what type of configuration it supports and have no time to look in the documentation, then you can open the OneupUploaderBundle Configuration.php and take a look inside:
->enumNode('frontend')
->values(array('fineuploader', 'blueimp', 'uploadify', 'yui3', 'fancyupload', 'mooupload', 'plupload', 'dropzone', 'custom'))
->isRequired()
VichUploaderBundle is not a "frontend" bundle. It just provides a way to handle uploads and persist them in entities/models.
You can use VichUploaderBundle or OneupUploaderBundle but not both. However, you should be able to use any frontend you want (dropzone, FineUploader, MooUpload, etc.), it will just require a bit of integration work.
TLDR: How do I make Assetic scan for assets in Twig templates outside bundle?
I've got few registration wizards. Each of these wizards has it's own view directory, the file structure looks like this:
/SiteBundle/Wizard/General/Resources/views
/SiteBundle/Wizard/CountrySpecific/Resources/views
/SiteBundle/Wizard/[...several more...]/Resources/views
In config.yml I defined these paths for twig so I can use #general_wizard/template.html.twig paths:
twig:
paths:
"%kernel.root_dir%/../src/MyWeb/SiteBundle/Wizard/General/Resources/views": general_wizard
"%kernel.root_dir%/../src/MyWeb/SiteBundle/Wizard/CountrySpecific/Resources/views": country_specific_wizard
The problem is that assets used in these templates (inside the Wizard directories) are not dumped using assetic:dump. When I move the view sources to regular SiteBundle/Resources/views, then all the assets are correctly dumped.
Is there a way to make Assetic check the external templates too?
It is not possible with the stock assetic:dump (SF 2.3), as the /Resources/views/ path is hardcoded in the GeneratorBundle, which again provides the list of files to process to assetic. Of course, you could write your own command, but you would basically reinvent the wheel.
I would recommend to keep with the Resources/views convention, and create the subcategories below that:
/SiteBundle/Resources/views/General
/SiteBundle/Resources/views/CountrySpecific
That would have the same effect, and would not require you to write your own commands and mess around with SF2 internals.
I encountered the same problem after moving all templates to templates in the project root, as it will probably come to be in future versions of Symfony.
The simplest solution is to configure all assets in the configuration file and to locate the output files in the web directory, e.g., all bootstrap CSS files into web/css/bootstrap.css. A remaining difficulty is that referencing the assets with the javascripts tag doesn't work anymore because those tags have to be scanned by the Assetic Bundle to work. You have to do this the old-fashioned way, e.g., via {{ asset('css/bootstrap.js') }}.
With Bootstrap I encountered difficulties to make Glyphicons work, since the cssrewrite filter doesn't work as before. I went for Fontawesome at that point, but including your own copy of Glyphicons could also work.
I have a web site built on Symfony2 which uses twig templates, LESS, and assetic.
In order to cache bust assets, I'm simply using this in my config.yml:
framework:
templating:
engines: ['twig']
assets_version: 'asset-version-here'
And then I use the asset() function to load the asset and the cache busting is handled for me.
However, the concern I have is when I load my LESS (css) file, there are references to other files, and I would like to know how these files can be cache busted as well.
Example:
.someSelector { background:url('../images/filename.png'); }
How can I make sure that the referenced file, filename.png is cache busted upon deployment?
The asset files referenced in Twig using asset() are cache busted automatically upon deployment (I use a deployment script hook that updates the assets_version in the framework's config), but those referenced in a stylesheet are not.
How can I do this?
I didn't manage to find a natural solution to this issue. In the end because I needed to move forward, I just added a certain tag in the query string, e.g. {ASSETS_VERSION}, and then I search/replace this with the revision number of the project at deployment time as part of my deployment script.
I'm not proud of this solution but it did solve my problem in the short term until I can find a more elegant solution.