Using absolute paths in django templates - html

Recently I've been working on a project in Django that uses a site-wide CSS layout, so I decided that each template (in this case a template in /projects/index.html) used would extend a base file containing the header, footer, javascript, etc. called base.html.
The problem is that my directory structure looks like so:
.
├── static
│   └── base.html
├── templates
│   └── projects
│ └── index.html
And, as you can see the base file I want to extend is in a higher directory than that of the index.html file. Normally, I would use a relative path and use the following code at the top of the index file: {% extends "../base.html" %} or simply use an absolute path to the file (if necessary)
It seems, however, that by using either of these methods, whatever is inside the quotes for extends simply gets appended onto the current path, and my call to the upper directory with .. gets ignored entirely.
That is, if the current path is, for example, /project/templates/projects and I use {% extends "/project/static/base.html" %}, that will be appended to the current path, causing the system to look for /project/templates/projects/project/static/base.html, which, of course, doesn't exist. After researching I came across an article that said the blocking of relative paths is intentional for security purposes, but it leaves me with no way to access any file outside the current working directory.
I figured this had to be an extremely common setup when building a website, and so there must be some sort of way to interact with multiple templates that I'm just not aware of yet. If anyone has any information on that, it would be much appreciated.

Your base.html should be residing in a templates directory and not in the static directory.
This is because you define where django searches for templates using the TEMPLATE_DIRS in your settings.py file. Here, I give an example which computes your TEMPLATE_DIRS value dynamically.
import os
TEMPLATE_DIRS = (
os.path.join(os.path.dirname(__file__), '..', 'templates'),
)
In additional, you need to be aware that django depends on another setting called TEMPLATE_LOADERS to determine the priority in which it loads up your html files/templates, while searching through your templates directories.
TEMPLATE_LOADERS = (
'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
# 'django.template.loaders.eggs.Loader',
)
Once your base.html is located in your templates directory, all you need to do in your html files is to write:-
{% extends "base.html" %}
and you would extend correctly

All of your html templates should live under the templates directory (including your base.html). The location of this folder is set using the TEMPLATE_DIRECTORY settings in your settings.py. The static folder is solely for css, js, etc.
When inheriting from another template using the extends tag, the path you give is always relative to your template directory, not project.

Related

Problem with CSS styling in a html page in Django

So, i am literarily one week into learning web development and i'm following this Django tutorial, i got the index page that i swiped from online to compile properly with it's static elements also. Ran the "python3 manage.py collectstatic" command and everything.
So now i'm linking a registration page which i setup up as a new app in the project and when i try and put the css styling file it doesn't work. i've tried just puting in the same directory as the html templates, then i've moved it to styles and rerun the earlier python command so it's also present in assets, also made use of the "{% static 'abcde.css' %}" as well as {% load static %} in the register.html (only did it in the index initially) and i'm still having no luck with styling the page, any help would be appreciated
Edit:
I previously said i moved the css file but i meant the static file and run gatherstatics again so theres a copy in assets as well.
So now i'm linking a registration page which I setup up as a new app in the project and when i try and put the css styling file it doesn't work.
You should not put it in the same directory as the templates, nor in the directories for templates at all. It should be in a directory you use for static files, so the path is relative to the static root.
This thus means that if /static/ is the directory you marked with the STATIC_ROOT setting [Django-doc], and the file is located at /static/foo/bar.css, you use {% static 'foo/bar.css' %}.
I figured it out but I don't think I should be deleting my stack overflow question. It was just a simple syntax problem
what i had: {% static 'styles/style.css' % }
what you need: {% static 'styles/style.css' %}
that gap between the percentage and bracket was the problem

How to insert an image in my post on Hugo?

