I am looking for an answer of how to use Liquid for my background image path in css file and hoping the image can be seen in localhost and on Github at the same time.
The first background path only worked on Github and the second one only worked in localhost. Is there any way to achieve what I want without comment out the code every time I commit to Github? I was thinking maybe I need to use {{%%}} so I read the documentation from Jekyll and looked up for answers but still no luck.
CSS
---
---
.content-wrapper {
max-width: 800px;
margin: 0 auto;
height: 2600px;
background: url({{site.baseurl}}/_site/assets/img/dummy_blog_content.jpg);
background: url({{site.url}}{{site.baseurl}}/assets/img/dummy_blog_content.jpg);
}
YML
baseurl: /project
exclude: ["README.md"]
You can use absolute_url to automatically prepend the url and base_url in liquid but that should be done in your templates:
{{ "/assets/style.css" | absolute_url }}
The generated url shouldn't have _site in it, as that won't work in Github pages. In your template refer to your css location, in this case /assets/style.css:
<link rel="stylesheet" href="{{ '/assets/style.css' | absolute_url }}">
Related
I am unable to load the background image of my webpage when using {static} in my CSS code
It's difficult to explain so I will just paste the screenshots,
Inside settings.py I have configured STATIC items as follows:
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static') ,]
# ]
STATIC_ROOT= os.path.join(BASE_DIR, 'assets')
I have used the command:
python manage.py collectstatic
to collect all the static items inside the assets folder(in the base directory)
images/files, for example "ii.jpg" inside project/static/img whose source provided in the HTML template render fine using this code
<div class="imgbox"><img src="{%static 'img/ii.jpg'%}"></div>
but then I try to render image using :
background: linear-gradient(rgba(0,0,0,0.5),#05071a) ,url("{%static 'img/ff_1.jpg'%}") no-repeat center center/cover;
the browser console gives 404(image not found error) even when the name and extension are correct
see console image
I will attach the screenshot of the error shown in the browser console.
Now, one more thing, when I hover over the {%static 'image_name'%}, I think it shows me the interpreted path as shown in 2nd screenshot:
vscode interpreted path I guess
I feel like it's looking for img folder in project/static/styles/ instead of project/static/
if that's the error IDK how to fix this
please refer the 3rd screenshot to see my folder structure(carnival is the app's name,ITAproject is name of the project(inside base-directory),templates(HTML files),static(images,css))
Folder structure
I have also used the {% load static %} tag in the respected css and html files
Django static doesn't work in css files.
You can use
relative path like this
background: linear-gradient(rgba(0,0,0,0.5),#05071a) ,url("static/img/ff_1.jpg") no-repeat center center/cover;
Or use inline css
<div style="background: linear-gradient(rgba(0,0,0,0.5),#05071a) ,url({%static 'img/ff_1.jpg'%}) no-repeat center center/cover;" >
</div>
As described in "specifying layout for html posts in jekyll", Jekyll _posts should behave as any other page when it comes from its _layouts, however it isn't doing this way to me right now.
I'm developing this static site to be hosted in a Github Pages and everything else is working fine, but my posts are not.
I also checked the errors in "Jekyll post not generated" about Jekyll _posts, but the problem wasn't solved.
# _posts/2020-06-27-how-I-long-for-summer.md
---
layout: post
title: How I long for Summer
cover: /assets/img/jhonny.jpg
date: 2020-06-27 20:56:28 -0300
categories: text
---
# _layouts/post.html
---
layout: default
---
# layouts/default.html
<!DOCTYPE html>
<html lang="en">
{% include head.html %}
<body>
{% include navbar.html %}
{{ content }}
{%- include footer.html -%}
</body>
</html>
So, even all regular pages are using default layout accordingly, my post pages have been rendered raw, as if I haven't declared any layout to them.
I'm using minima theme, but actually I was expecting it hasn't any effect since I overwrited post layout.
# _config.yml
markdown: kramdown
theme: minima
permalink: :year/:month/:day/:title
I tried what I could. Does anyone have a clue about what I'm doing wrong?
All of your CSS is using relative paths rather than absolute paths and therefore isn't being fetched correctly.
In your various source code files (head.html, footer.html etc.).
assets/js/main.min.js
assets/js/theme.js
assets/css/main.min.css
assets/css/theme.css
assets/main.css // not available
Should be:
/assets/js/main.min.js
/assets/js/theme.js
/assets/css/main.min.css
/assets/css/theme.css
/assets/main.css // not available
Another solution is to use Liquid's relative_url filter:
https://github.com/jekyll/minima/blob/master/_includes/head.html#L6
https://jekyllrb.com/docs/liquid/filters/
I have a problem with adding the custom fonts in Grav CMS. All fonts are added under the folder path: user/themes/bildxwerkstatt/fonts
It works on my computer when I'm adding this code in .css file
#font-face {
font-family: MullerBlack;
src: url(/bildxwerkstatt/user/themes/bildxwerkstatt/fonts/Muller/MullerBlack.otf);}
h1, h2, h3, h4, h5, h6 {
font-family: MullerBlack, sans-serif!important;}
However on the host such path does not work.
As I understood from the Grav documentation the path to font in css should looks like this:
url(theme:fonts/Muller/MullerBlack.otf);}
But it does not work in my case. The same problem I have when trying to add background image in css.
Thank you in advance!
With the given information it is difficult to help.
bildxwerkstatt is a folder in the document root but also the theme name, right?
The first thing to check is if you have the provided .htaccess and set the RewriteBase. See Grav Troubleshooting 404 Not Found
Then you should check your css syntax.
#import url('https://...
or with base.html.twiq
<link href="https://...
From Grav Asset Manager about Static Assets:
The url() method takes an optional second parameter of true or false to enable the URL to include the schema and domain.
Also check the available Theme Variables.
The {{ theme_url }} returns the relative URL to the current theme.
And here an example how i set a background image for the specific page:
{% set background_image = page.media.images|randomize|first %}
{% set background_image = background_image.name.cache.url %}
<div {% if background_image %} style="background-image: url({{ background_image }})"{% endif %}></div>
I'm starting to use jekyll, but when trying to customize a variable it does not work.
My code
---
layout: default
hello: "teste liquid"
---
<h1>{{ page.hello }}</h1>
but this don't work, it does not print anything in html, it leaves empty
do I need to do any additional configuration on jekyll?
I'm writing this because I had the same problem and I lost half a day trying to figure out what caused it.
When I installed jekyll and created a new site I got the following file by default: index.markdown with an empty front matter in it (two lines of three dashes each).
I also created an index.html file as the Jekyll tutorial suggested.
Apparently, if you have both files and you try to add front matter to the HTML file the whole site breaks and the default jekyll page is displayed instead of the index.html page.
The solution is to remove or rename the index.markdown file so the HTML file is the only index.
Note, that if you don't add front matter to the HTML page the HTML page is displayed normally (but, of course, the liquid tags {{ }} don't work)
Hope this help.
Thanks to virginiarcrz for pointing this solution out.
I had this issue. There was an extra space after toggling a comment '#' tag in the frontmatter of my index.md:
---
#title: index
title: index2
----
and I fixed it by removing the space:
---
#title: index
title: index2
----
This is my personal GH Pages site.
I have this set in my /_config.yml:
theme: jekyll-theme-cayman
title: iBug # GitHub
description: The small personal site for iBug
Now it shows a big title iBug # GitHub and a tagline on every page GH Pages generates. I want to set overrides for specific pages. I tried
---
title: Blog index
---
in /blog/index.html, but it doesn't work. It only changes the HTML title of the page (browser title bar), but not the "title" in the big block on the top of the page.
How do I set an override title for a single page?
Update: I have since submitted a pull request to change this in the theme, and the answer below is no longer necessary since it's already been applied when you use the theme as of now. All you need to do is to specify the title override in the front matter:
---
title: My custom title
---
To specify another title, you need to change the layout file.
Copy the default layout and place it in <GitHub repo>/_layouts/default.html, and change line 16 to this:
<h1 class="project-name">{{ page.title | default: site.title }}</h1>
Then Jekyll will respect the title set in the front matter, and place it there.
This is just the way this theme is implemented, if you check the default layout for Cayman theme on line 14 you can see what exact variable it is using.
<h1 class="project-name">{{ site.title | default: site.github.repository_name }}</h1>
Hope that helps!
My approach is using javascript as follows.
<script>
document.getElementsByClassName("project-name").item(0).innerText = "{{ page.title }}";
</script>
You can write a html file in _includes dir and use {% include your_file.html %}.