Symfony2 framework image doesn't appear - php

I've got an image on our website that we've had to change as it was a .ico image which isn't widely supported on browsers like google chrome. It was also quiet large so it needed reducing in size. So we've changed the image to info-icon.png rather then server-image.ico.
So, now that we have changed that, run the following commands:
php app/console assetic:dump --env=prod --no-debug
php app/console assets:install ../web --env=prod --no-debug
php app/console cache:clear --env=prod --no-debug
php app/console cache:warmup --env=prod --no-debug
All have come back fine and haven't reported any issues. When we go to our website and look at the source code we can see that the image url has changed to info-icon.png however the link is a 404 error code. The twig code for the image is below:
{% image output="/images/info-icon.png"
'#MyBundle/Resources/public/images/info-ico.png'
%}
<img src="{{ asset_url }}" alt="">
{% endimage %}
P.s. The image name is info-ico.png it isn't a typo we wanted to show the image as a different name. This is also in production mode.
If anyones interested this is the code for the assetic config:
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: [ 'MyBundle' ]
node: /usr/bin/nodejs
#java: /usr/bin/java
filters:
cssrewrite: ~
uglifycss:
bin: /usr/local/lib/node_modules/uglifycss/uglifycss
no_copyright: true
#apply_to: ['.css$']
uglifyjs2:
bin: /usr/local/lib/node_modules/uglify-js/bin/uglifyjs
no_copyright: true
#apply_to: ['.js$']
optipng:
bin: /usr/bin/optipng
apply_to: "\.png$"
jpegtran:
bin: /usr/bin/jpegtran
apply_to: ['.jpe?g$']
progressive: true
I've also tried clearing the cache manually, using a symlink on the assets:install command and nothing seems to work. Has anyone got any idea's?

The issue was with the assetic:dump command and mis-configuration.
I was running the command with the --no-debug so I couldn't see what was happening however I was getting random characters appearing when running this command. The command was outputting the PNG encoding as the modules for optimising the jpeg's and PNG images were not installed on the production server so simply removing these from the config file and then clearing the cache and warming up the cache. I then run the assetic:dump command again which resolved the issue.

Related

Symfony assetic cssrewrite image path in app/Resources

I've got a problem with assetic and the path of my images in CSS on Symfony.
My base template, my base CSS, and the images used in this CSS are in the folder app/Resources.
I have this:
app/
Resources/
public/
css/
base.css
images/
mybackground.png
views/
base.html.twig
In the file base.css, I want to load the file mybackground.css as a background, so I have this line:
background-image: url('../images/mybackground.png');
And in the file 'base.html.twig', I load the css with:
{% stylesheets '#base_css' filter='cssrewrite' %}
<link rel="stylesheet" type="text/css" charset="utf-8" media="all" href="{{ asset_url }}" />
{% endstylesheets %}
I also tried without the filter cssrewrite.
In app/config/config.yml, I have this:
assetic:
filters:
cssrewrite: ~
assets:
base_css:
inputs:
- '../app/Resources/public/css/base.css'
Before try, I used all of these commands:
php app/console cache:clear
php app/console cache:clear --env=prod
php app/console assetic:dump
php app/console assetic:dump --env=prod --no-debug
php app/console assets:install --symlink web
As you can guess, my background image isn't loaded (the browser returns a 404 not found error).
I searched a lot on internet, and I found similar cases but with the resources in some bundles not in app/Resources.
When you create a public directory in the Resources directory of your bundle, and run the assets:install --symlink command, a symbolic link is created in the web/bundles directory, corresponding to the name of your bundle.
Also, to retrieve your image, you should use the relative path of the web directory instead of the absolute path of your asset, which is :
/bundles/bundlename/images/background.jpg
EDIT
If you really doesn't want to place them inside a bundle, just move them from the app/Resources directly to the web folder, and call it in your css using :
url('/images/background.jpg');
See symfony2 how to access app/Resources/img from browser?
after calling assets:install and assetic:dump you will find your files in the web-directory (webservers document root) all files NOT in /web are not accesible by httpd so just take a look at your /web folder and look inside the bundles folder
so the relative path would be
/bundles/bundlename/images/background.jpg
this you can use in your css file

PHP symfony2 bootstrap assetic:dump error