Here is my repository on my Hugo blog:
I'd like to insert an image to a post with the following text:
![Scenario 1: Across columns](content/post/image/across_column.png)
However, it does not come out and it gives an error of 404 - Page not found.
What am I making wrong here?
You have a typo in the image link. You have an images directory, but reference "content/post/image/..." without the "s". That won't fix it for you though.
There are a few ways to link images.
Option 1. Put all of your images in the static/ directory. Then reference the image file with a leading slash, e.g.:
![Scenario 1: Across columns](/across_column.png)
Option 2. Use sub-directories to hold the markdown file and any related resources.
create a directory post/creating-a-new-theme
move your existing markdown file into that directory, and rename it to index.md
create a subdirectory post/creating-a-new-theme/images and move your images in there
reference the image as ![Image alt](images/my-image.jpg)
More info on option 2: https://github.com/gohugoio/hugo/issues/1240#issuecomment-753077529
More options
There are more sophisticated ways to reference images using the frontmatter, as well: https://gohugo.io/content-management/page-resources/
TL;DR
Put your images in the static directory, just like below, use it in markdown like ![targets](/images/my_post_folder/my_image.png) or ![targets](/images/my_image2.jpg) if you don't want to build a post folder
If you search the hugo documentation, you can find Image Processing | Hugo
But! That's no a markdown way to insert an image. If you don't miss the Getting Stated, you will find the static Directory, which says can store images, that's it!
[static](https://gohugo.io/content-management/static-files/)
Stores all the static content: **images**, CSS, JavaScript, etc. When Hugo builds your site, all assets inside your static directory are copied over as-is. A good example of using the static folder is for verifying site ownership on Google Search Console, where you want Hugo to copy over a complete HTML file without modifying its content.
How to use it
Put your images in the static directory, just like below, use it in markdown like ![targets](/images/my_post_folder/my_image.png) or ![targets](/images/my_image2.jpg) if you don't want to build a post folder
static
└── images
├── my_post_folder
│   ├── my_image.png
└── my_image2.jpg

HTML from _includes not showing where included using Jekyll

I'm hosting a personal site using GitHub Pages.
I'd like to reduce HTML code duplication by taking advantage of GitHub's builtin Jekyll templating functionality. For instance, putting footer.html into a /_includes directory for reuse on every future page.
I also happen to enjoy organising my files, so I put my 'real' index.html inside a /html sub-directory, along with all my other html files. GitHub pages doesn't like this, so I have used a dummy index.html in the root directory so that the site will be loaded by GitHub.
Whenever I use:
---
---
at the top of a .html file within my /html directory, they rather strangely get rendered as text at the top. In fact, so do my {% includes foo.html %} calls.
Why is this happening?
If you are using the 'dummy' index.html workaround, you will also need to enable Liquid in the root there by placing:
---
---
at the top of your dummy index.html:
index.html (dummy) <- double '---' here
html/
├─ index.html
├─ foo.html <- double '---' here to use {% includes bah.html %}
_includes/
├─ bah.html
This question helped the penny drop.

How does the browser resolve the relative location of './'?

I am combining many small semi-static, single-page webapps into one larger web site. The backend is a lot of proxies, but the forward facing server basically just make it look like the app was moved from the root filepath to a more specifics one. IE:
/
├── css
│   └── app1.css
├── index.html
└── js
└── app1.js
would be moved to
/apps/app1/
├── css
│   └── app1.css
├── index.html
└── js
└── app1.js
This migration has been relatively painless mainly due to the use of ./ in the apps' html files, such that most apps just load their resources relative to their new location. The problem I am having is that some apps are resolving ./ differently. For these trouble cases, the primary html file gets loaded; however, the ./ in the script and style elements are resolving to a higher file-path (IE: I would expect ./ to resolve to /apps/app1 but am getting /apps). It may be a coincidence, but the troubled apps often have additional, non-index HTML files.
What are the rules for how ./ is resolved?
Determine the base URL
This is usually the URL of the HTML document
It might be overridden by the base element
For CSS it is the URL of the stylesheet
JS is always with respect to the HTML document
Remove everything after the last / in the path section of the URL
e.g. the base URL for https://example.com/example/foo?bar=baz#fragment is https://example.com/example/
Keep in mind that an HTML document might be visible at the path /example and /example/ and you should avoid this by making one path canonical (I prefer the one that ends in a /) and redirecting to it from the other
Strip the ./ from the front of the relative path
Append the result of step 3 to the result of step 2
A common gotcha is to confuse URLs with file paths. While a simple static site will usually have a direct 1:1 mapping between them, many modern sites will use routing code (e.g. for Express for HTML documents and a separate static route for static files like images, js and css.

Directly copy some Pelican templates to output folder

I have a few new templates in my pelican theme (a growing number of them, really). They are html files that hold simple web maps. I use these by {% include %}ing them after the content of a blog post. I place the path to the webmap1.html template in the markdown metadata, and then in article.html I {% include %} the web map html at the bottom of the file.
Thing is, I really would like to have these html files available as standalone html in my output as well. Initially I thought I'd be able to do this by placing webmap1.html in my content directory and using STATIC_PATHS to copy it to the output. However, I was unable to get the include statement to find an html file that is not within the theme/templates directory.
I also found that adding /theme/templates/maps or ../theme/templates/maps to STATIC_PATHS didn't work.
Of course, one way to do this would be to include identical files in both the content directory and the template directory, but that seems sloppy. Alternatively, I could add a command to pelican to copy the files from one place to another before the generation happens. Looking for an alternative solution though.
Thanks!
Well, turns out I was outsmarting myself with this. All I needed to do was use the
DIRECT_TEMPLATES = [
r'maps/webmap1',
]
setting in pelicanconf.py. That way, I can {% include 'maps/webmap1.html' %} in a separate template, and also write it to its own standalone location in the output directory.