I have a Django application where users upload videos (played back via html5 video tag). To handle edge cases where a user is unable to playback the video, I give them the option to download it.
For this, I'm writing JS that ensures a "download" button appears whenever a src isn't loading. Here take a look: http://plnkr.co/edit/o8YFZNaEhpJMg4YPhZCO?p=preview
The problem is that my JS resides within <head></head> and it needs to be able to access all videos I'm going to show on page.
Normally, I pass video objects as an object_list that I then iterate through (generated through a paginated ListView). But all this happens in the body of template.
How can I get access to context[object_list] within <head> so that the JS snippet I've shared can utilize the sources (I'm already inheriting <head> from base.html)? Secondly, how do I ensure I only pass video sources in page to my JS snippet?
Can someone give me an illustrative example via which I can solve this?
Define a block in your base.html that you can override in your object list template.
See https://docs.djangoproject.com/en/1.11/ref/templates/language/#template-inheritance
You can do it by adding a
{% block video_head_tag %}
{% endblock %}
inside your <head></head> tag in the parent template "base.html"
on your child template
{% extends "base.html" %}
{% block video_head_tag %}you_object_list{% endblock %}
Reference https://docs.djangoproject.com/en/4.1/ref/templates/language/#template-inheritance
Related
I come to Django having used the Yii2 PHP framework. One of the good features about that is it allows you to create asset files for CSS and JS which are then loaded into the base layout file at runtime. This allows you to keep the base template clean of CSS and JS markup within the head and at the bottom of the HTML document. The CSS and JS files you specify in the asset file are automatically placed in the correct position in the document and you can also specify dependencies if needed.
At the moment, with Django I am having to edit the base.html file manually which is not ideal.
I know you can use the Media class for forms, and in admin.py, which does a similar job. However, what I would like to do is to something like this (for example) in inclusion template tags or in a class based view perhaps.
Is this possible?
Many thanks!
UPDATE
Here is a similar question Is it possible to use django's custom template tags to insert code in other blocks in the template?
do you find block tag?
base.html
<head>
{% block extra_css %}{% endblock %}
<head>
view.html
{% extends 'base.html' %}
{% block extra_css %}
<link rel="stylesheet" href="YOUR URL">
{% endblock %}
My team and I are working on a project that involves a landing page and dashboard for the users after their login. We have more or less completed the functions of the webpages with very basic styling using bootstrap. We purchased a html template from the web and would like to 'transfer' what we have onto the new template so that it will look professional without us having to style everything from scratch.
I have very basic knowledge of the template inheritance system and thus have much difficulty using the purchased template into our work.
I would like to seek some guidance to how I can/should proceed to use the purchased template. For example should I work on the base.html using the purchased index.html file from the purchased template and how I should go about doing so.
I'm lost in how I should start so any tips will definitely be of a great help.
So the workaround is include all the css and js in static folder
static
css
js
templates
landing
homepage.html
base.html
copy all the index.html to base.html and remote inside body content and place it in homepage.html. Now
homepage.html
{% extends "base.html" %}
{% block content %}
paste all inside body contents here
{% endblock content %}
base.html
<body>
{% block content %}
{% endblock content %}
</body>
Note: Make your view return to landing/homepage.html
Django provides a means of collecting assets into its Widget framework, and in turn using a form to present it, but how about doing this outside the forms framework?
For example, let's say I just want a simple, self-enclosed web component that requires two .js files, a CSS file, a template, and is backed by a view to generate some data. This isn't a "form" because it's not intended to collect input. Rather, assume it's, say, a customized scrollbar. I can't seem to find the right match for this usage pattern even though it seems common and straight-forward.
To do this now seems to mean adding the CSS to the top-level template; the JS to the template (or script tags arbitrarily in the included document); and then rendering the form as an include. But wouldn't it be easier to have something like:
class ScrollBar(...):
template_name = ...
class Assets:
...
and then rendering it via a templatetag, but with the ability for a context processor or other hook to extract the assets into their appropriate places in the page?
Something like:
index.html:
<html>
<head>
...
{% compressed_css %}
</head>
<body>
...
{% compressed_js %}
{% block content %}
{% endblock %}
</body>
scrollbar-using-page.html
{% extends "index" %}
{% block content %}
{% scrollbar args %}
{% endblock %}
with the end result being the scrollbar's template is rendered with the specified args, and its JS and CSS are merged into the compressed_css and compressed_js areas, respectively, above?
I think we get there almost 100% via this approach, without the compressed_js/compressed_css sections, which raises the question of whether then we just included these in all shared pages. (Alternatively, we could use nested/inherited blocks.)
Adam
Last time i make my way through python library - django. I have idea how MVC model works and other basics about creating django projects. I'm going to create site in django but there is one thing that loom large in my mind.
After i will create apps for managing articles, polls, and other likely to change content of site, i have to join it together on one page. By lack of knowledge it looks awful for me.
To make index page, i mind to create app and connect it in URLconf to '^$'. Then, i will have large template containing everything in html - head, meta, includes(js, css) etc. It doesn't sounds good for me(probably lack of knowledge). Look..
How i will be able to get link to specific content on site(i.e. article) to give it to somebody? I need /article/2013/02/55 show specific article but it needs to use my index page for meta, includes, entire structure of site etc. I can't imagine how I will be able to connect it together.
I'm in the course of "The Definitive Guide to Django: Web Development Done Right" book. Maybe i will get answer later but I'm nervous and impatient. It would be great to make use of ajax and some jquery-ui on site but i can't even imagine how to do static site with nested apps!
You just need to extend the base template and use blocks.
base.html
<html>
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="...">
<script>...</script>
</head>
<body>
{% block content %}
Content from the base template
{% endblock content %}
</body>
</html>
appname/templatename.html
{% extends "base.html" %}
{% block content %}
Content from the app template to replace other content
{% endblock content %}
See the docs for more info on template inheritance.
I have a template structured as follows:
<html>
<head><title> {%block title %} Default title {% endblock %} </title> </head>
<body>
<iframe>
<head> <title> {% block title %} Title for frame {% endblock %} </title> </head>
<body> Main content. This is what people see on the web page. </body>
</iframe>
<!-- Content that I do not want to reload every time. A player, to be precise. -->
</body>
</html>
Within the iframe, I inherit templates and so on, to display my final page. The title block within the iframe gets replaced properly, and the title of the iframe is what it should be.
However, I want to replace the title of the parent frame, when I load a page inside the iframe. Is it possible to do this? I don't want to do it via Javascript, because that defeats the purpose of SEO. I want the title to be changed when the page is loaded itself, from the server side.
Thanks in advance.
You have two blocks named with name title. Rename one of them and everything should work fine. The Django template construction isn't influenced at all if you are working with iframe or with any other element.
EDIT:
When an iframe gets a new location it sends a request to the server and renders all of its response inside the iframe. So no it is not possible to leverage Django's template system for a change in the iframe's parent site.
I am no SEO expert but using an iframe like this will probably not be liked by a search engine anyway. You should implement the traditional click-pageload way. If you want to speed things up you can use JavaScript on top of that. Captchure your menu clicks and load the needed parts of the site asynchronously. This way both you and your search engine can be happy :)