I am trying to use twitter bootstrap in my symfony2.7 project. This is the content on my composer.json file:
"require": {
...
"braincrafted/bootstrap-bundle": "dev-master",
"leafo/lessphp": "0.4.0",
"twbs/bootstrap": "3.0.*",
"jquery/jquery": "1.11.*"
},
Then I configure assetic as follows:
lessphp:
file: %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php
apply_to: "\.less$"
cssrewrite: ~
braincrafted_bootstrap:
less_filter: lessphp
Then the console response is this one when I do the assetic:dump:
PS D:\Web\job-bid> php app/console assetic:dump --force web
Dumping all dev assets. Debug mode is on.
10:17:49 [file+] web/css/bootstrap.css
[Exception] Failed to assign arg #list: line: 50
assetic:dump [--forks FORKS] [--watch] [--force] [--period PERIOD]
[--] []
PS D:\Web\job-bid
What could the problem be?
Edit:
Well I have changed to the latest version of bootstrap 2 and it gives me a different error:
PS D:\Web\job-bid> php app/console assetic:dump web --force Dumping
all dev assets. Debug mode is on.
16:43:18 [file+] web/css/bootstrap.css 16:43:19 [file+]
web/css/bootstrap_bootstrap_1.css 16:43:21 [file+]
web/css/bootstrap_form_2.css 16:43:21 [file+] web/js/bootstrap.js
[RuntimeException] The source file
"D:\Web\job-bid\app/../vendor/twbs/bootstrap/js/transition.js" does
not exist.
assetic:dump [--forks FORKS] [--watch] [--force] [--period PERIOD]
[--] []
PS D:\Web\job-bid>
AFAIK http://leafo.net/lessphp/ is not compatible with Boostrap 3 > 3.0.0, see https://github.com/leafo/lessphp/issues/503
see this more complete answer: https://stackoverflow.com/a/20914166/4989952

Assetic CSS background images not loading but have same filepath

I know this has been asked a few times before but I'm still having trouble getting my CSS background images to work with assetic.
I've read Path of assets in CSS files in Symfony 2 and all my background images are set to ../images in my CSS:
background: url(../images/icons/icon.png)
And in my twig files as:
{% stylesheets 'bundles/commondirty/css_original/c.css' filter="cssrewrite" %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
I've tried clearing all my cache stuff with:
php app/console cache:clear --env=prod --no-debug
rm -rf app/cache/*
rm -rf app/logs/*
Then as stated in the above answer:
php app/console --env=prod assets:install web
php app/console assetic:dump --env=prod
This works locally ('app.php', 'app_dev.php', and '/'), but as soon as I upload the files to production it fails to load background images.
Both local and production CSS is as follows so I don't understand why it doesn't work?
url("../../bundles/main/images/icons/lrg_coin.png")
Permissions? Do I need to reload/clear something?
Edit
cached CSS files on dev and prod are pointing to:
url(../../bundles/main/images/icons/lrg_coin.png) when I'm guessing it needs to be ../ not ../../? How can this be changed?
Ok, I figured what I was doing wrong so thought I'd post for future reference. I had use_controller set to false in my prod_config.yml which was overriding my config.yml settings (which dev_config.yml uses)
assetic:
use_controller: false
Changing this to true and clearing/reloading everything as stated in my question solved the issue. I knew it was something simple.

Symfony2 - Attempting to view my site in prod environment results in a blank screen; no errors/warnings in dev

Cross-posted from the official Symfony Google Group because time is an issue:
I'm in the final push to upload my site to my host. Everything runs fine in the dev environment - no errors, no warnings. When I attempt to access it in prod (localhost/web/app.php/), I get a blank screen. I attempted to clear the cache, to see if that would help, but got the following error:
$ app/console cache:clear --env=prod
[Symfony\Component\DependencyInjection\Exception\InvalidArgumentException]
The parameter "kernel.trusted_proxies" must be defined.
I can clear the dev cache without issue.
Please help.
You'll need to add trusted_proxies to your config, even if it is blank.
Within: app/config/config.yml add:
framework:
trusted_proxies: ~
You'll also likely want to delete your cache files (app/cache/prod) and then run your console cache clear ($ app/console cache:clear --env=prod)

Symfony2 and Assetic - cssrewrite works perfectly for dev, not for prod

I include my CSS with the following code:
{% stylesheets 'bundles/majorproductionssewingdivasite/css/*.css' filter='cssrewrite' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
In dev, this allows me to use image sprites without any problems. The resulting URL to my sprite is:
http://localhost/diva/web/bundles/majorproductionssewingdivasite/images/diva-sprites.jpg
But, in prod, it gets mapped to:
http://localhost/diva/bundles/majorproductionssewingdivasite/images/diva-sprites.jpg
Notice the lack of web directory.
The generated code in the CSS file is as it should be, and all my CSS (both the dev 'chunks' and the finalized prod assetic dump) are at web/css/. Any ideas as to why the prod environment is skipping the web directory?
EDIT: what's weird is that both dev and prod generate the same URL in the CSS itself:
url('../../bundles/majorproductionssewingdivasite/images/diva-sprites.jpg')
Solution is to dump the assets in the prod environment:
$ app/console assetic:dump --env=prod
Remember to Clear the Cache
php app/console cache:clear --env=prod --no-debug
berore
php app/console assetic:dump --env=prod --no-debug
Also remember to appropriate configure assetic, in your config_prod.yml set as below:
assetic:
use_controller: false
Edit:
As said in Symfony docs (actually in chapter refers to dev environment): tell Symfony to stop trying to process these files dynamically
In debug mode, Assetic 1.1 also seems to rewrite CSS even when it's not in the {% stylesheets %} tag. So it's worth checking that's there when you turn off debug in production.

Categories