I'm creating a website with Symfony 4.
But I've a page where my css and js don't load.
In the console, I've :
GET http://localhost/symbnb/public/ads/css/bootstrap.min.css
net::ERR_BLOCKED_BY_CLIENT
maiores-nemo-excepturi-consectetur-saepe:40 GET
http://localhost/symbnb/public/ads/js/bootstrap.min.js
net::ERR_BLOCKED_BY_CLIENT
maiores-nemo-excepturi-consectetur-saepe:38 GET
http://localhost/symbnb/public/ads/js/jquery.min.js
net::ERR_BLOCKED_BY_CLIENT
maiores-nemo-excepturi-consectetur-saepe:39 GET
http://localhost/symbnb/public/ads/js/popper.min.js
net::ERR_BLOCKED_BY_CLIENT
This error is at :
http://localhost/symbnb/public/ads/maiores-nemo-excepturi-consectetur-saepe
The files don't load.
But at
http://localhost/symbnb/public/
and
http://localhost/symbnb/public/ads/
All is good.
This is my files :
And if i put a / like :
/css/bootstrap.min.js
/js/....
I've the error on all pages
Change your source by using Symfony twig asset function.
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/popper.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
Use it the same way for CSS asset.
<link rel="stylesheet" src="{{ asset('css/boostrap.min.css') }}">
Currently your website is looking for files in a folder that doesn't exist. Try to add a leading / to all of your assets. This should fix your issue.
I have a view called homePage.blade.php which is my master page which resides in res/views/ in that file I have this.
<link rel="stylesheet" href="css/coreStyleSheet.css">
<link rel="stylesheet" href="css/animate.css">
<script src="js/coreScripting.js"></script>
<script src="js/moments.js"></script>
<link rel="stylesheet" href="icons/fontAwesome/css/font-awesome.css"> </head>
all is fine?
Now I create a folder called AppCreate who's path is res/views/AppCreate I have a blade file there called something.blade.php now when I use #extends('homePage') I am not able to access the css,js.
my tree looks like this.
-res
-views
homePage.blade.php
-AppCreate
-something.blade.php
I redirect something.blade.php tp public/admin/appcreate
I redirect homePage.blade.php to public/dashBoard.
I hope I have explained it well.
when I access the public /admin/appcreate laravel is not able to find the css and the js because it says this.
GET http://localhost/laravel/public/admin/css/coreStyleSheet.css
appcreate:12 GET http://localhost/laravel/public/admin/js/moments.js
appcreate:11 GET http://localhost/laravel/public/admin/js/coreScripting.js
appcreate:13 GET http://localhost/laravel/public/admin/icons/fontAwesome/css/font-awesome.css
Try using the Helper Functions like this:
<link rel="stylesheet" href="{{ asset('css/animate.css') }}">
<script src="{{ asset('js/coreScripting.js') }}"></script>
assuming you have your css and js folders inside public/assets
I just started with symfony, on template I simply define:
{% javascripts "#MyBundle/Resources/public/js/app.js" %}
<script src="{{asset_url}}"></script>
{% endjavascripts %}
right before closing body tag </body>.
I get this javascript error:
ReferenceError: Sfjs is not defined
It seems like my javascript is affecting symfony debugbar script. but its happen even when my app.js contains nothing. How should I fix this ? thanks.
Although this is an old topic with an already found untold solution, I just wanted to share my experience that when I was confronted with the same error, it was due to the fact that I had forgotten to add a closing </script> tag somewhere in my base template.
I'm relatively new to Symfony myself, but I believe you need to put spaces between the brackets and the variable. In other words, the second line should look like this:
<script src="{{ asset_url }}"></script>
That should help Symfony find the script, which will allow the toolbar to show up.
Hope that helps!
I'm trying to generate a PDF document from a Twig HTML Page using SpraedPDFGeneratorBundle, but the problem is that my stylesheet is not supported.
Somewhere I followed this question : Generate PDF with CSS and Images and I I tried to do like that:
<link rel="stylesheet" href="{{ app.request.scheme ~'://'~ app.request.httpHost ~ asset('css/bootstrap.min.css') }}" />
But I'm getting an error:
The exit status code '1' says something went wrong: stderr: "Exception in thread "main" java.lang.ClassCastException: org.xhtmlrenderer.render.BlockBox cannot be cast to org.xhtmlrenderer.newtable.TableBox at org.xhtmlrenderer.layout.BoxCollector.collect(BoxCollector.java:127) at org.xhtmlrenderer.layout.BoxCollector.collect(BoxCollector.java:139) at org.xhtmlrenderer.layout.BoxCollector.collect(BoxCollector.java:139) at org.xhtmlrenderer.layout.BoxCollector.collect(BoxCollector.java:139) at org.xhtmlrenderer.layout.BoxCollector.collect(BoxCollector.jav:..
Can someone help me ?
It is mentioned somewhere in the SpraedPDFGeneratorBundle github page this:
To define proper print css you might want to read into the w3.org's
hints on that: w3.org
One of my problem was the fact that the SpraedPDFGeneratorBundle could not correctly parse the CSS file I passed him. This is the CSS file Twitter bootstrap (the version I used):
<link rel="stylesheet" href="{{ app.request.scheme ~'://'~ app.request.httpHost ~ asset('css/bootstrap.min.css') }}" />
After changing the CSS file, I replaced my own stylesheet, everything worked properly because SpraedPDFGeneratorBundle was properly validate my stylesheet:
<link rel="stylesheet" href="{{ app.request.scheme ~'://'~ app.request.httpHost ~ asset('css/my_custom_stylesheet.css') }}" />
I've been trying to load my octopress site (based on jekyll) to my local network. There is no server, I just want it available locally on a shared folder.
Every time i deploy it to a local folder the css and js and background image links are broken.
The available options such as rsync, github and heroku all require ssh's and passwords. This can be found here: http://octopress.org/docs/deploying/
Is there a rake option that helps with this?
SOLVED:
Kikito, Thank you very much for the guidance.
I just implemented it and forked a git repository. There is one problem, though. I have used this technique to host the same site on Dropbox Public, a local directory and a web host. I had to add an extra / and the slashes add up as links are clicked. Here is the repo and dropbox link:
https://github.com/originalsurfmex/jekyll-relative-bootstrap
Everything works as you say, but I think that if you or others glance at the partials and links in the layouts you will have a better idea.
Automatic way:
for css/js file:
{% assign lvl = page.url | append:'X' | split:'/' | size %}
{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}
<link href="{{ relative }}css/main.css" rel="stylesheet" />
<script src="{{ relative }}scripts/jquery.js"></script>
for other files:
in _config.yml set
url: http://www.yourdomain.com
add canonical link element:
<link rel="canonical" href="{{ site.url }}{{ page.url }}" />
in one of your js file, add:
var relative = null;
if (location.protocol==='file:') {
relative = Array($('link[rel="canonical"]').attr('href').match(/\//g).length-2).join('../');
if (relative == '') relative = './';
}
function to_relative(link, index) {
if (!relative) return link;
var hash = link ? link.match(/#.*$/) : null;
if (hash) link = link.replace(/#.*$/, '');
return link?(link.replace(/^\//, relative)+(index?(link.substr(-1)=='/'?'index.html':''):'')+(hash?hash[0]:'')):null;
}
$(function(){
if (relative) {
$('a').attr('href', function(a,b){return to_relative(b, true);});
$('img').attr('src', function(a,b){return to_relative(b, false);});
}
});
for other aspects, use jQuery to manipulate them.
The problem is that you are using absolute paths to get to some of your resources. If you want to deploy the site anywhere in the network, then you need to make those relative.
In my case, what I do is to define an (optional) setting called root in the pages/posts that need it, pointing to the "relative root" of the project. For example, on a page located in about/index.html, the root will be ../, since there is only one level "up":
---
title: My Page title
root: "../"
---
Pages further away in the directories will need more dots: ../../, ../../../, and so on. Pages in the root folder (like index.html) don't need a root.
Then I use that setting to generate all the paths.
If I'm on the page or post itself, and I need to refer to a local image or another page, use page.root or post.root:
<img src="{{ post.root }}images/happy.png" />
<a href="{{ post.root }}2010/01/01/another_post>Relative link to another post</a>
It's possible to make the reference directly (../images/happy.png) but this works better when you are creating the site, and you are still unsure about the definitive paths of each page.
I have all the css and js included in one partial file inside _includes. It creates a variable called root to make sure it works with both pages and posts:
{% capture root %}{% if page.root %}{{ page.root }}{% else %}{{ post.root }}{% endif %}{%endcapture%}
<script type="text/javascript" src="{{ root }}js/jquery-min.js"></script>
<link rel="stylesheet" type="text/css" href="{{ root }}/css/style.css" />
That's pretty much it.
If you can live with having to generate your site for a specific folder, using the html <base /> tag may be more straightforward. With all asset paths relative to your root folder, add the following to your default layout:
<base href="{{ site.baseurl }}" />
Then use the jekyll --base-url <folder> <folder> to deploy your jekyll site to <folder> with the baseurl set up correctly.
Note that this also works without changes with the built-in WEBrick server. Start with jekyll --server and do not specify a custom --base-url.
Update: as gimpf points out in the comment, this will not work as expected with anchor links. Those will point to the base URL instead of the current page. There are workarounds using JavaScript, e.g. rewrite anchor hrefs with jQuery:
$().ready(function() {
$("a[href^='\#']").each(function(){
this.href=location.href.split("#")[0]+'#'+this.href.substr(this.href.indexOf('#')+1);
});
});
There is an issue on the Jekyll's github that deals with this. Putting _config.yml:
url: "<your domain>"
and then using {{ site.url }} will return the url. So for example, to refer to the /css/styles.css file from a page's header:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<...>
<link rel="stylesheet" href="{{ site.url }}/css/style.css" type="text/css" />
<...>
</head>
<body>
...
</body>
</html>
Alternate Answer -
I had a similar requirement of a locally hosted static html so that I could distribute it to other computers without a web server and have it read from the filesystem by a regular browser.
Rather than fiddle with arcane path syntax in various places -- although it can be done evidenced by other answers in this thread -- I instead chose a workaround by publishing the site to my localhost:4000 served up by Jekyll as per usual, and then used the wget utility to download a static copy of the static website which could then be opened and navigated from the filesystem with a standard web browser. wget will do the hard work of making the paths relative for you.
This is the wget command I use -
wget \
--recursive \
--no-clobber \
--page-requisites \
--html-extension \
--convert-links \
--restrict-file-names=windows \
--domains localhost http://localhost:4000
Sounds like the path to your images/JS/CSS will need a slight adjustment. Try using a path that points to the generated folder.
For example:
<img src="/_site/images/foobar.jpg" />