I am trying to create my own template with Symfony 2, but the problem is with the CSS when I write backround:url('images/img.png') the image doesn't show, but in my base.html.twig this URL works very well "{{ asset('images/templatemo_ads.jpg ') }}".
I have put my CSS and images folders into web folder because I will use them in other bundles and I use this command to activate assets PHP app/console assets:install web.
background:url() is conflict the default function of url() in the symfony/asset bundle.
Try inline js:
$('.test').css("background", "url({{ asset('images/templatemo_ads.jpg ') }}) no-repeat");
You should use "./" or "../" at the start of the CSS url.
When you use it, it says to the file system to look into the file system from the CSS file, when you don't you are setting a path to add after the current URL to look for the file there (associated with symfony routing, it might work on the homepage if it's the naked domain name, but that's it.)
You should avoid using JS on file sourcing, since people might block it.
Related
I'm trying to create custom page in Ghost. I named file "news.hbs" for listing all the news items. Also I use webpack. Why while creating new custom page in template all the routes are matching as "news/*"? For example, while webpack generates "news.hbs" file, Ghost requires not an original path "img/header-bg.png", but an "news/img/header-bg.png". How to handle that? In main file "index.hbs" all the paths are valid, without extra folder's names.
You should modify the routes.yaml file for the routes to start working. Look at this documentation for more info: https://ghost.org/docs/api/v3/handlebars-themes/routing/
I'm currently using CSS in my Twig templates. The CSS is in my public folder and templates are in the templates folder.
So the following code is working actually :<link rel="stylesheet" href="assets/libs/css/style.css">
Here comes the problem. I created a sub directory in the templates folder but when I try to access to the CSS like before; Symfony don't find my CSS file.
I fixed this issue by using ../ before the href so I have this :<link rel="stylesheet" href="../assets/libs/css/style.css">
My problem is solved at this point but I want something more generic than ../ because if I have some folders inside a folder which is inside the templates folder I would have something like that ../../../ and it's really ugly.
So I am currently looking for a generic way to access to the public folder no matter where I am in the templates folder.
If my question isn't clear enough I know how to do this in Blade with {{ URL::to('/') }} so in Blade my code would have been like that : <link rel="stylesheet" href="{{ URL::to('/') }}/assets/libs/css/style.css">
Symfony has a twig function for what you want as part of the Asset-component. If you use Webpack Encore you will likely already have this installed otherwise you can install it via composer:
composer require asset
This should create a default configuration for you and you should be able to use the following in your templates:
{{ asset('/assets/libs/css/style.css') }}
As the docs for Linking to CSS, JavaScript and Image Assets state:
The asset() function's main purpose is to make your application more portable. If your application lives at the root of your host (e.g. https://example.com), then the rendered path should be /images/logo.png. But if your application lives in a subdirectory (e.g. https://example.com/my_app), each asset path should render with the subdirectory (e.g. /my_app/images/logo.png). The asset() function takes care of this by determining how your application is being used and generating the correct paths accordingly.
When I use the command hugo, it generates the index.html in the Public folder. When I open index.html, the site load like this:
But when I use the hugo serve command locally, it generates the link http://localhost:1313/, and the site load properly. It loads like this:
I think the problem is because of the not proper rendering of files or anything similar.
My approach:
I added the code relativeURLs = true and uglyURLs = true at top of the config.toml file but still it does not rendered properly.
I had set baseurl = "/" in config.toml file but this also does not work.
Your theme might be loading CSS using {{ .Site.Baseurl }}.
For example:
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css">
In that case, make sure that the BaseUrl defined at the top of your config.toml file is set to http://localhost:1313, which will allow your local server to find the CSS file.
You're CSS file is not loading properly. This can have several reasons, for example:
http url on an https website.
wrong "integrity" hashes on you css file.
css file is not deployed or not on same location on the server.
Google developer tools plugin might help here. If you right click on your web page, click "inspect" and go to console. You can see any loading errors.
You can install Web Server for Chrome and choose the /public folder of your Hugo website. Your site should now render correctly at the url configured (http://127.0.0.1:8887 in the example screenshot).
You might want to set baseURL to the absolute path of the public folder.
Fixed this by configuring baseUrl in config.toml.
If you're deploying using GitHub pages, you'll want to make your baseUrl equal to your github pages domain.
Web server structure:
localhost/my_site_folder/public
When I am using url(../images/example.png) in my scss file, mix automatically finds example.png, copy it to my public/images folder, and then rewrites the url() within my generated stylesheet (https://laravel.com/docs/5.6/mix#url-processing)
Cool feature and everything seems fine, except fact, that link was generated as it was described in docs background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);, but in my case this link is to localhost/images/example.png?d41d8cd98f00b204e9800998ecf8427e but I need to localhost/my_site_folder/public/images/example.png?d41d8cd98f00b204e9800998ecf8427e.
And I can't find where I could setup my website root folder path.
P.S. for example, in laravel it could be done via .env file APP_URL=http://localhost/my_site_folder/public
Is there is something similar in mix?
This do the trick mix.setResourceRoot("../").
Thanks to Namoshek comment.
maybe
php artisan storage:link
will be the answer?
https://laravel.com/docs/5.6/filesystem
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.