I am using the minima theme for jekyll. I want to add images to my posts. In _config.yaml I have baseurl set to /blog and url set to https://mywebsite.combecause my jekyll blog is a separate repo that is accessed by mywebsite.com/blog. In the post I want to include the picture in I have
<figure>
<img src="{{ site.baseurl }}/assets/pihole.png" alt="PiHole Dashboard"/>
<center><figcaption>PiHole Dashboard.</figcaption></center>
</figure>
This works fine on my local, but when deploying to github pages the picture is not there. I can access mywebsite.com/blog/assets/main.css no problem, but when I try to access the image it gives me a 404.
Inspecting the page shows me that it does have the correct location
figure>
<img src="/blog/assets/pihole.png" alt="PiHole Dashboard" />
<center><figcaption>PiHole Dashboard.</figcaption></center>
</figure>
Is there something I am missing that is not uploading my image file to GitHub Pages?
Needed to create an assets folder in my root directory and place the files there.
<figure>
<img src={{ "/assets/pihole.png" | relative_url }} alt="PiHole Dashboard"/>
<center><figcaption>PiHole Dashboard.</figcaption></center>
</figure>
Try relative_url as in Kitty image is missing in 'Welcome to Jekyll' post but shown at index.md and about.md
Related
I want to load an image on my template using:
<img src="{{ item.pic }}">
It works fine sometimes but once I start doing it from a view it adds the path of that view to my image src automatically causing the image to fail to load.
I want it to be
src="images/item.jpg"
for example, but because of different views it may end up as
"view1/images/item.jpg" or
"anotherview/images/item.jpg"
causing Django to be unable to find the image. Is there a way to code it so that view names won't be added to the src?
You should use an absolute URL, you can do this with:
<img src="/{{ item.pic }}">
Normally if this is a FileField (or an ImageField which is a subclass of a FileField), you can let Django determine the URL with:
<img src="{{ item.pic.url }}">
In that case Django will use the MEDIA_URL [Django-doc] and will also serve these files. In production, you will need to configure a webserver like Apache, Nginx, etc.; or let a Content Delivery Network (CDN) serve these files.
Have not found anyone complaining about this yet, but:
Have a flask app, normal static folder with js, css, and and image folder under it.
The css, js go to the web page normally from the static folder, but the images:
sky1.jpg works.
sky_1.jpg does not work. Get a 404 in chrome.
works:
img class="img-thumbnail" src="{{ url_for('static', filename='imagesUI/sky1.jpg') }}"
does not work:
img class="img-thumbnail" src="{{ url_for('static', filename='imagesUI/sky_1.jpg') }}"
Is there a file naming convention in flask that precludes any other character than alphabetic and numeric?
I want to put date info in the filename and it is not allowing it.
ubuntu 18.04
debugging under VSC
flask dev server
Debug on
Thx
Instead of src="{{ url_for('static', filename='imagesUI/sky_1.jpg') }}
use src='/static/imagesUI/sky_1.jpg'
use src='/static/imagesUI/sky_1.jpg' in img tag that might do it
Is it possible to change the target URL when clicking on the value title defined in _config.yml ?
To define the context, I have my static HTML website hosted on GitHub, it's a one page website. I have on the same repository the Jekyll blog accessible on mysite.github.com/blog.
When I click on the header title, the Jekyll blog redirect me to / which is my website and I would like to be redirected in /blog.
What is the simpliest method ?
You need to rewrite the header.html of the minima theme template. The goal is to change the target of the link in the header.
To do that :
Create a folder _includes and a file header.html inside
Copy and paste the original code for the official repository
https://raw.githubusercontent.com/jekyll/minima/master/_includes/header.html into the header.html file
replace the content of href="{{ "/" | relative_url }}" by href="{{ "/blog" | relative_url }}"
Have you tried setting url and baseurl in the config for the blog? Baseurl should be used for the "home" page.
I am creating a GitHub pages site for the project and stuck at navigation links for next/previous topic and related topics as well. Of course I can create them manually, but it's a hell of a work.
I need something like this (scroll down to the bottom of the page, there are links to previous and next topics): Sample GitHub page
Those links were generated by the tool named Helpinator right into the code of the topic. Are there some tags or code or whatever can automate it for me?
If you look at the raw file for the page that you linked, you can see the following code and use it as an example:
[Commit project files -->](commitprojectfiles "Next")
[<-- Clone repo to your PC](clonerepotoyourpc "Previous")
The markdown links are just pointing at relative files, which is supported by GitHub.
Otherwise if you're trying to link between posts in Jekyll, you can use the page.next.url and page.previous.url to get the url of the next/previous post (more info in docs).
<a href="{{ page.previous.url }}">
<div>Previous Post</div>
</a>
<a href="{{ page.next.url }}">
<div>Newer Post</div>
</a>
I am new to making website using jekyll. When I run the website on local server using jekyll serve, it runs perfectly. I used jekyll build to build files for FTP server. Problem is the pages built in _site folder are without themes and images shown while running it locally.What can be its solution?
You have to customize and override your CSS styles, images or pages in Jekyll. That's why theme changes are not applied and "Jekyll Serve" command resets your changes.
Look at this Official Github Help page: Customizing CSS and HTML in your Jekyll theme
And Tom Kadwill's Page How to Override CSS Styles in Jekyll
Locally, your site is served at http://127.0.0.1:4000/ which the root.
Your _config.yml baseurl: "" is empty.
Once you publish you site from something else than the root, say, https://example.com/blog/, you need to check two things :
that your baseurl: "/blog" is set accordingly to path.
that you call your resources using {{ site.baseurl }}{{ post.url }} or with filter {{ image.url | relative_url }}