I'm using Jekyll to host a site on Github pages. The problem lies in referencing file paths within css files.
I'd like to do something like this:
body { {background: #FFF url('{{ site.baseurl}}/images/page_bg.JPG') center 0 no-repeat; background-attachment: fixed; color: #4b595f; }
But it doesn't seem that Jekyll process the css files, so site.baseurl never gets swapped out.
There are other situations where I can't just change it to an inline style, so assume that's not a possibility.
Using the trick from Brian Willis' answer won't work with SASS in #import-ed files.
Instead, you can do this:
main.scss
---
---
$baseurl: "{{ site.baseurl }}";
#import "myfile";
_sass/_myfile.scss
myclass {
background: url($baseurl + "/my/image.svg");
}
Don't forget
the quotes around "{{ site.baseurl }}" (important in case of empty site.baseurl, and probably more robust) and
the plus sign with $baseurl + "/my/image.svg".
Jekyll processes all files that have YAML front matter. Stick a front matter section (even if it's empty) at the beginning of your file, and Jekyll will transform it correctly. Try using this at the start of the file:
---
title: CSS stylesheet
---
Related
I'm running the jekyll j1 theme locally and attempting to edit the ccs. I've followed a few tutorials over the past week which instruct me to create a file at:
/assets/css/style.scss
and insert the following
---
---
#import "{{ site.theme }}";
h2 {
color: red;
}
h3 {
color: blue;
}
when I execute bundle exec jekyll serve or yarn site, the site fails to launch and delivers the error:
Error: Can't find stylesheet to import.
╷
1 │ #import "j1-template";
│ ^^^^^^^^^^^^^
╵
/starter/assets/css/style.scss 1:9 root stylesheet
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/style.scss':
Can't find stylesheet to import.
I can run css edits in a different jekyll build (with the minimal mistakes theme):
---
---
#charset "utf-8";
#import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
#import "minimal-mistakes"; // main partials
h2 {
color: red;
}
h3 {
color: blue;
}
but I need to change the j1 theme and this doesn't use #import "{{ site.theme }}"; . I'm hoping folks have some tips to help me get around this.
It looks to me like I need to be importing something else, but I'm not sure what it is . . .
Thanks for considering,
D
in the end I got it working by making a new file in the root at assets\css\adds.css
no imports here, just a test snippet:
div#j1_footer.mt-4 div.copyright {
display:none;
}
and under the front matter in the .md files that I need to reference the new css:
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/adds.css">
:)
As this answer suggests, try to add Encoding.default_external = Encoding.find('utf-8') into D:\applications\Ruby25-x64\lib\ruby\gems\2.5.0\gems\sass-3.7.4\lib\sass\engine.rb, like this:
......
51 require 'sass/importers'
52 require 'sass/shared'
53 require 'sass/media'
54 require 'sass/supports'
55
56 Encoding.default_external = Encoding.find('utf-8')
57
58 module Sass
......
Because apparently, that's required to do in Windows:
If you're building on Windows then there's (probably) a hidden UTF-8
BOM at the beginning of the file which you'll need to find a way to
get rid of. This is a blind guess (you haven't yet provided the error
trace) but my experiences point in this way.
If it still doesn't work, try to remove the --- from the beginning of your SCSS file and see if it works.
I am trying to override the "forkme" banner on my github.io page to get a better understanding of how Jekyll, HTML, CSSand GitHub works.
For that purpose, I created my ./assets/css/style.css file as mentioned in the readme of the official documentation on how to customize the CSS of the officially supported GitHub themes. I added the following CSS to it:
#forkme_banner { display: none; }
However, no luck, the banner doesn't disappear. Even adding fictitious elements to the CSS file like #test {testing: testtest;} doesn't add the line to my CSS file.
rename assets/css/style.css to style.scss
and change your scss code to :
---
---
#import "{{ site.theme }}";
#footer_wrap {display: none;}
#forkme_banner {display: none;}
#downloads {display: none;}
#whocares {haha: hehe;}
First and foremost thing is that the CSS changes takes time to update because it will be cached at their servers.
It usually takes 15-45 minutes for me but for few, it is taking 3 hours. I think it depends on the server location that Github pages are hosed if I am not wrong.
Coming to issue
`./assets/css/style.css
// change to
./assets/css/style.scss`
it should be changed to .scss.
Another troubleshoot that I encountered is
---
---
#import "{{ site.theme }}";
/* "{{ site.theme }}" = Your theme name */
/* Eg: #import 'jekyll-theme-cayman'; */
/* Your css rules goes after this */
.page-header {
background: #191c20;
}
with symphony framework I did dump assets assets:install.
css file is hard copied to /web/bundles/appbundle/css/style.css I guess for background image in css I should have a relative path to reach outside of /web/ folder like this?
background-image: url(../../../../bundles/appbundle/images/top_bg.jpg);
but it doesn't work yet, I have filter='cssrewrite' in css tag too. probably I have to add that I am only editing the css file located at the path above after assets install, I did not edit the one in /Acme/Bundle/Resources/public/css any more. Then I did run assets:dump, now in /web/ folder there are two folders for images and css, I looked at new css and see the path became like this:
background-image: url(../../bundles/applicationadmin/images/top_bg.jpg);
But still all images are broken. I search stackoverflow and found this question, but still have problem. what else should I do?
please advice.
First of all, make sure that your css and images are inside correct folder.
src/AppBundle/Resources/public/css/style.css
src/AppBundle/Resources/public/images/top_bg.jpg
After you run assets assets:install, check if there is a folder on your web directory. It have to be a identical copy from Resources/public.
web/bundles/app/css/style.css
web/bundles/app/images/top_bg.jpg
And your style.css file should look like this:
background-image: url("../../images/top_bg.jpg");
However, if you are configuring the css directly on twig template, the url is different:
<style>
div { background-image: url("/bundles/app/images/top_bg.jpg"); }
</style>
To make it work in twig try this
<div class="container" style="background-image:url('{{ asset('bundles/appbundle/images/top_bg.jpg') }}')"> ,
of course presuming that you have installed the bundle's web assets under a public web directory.
I solve this issue with the following steps:
First let Webpack do his work.
Let's copy all the file to the public/build directory (images and css files)
Next step is to include the css style via twig/smarty in your template
Immediately after the "link" tag, you should open a "script" tag and overwrite all affected styles. In Twig you can work with the "asset" function to load the corresponding URLs from the manifest
i.e:
<link type="text/css" rel="stylesheet" rev="stylesheet" href="{{ asset('/build/css/header.css') }}">
<style >
.header { background-image: url('{{ asset('build/img/logo.png') }}') !important; }
</style>
Your background image is correct changed. The output looks like:
<link type="text/css" rel="stylesheet" rev="stylesheet" href="/build/css/header.5c7b2ca6.css">
<style >
.header { background-image: url('/build/img/logo.bb1272f9.png') !important; }
</style>
This is not the best way to work with Webpack. However, this is an interim solution to refactor outdated code. The next step should be to create entrypoints and build the style using SCSS. Webpack then takes care of the correct use of assets in the styles.
I've searched documentation, stack overflow, Google and attempted every CSS variation I could think of and can't determine a way of setting an image as a background to a div or element tag such as body using CSS. Should be simple, right?
Attempts included:
#element { background-image: url(<% asset_path "image.jpg" %>); }
#element { background: url(<% asset_path "image.jpg" %>); }
#element { background-image: url({% asset-path "image.jpg" %}); }
#element { background-image: {% asset-path "image.jpg" %}; }
#element { background-image: url("image.jpg"); }
And many more. Basically, I've tried every possible variation I could think of including many I didn't expect to work ahem, and my efforts to find an answer have been exhausted.
Can somebody with knowledge of Jekyll and Jekyll-Assets clarify for myself and future Jekyll initiates how to accomplish this task?
Try #element { background: url(asset_path("image.jpg")); }. It works for me.
For me, only combination of changing css file extension to css.scss, together with #element { background: url(asset_path("uri/to/file.jpg")); }, necessarily with double quotation marks, worked.
Moreover, sometimes it won't copy the assets, and then I need to jekyll clean and rm -rf .asset-cache.
assets:
cache: false
in _config.yml may help as well.
This works with inline css:
<div style="background-image: url({% asset 1920x1080.jpg #path %})"></div>
I guess I got your problem. If your CSS file is on the root folder of your site you can use this expression
#element { background-image: url(images/image.jpg); }
If its in one folder deep like if the CSS file is in the CSS folder like so _CSS/Style.CSS then you need to change the URL accordingly
#element { background-image: url(../images/image.jpg); }
If its in two folder deep use this expression
#element { background-image: url(../../images/image.jpg); }
I was stumped by this too. I found a solution from the plugin author in one of the repos issues:
Assets processed by jekyll-assets are not passed through normal
StaticFiles process pipeline of Jekyll. Thus they do not process YAML
front matter. Also jekyll-assets are not process files with liquid. If
you need asset_path helper and you don't want to use SASS for example,
you can use ERB. Just rename your styles.css in styles.css.erb and
you'll be able to sue ERB in it:
#header { background-image: url(<%= asset_path "mybackground.png" %>); > }
ERB is a part of Ruby stdlib, so no extra gems are required to
use it. Take a look on jekyll-assets introduction for details about
ERB, SASS in jekyll-assets and so on.
The documentation makes no mention of it, but jekyll-assets (at least version 0.7.7) seems to support the same asset-path helpers as the sass-rails gem:
#element { background-image: url(image-path("image.jpg")); }
or, even more succinctly:
#element { background-image: image-url("image.jpg"); }
Jekyll defaults to _sass when compiling SASS files so if you changed that location of your files which is likely since you are using jekyll-assets then you need to update your _config.yml to use the new location. In the config file add:
sass:
sass_dir: _assets
As per the Jekyll Assets docs, _assets is the default location for jekyll-assets.
For built in SASS support you need to be using Jekyll version 2.0.0 or later.
This should work :)
#element { background-image: url({{ site.url }}/{{ asset-path }}/image.jpg); }
If you do not have a site-url set up
#element { background-image: url({{ asset-path }}/image.jpg); }
or
#element { background-image: url(images/image.jpg); }
I'm trying to set a background-img in my css.liquid file, and I need to get YAML variables in the page. How can I do that? This is what I have so far:
background-image: url({{ page.locales[page.default_locale][page.first_name] }});
I also had this:
background-image: url('{{ page.first_name }}{{ page.last_name }}.jpg');
Just use these styles 'inline' and not in your css.liquid file. That is by far the easiest (and least ugly) solution.
Only files with a YAML front matter section, and with the extensions .html, .markdown, .md, or .textile get processed by Jekyll.
You could hack this to get it working by saving your CSS file with one of those extensions, and including a YAML front matter section. That seems like a pretty clumsy way to do it, and it'll make for some ugly code, but it might work.
You need to add ---\n--- at the top of the css file, like so:
---
---
.myClass {
background-image: url('{{ page.first_name }}{{ page.last_name }}.jpg');
}
As mentioned here: https://stackoverflow.com/a/42528645/2235593