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
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.
We use Jekyll 4.2.0 to generate a static HTML site that we serve using jekyll serve for debug purposes. On my machine (Arch Linux), this works correctly but on my colleagues machines (Arch Linux and Mac OS), Jekyll incorrectly generates absolute paths, so that for example image links on the local site point to e.g. https://ourdomain//public/image.png instead of http://localhost:4000//public/image.png.
The links are defined as e.g. {{site.url}}{{ site.baseurl}}/public/img.png
How can I get Jekyll to keep local paths intact on my colleagues machine?
Solution
The problem was solved by #Kin but I had to perform two modifications
Use single quotes for the image path, else it conflicts with the outer double quotes.
Use relative_url instead of relative.
The end result is <img src="{{ '/public/img.png' | relative_url }}">.
Why it worked differently on different machines
Equal behavior was achieved by deleting the _site folder before calling jekyll serve --incremental, as the relative paths were used before and jekyll serve seems to only update some parts of the site.
Then, the original {{site.url}}{{ site.baseurl}}/public/img.png actually specifies an absolute path in any circumstance, as site.url seems to take the hardcoded url attribute from _config.yml instead of magically setting this value to the deployed webpages local URI as I expected.
The reason I used site.url and site.baseurl at first was that I also deployed into a subfolder of a domain using github pages but that use case is covered by relative_url as well.
Update with OP's solution
The problem was solved by using relative_url on the images [2]
[2] https://jekyllrb.com/docs/liquid/filters/
Original Post
In my past Jekyll project[1], we were able to use jekyll serve on various platforms without issues. It is possible we avoided the issue you are seeing by used relative [1] on all of our image URLs. Here is an example
<img id="myImage" src="{{ "/img/myImage.png" | relative }}" alt="My Image">
I haven't tried recreating your issue, so I cannot confirm if relative is what kept our Jekyll project cross platform compatible.
[1] https://github.com/OpenLiberty/openliberty.io
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
I'm working through a guide for setting up Jekyll on GitHub Pages. My GitHub repo publishes to ~.github.io/hello-pages, so naturally I'm plugging {{ site.baseurl }} into anchor tags, etc. That's working great.
What isn't working is permalinks: I have to manually spell out permalink: /hello-pages/blog/:year/:month/:day/:title.html in _config.yml for any of the permalinks to work; otherwise they link to e.g. ~.github.io/blog/x/y/z instead of ~.github.io/hello-pages/blog/x/y/z like I expect.
Manually specifying baseurl: /hello-pages has no effect (I suppose GitHub's Jekyll config already does that).
Manually typing "/hello-pages" anywhere seems like quite a rigid design that I'd like to avoid. An older SO answer says that permalinks should "just work". What gives?
Edit
I am constructing the broken URLs like this:
<a href="{{ post.url }}">
I just figured out what I was doing wrong. I need to do one of the below things. Here is documentation about this: https://jekyllrb.com/docs/templates/#filters
<a href="{{ post.url | relative_url }}">
This turns the URL into a relative URL, taking the base URL into account.
<a href="{{ post.url | absolute_url }}">
Same as the above, but makes absolute URLs.
<a href="{{ post.url | prepend:site.baseurl }}">
Prepends the base URL to the permalink.
I just started using Jekyll today, and I'm trying to figure out how to use it to create a portable static site. Specifically, I want to be able to access the site without using the Jekyll server.
This answer says that this isn't possible, however, it's a couple years old, and it seems like a static site generator should be able generate a site which doesn't need a server to function (can be accessed through the browser as a file file:///...)
The Jekyll docs say that a Jekyll site can be deployed on a remote server by placing the _site/ folder in the web server's root directory. How do I force Jekyll to use relative links, so that I can run the built site from a directory other than the root?
I'm worried that the answer to this question is "it's not possible", or at least "it's not possible without some trickery". I've used Wordpress in the past, and it's trivial to set up a wordpress installation in any directory on a LAMP server. I feel like there has to be some easy way to do this with Jekyll, but I can't find the answer anywhere.
This answer is still valid. But I must admit that it's not really portable to tweak baseurl. You cannot always guess the correct path.
Let's try to make it run on the file system with relatives urls like ./path/to.
What do we need to tweak
Examining the index page, sitting at file:///path/to/_site/index.html, we can identify some potential problems :
styles are not working
posts are linked like file:///jekyll/update/2016/08/05/welcome-to-jekyll.html following the /:categories/:year/:month/:day/:title.html permalink pattern. And we know the folder hierachy is a nightmare when using relative links.
pages. The only one is about with an already defined permalink pointing to /about/ which will not work from file system, because it resolves to file:///about/
In order to avoid folder hierachy hell, we will make every post and page to be created at the root.
Redefining permalinks
In _config.yml we add :
defaults:
-
scope:
type: "posts"
values:
permalink: :slug:output_ext
-
scope:
type: "pages"
values:
permalink: :basename:output_ext
Now any post is generated at the root.
But this about page is still generated in an about folder. Why ?
Because front matter permalink overrides default configuration. We remove permalink: /about/ from about.md front matter and now our page is generated at the root /path/to/_site/about.html. Good !
Rewriting links
We're now making our links relatives to root using the ./ expression.
_includes/head.html
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
becomes
<link rel="stylesheet" href="{{ "./main.css" }}">
_includes/header.html
<a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
becomes
<a class="site-title" href="./index.html">{{ site.title }}</a>
And
<a class="page-link" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
becomes
<a class="page-link" href="./{{ my_page.url }}">{{ my_page.title }}</a>
index.html
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
becomes
<a class="post-link" href="./{{ post.url }}">{{ post.title }}</a>
And you can now navigate.
Remember to keep everything a the root and it will be ok.
I had a problem running Jekyll without the server and was able to resolve it by removing the permalink configuration from the theme I was using (removed the permalink: line from _config.yml). Also had to make sure all non-post URLs use absolute file path (like about and contact).