I want to declare my CSS using Assetic with this code :
# app/config/config.yml
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
and in the layout.html.twig:
{% stylesheets 'bundles/ocplatform/css/main.css' %}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
{% endstylesheets %}
The HTML element is generated :
<link rel="stylesheet" href="/Symfony/web/app_dev.php/css/519c4f6_main_1.css" type="text/css" />
But the CSS file is not loaded, I don't know why. Can you help me!
Related
Good morning to you all,
I'd like to ask you for help because I don't understand where my problem with adding a favicon with Symfony 6 comes from.
I have two codes in mind, this one
<link rel="icon"
href="{{ '/images/' ~ 'favicon.jpg' }}"
type="image/x-icon"
src="" />
as well as this one
<link rel="icon"
href="{{ asset('/images/' ~ 'favicon.jpg') }}"
type="image/x-icon"
src="" />
None of the codes work.
I even get this error in Symfony when I put assets in my code, and I use yarn.
An exception has been thrown during the rendering of a template ("Asset manifest file "C:\wamp64\www\projet-conrad-angela/public/build/manifest.json" does not exist. Did you forget to build the assets with npm or yarn?").
<link rel="icon"
href="{{ asset('/images/' ~ 'favicon.jpg') }}"
type="image/x-icon"
src="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
If you have a solution, I would be delighted to help. Thank you.
You can do this:
<link rel="icon" type="image/jpg" href="{{ asset('favicon.jpg') }}" />
https://symfony.com/doc/current/reference/twig_reference.html#absolute-url
or
<link rel="icon" type="image/jpg" href="{{ absolute_url('favicon.jpg') }}" />
https://symfony.com/doc/current/reference/twig_reference.html#reference-twig-function-asset
and you can combine both:
<link rel="icon" type="image/jpg" href="{{ absolute_url(asset('favicon.jpg')) }}" />
I'm experiencing something (that i think is) very weird.
I'm running an ASP.net application, and I have no problems on the development build, but on the production build when minifying, the files are not found. When inspection the application in the browser, the two files not found, site.min.css and bootstrap.min.css, are residing in the Images- and the Fonts-folder respectively.
Please see screenshot below
[
{
"outputFileName": "wwwroot/css/site.min.css",
"inputFiles": [
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/lib/bootstrap/dist/css/bootstrap.min.css",
"inputFiles": [
"wwwroot/lib/bootstrap/dist/css/bootstrap.css"
]
},
]
And when included in the _Layout.cshtml:
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="~/css/site.css" asp-append-version="true" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="~/css/site.min.css" asp-append-version="true" />
</environment>
And folder structure:
Any help is appreciated.
why CSS is not loading when using segment URI in codeigniter
but it is working good when I remove the segment ?
this is how I link the css file
<title>TITLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- bootstrap -->
<link href="public/css/bootstrap.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<!-- Custom Theme files -->
<link href="public/css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="public/js/jquery-1.8.3.min.js"></script>
Controller
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class profiles extends CI_Controller
{
public function index()
{
$user_id = $this->uri->segment(2, 9);
$this->load->model('user_model');
$this->load->model('count_model');
$data = array();
$result = $this->user_model->read_user_information_profile($user_id);
$data = array(
'username' => $result[0]->username,
'fname' => $result[0]->fname,
'lname' => $result[0]->lname,
);
$this->load->view('profiles_view', $data);
}
}
Thanks in advance
Because you are using relative URLs for loading your CSS, it's trying to load it from /dir/profiles/public/css/style.css instead of /dir/public/css/style.css hence why it doesn't load.
You can either use absolute URLs in your CSS with:
<link href="<?php echo base_url('public/css/style.css'); ?>" rel='stylesheet' type='text/css' media="all" />
Or set a base tag before you try to load any CSS or JS:
<base href="<?php echo base_url(); ?>" />
See: http://www.codeigniter.com/user_guide/helpers/url_helper.html#base_url, note you may need to load the URL helper if you're not already.
Change the loading in this way:
<!-- bootstrap -->
<link href="<?php echo base_url(); ?>css/bootstrap.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<!-- Custom Theme files -->
<link href="<?php echo base_ur;(); ?>css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="<?php echo base_url(); ?>js/jquery-1.8.3.min.js"></script>
You don't need to config the base_url. It detect automatically
I have an ASP.NET MVC application that uses the Metronic template from keenthemes.
When i use bundles in my layout for my css , it doesnt work well. Most of the icons do not appear
If i switch to direct links then everything is ok.
Javascript is ok.
Bundles config and layout use:
bundles.Add(new StyleBundle("~/bundles/metronic-app").Include(
"~/assets/global/plugins/font-awesome/css/font-awesome.min.css",
"~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",
"~/assets/global/plugins/uniform/css/uniform.default.css",
"~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
"~/assets/global/css/components.css",
"~/assets/global/css/plugins.css",
"~/assets/admin/layout2/css/layout.css",
"~/assets/admin/layout2/css/themes/default.css",
"~/assets/admin/layout2/css/custom.css"));
#Styles.Render("~/bundles/metronic-app")
Direct links:
<link href="~/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
<link href="~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME STYLES -->
<link href="~/assets/global/css/components.css" rel="stylesheet" type="text/css" />
<link href="~/assets/global/css/plugins.css" rel="stylesheet" type="text/css" />
<link href="~/assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css" />
<link id="style_color" href="~/assets/admin/layout2/css/themes/default.css" rel="stylesheet" type="text/css" />
<link href="~/assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css" />
Here are the errors from chrome console:
I should have been using the CssrewriteUrlTransform class in my bundle configuration in order to make the asset's paths absolute.
What worked is this:
bundles.Add(new StyleBundle("~/bundles/metronic-app").Include(
"~/assets/global/plugins/uniform/css/uniform.default.css",
"~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css",
"~/assets/global/css/components.css",
"~/assets/global/css/plugins.css",
"~/assets/admin/layout2/css/custom.css")
.Include("~/assets/admin/layout2/css/layout.css", new CssRewriteUrlTransform())
.Include("~/assets/admin/layout2/css/themes/default.css", new CssRewriteUrlTransform())
.Include("~/assets/global/plugins/font-awesome/css/font-awesome.min.css", new CssRewriteUrlTransform())
.Include("~/assets/global/plugins/simple-line-icons/simple-line-icons.min.css",new CssRewriteUrlTransform()));
Hint from this SO Question
I've created a new environment called 'staging' which is pretty much the same config as the 'production' environment and I'm trying to use yui_compressor on my css and js files. Please see an example of my css files below:
{% stylesheets output='css/compiled/main.css' filter='?yui_css' filter='cssrewrite'
'bundles/xyz/lib/frontend/css/social_foundicons.css'
'bundles/xyz/lib/frontend/css/general_enclosed_foundicons.css'
'bundles/xyz/lib/frontend/css/general_foundicons.css'
'bundles/xyz/lib/frontend/coda/css/coda-slider.css'
%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}
<!-- Google fonts -->
{% stylesheets output='css/compiled/fonts.css' filter='?yui_css' filter='cssrewrite'
'bundles/xyz/lib/frontend/css/fonts.css'
%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}
<!-- Included CSS Files -->
{% stylesheets output='css/compiled/style.css' filter='?yui_css' filter='cssrewrite'
'bundles/xyz/lib/frontend/css/style.css'
%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}
When deploying using capistrano the following files are created:
/web/css/compiled/fonts.css
/web/css/compiled/main.css
/web/css/compiled/style.css
This I assume is correct, however the header in my application renders the following:
<link rel="stylesheet" type="text/css" media="screen" href="/css/compiled/main_social_foundicons_1.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/compiled/main_general_enclosed_foundicons_2.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/compiled/main_general_foundicons_3.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/compiled/main_coda-slider_4.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/compiled/fonts_fonts_1.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/compiled/style_style_1.css" />
None of the above files exist on the server and I assume it should be calling /css/compiled/fonts.css, main.css and style.css.
Anyone know why it's doing this?
Thanks
The problem was that I had debug mode set to true for the staging environment.