I'm just learning the basics of django and jinja. I've extended my header file and now I want to add an image to the page, but I don't know the jinja syntax for doing that. Please assist.
{% extends "media/header.html" %}
{% block content %}
This is where I would like to insert my image.
{% endblock %}
Just use html img tag for that. If you pass your image in context as variable;
{% extends "media/header.html" %}
{% block content %}
<img src="{{ variable }}" alt="image alt text" />
{% endblock %}
If you just have static path;
{% extends "media/header.html" %}
{% block content %}
<img src="{{ static('path/to/image.png') }}" alt="image alt text" />
{% endblock %}
May be this is too late to reply, but this is how I use for rendering images using jinja syntax. I have successfully rendered images on pdf from html.
<div class="img-div" style="background-image: url('{{ element.image }}');">
</div>
element.image could be a any resolvable url.
Related
I have a list of forms which, among other fields, contain a URLField. I try, very simply, to display those images:
{% extends "myapp/base.html" %}
{% block extra_head %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/mycss.css' %}">
{% endblock %}
{% block content %}
{% load crispy_forms_tags %}
<div class="form-group">
{% for form in forms %}
<img src="{{form.image_url}}" alt="Image of product"/> # Not working
{{form.image_url|as_crispy_field}} #shows image-url, thus it's not empty
{% endfor %}
</div>
{% endblock content %}
as you can see in the picture below
the image is not rendered and it displays some om the HTML-code afterwards (it seems some character escaping is missing?), but it does indeed contain the URL (the url-bar below).
If I copy-paste the image-url directly into src it works fine.
form.image_url is a forms.Field, not an actual value.
To access the URL as string use {{ form.image_url.value }}.
Docs
It can have no value, so you would want to check for it before rendering the <img> tag.
I am trying to make a little website with django when I ran into a problem:
I have a site where I want to look at a post in detail, but not every post has an image attribute - so I am getting an error when I try to display images, since some arent existent.
So the solution would be to check if an image is given, but... How do I do that?
I tried something like this but it did not work:
</div>
<p>{{ object.content }}</p>
{% if object.image.url == True %} <!-- In no case an image is displayed -->
<p>
<img src="{{ object.image.url }}">
</p>
{% endif %}
</div>
You should check the truthiness object.image attribute, not its URL, so:
{% if object.image %}
<p><img src="{{ object.image.url }}"></p>
{% endif %}
I have a base.html template which contains basic html definitions .The other templates are defined below
// pages/dashboard.html
{% extends 'base.html' %}
{% block body %}
{% include 'components/nav.html' %}
{% include 'components/dashboard.html' %}
{% endblock %}
// components/dashboard.html
<div class="page-container">
<div class="main-page">
{% block dashboard %}
{% endblock %}
</div>
</div>
// mailer/new.html
{% extends 'pages/dashboard.html' %}
{% block dashboard %}
<h1>hello</h1>
{% endblock %}
The view renders mailer/new.html the problem is that the block containing <h1>hello</h1> is not working. Where am i going wrong with that ?
{% include %} doesn't work that way. See the note in the documentation for that tag:
Blocks are evaluated before they are included. This means that a template that includes blocks from another will contain blocks that have already been evaluated and rendered - not blocks that can be overridden by, for example, an extending template.
Okay so I have my index.html file which has a file called info.html which exntends from the index.html file but it isn't quite working currently. Here's my code:
index.html
<body>
{% include "home/quote.html" %}
{% include "home/intro.html" %}
{% block content %}
{% endblock %}
{% include "home/projects.html" %}
{% include "home/goals.html" %}
</body>
info.html
{% extends "home/index.html" %}
{% block content %}
<section class="info-section">
<div class="info-section_content">
{% include "home/includes/info-content.html" %}
</div>
</section>
{% endblock %}
Essy Fix!
In views.py in the apps directory i was rendering the parent file (index.html) so I have now switch to render the child file (info.html) and it now works.
I would need some more information on your project to know for sure, but I would check to make sure that you are referencing the proper namespace here:
{% extends "home/index.html" %}
For instance if the path is something like templates/home/something/info.html or templates/something/home/info.html this could be the issue.
Is it possible to use a plugin into the header ?
For example, display one image after the title, in header.html.
<hgroup>
<h1>{{ site.title }}</h1>
{% if site.subtitle %}
<h2>{{ site.subtitle }}</h2>
{% endif %}
{% img /images/my_image.jpg %}
</hgroup>
Note that I didn't try ...
The image isn't really a plugin, but you should be able to add an image. I would use an img tag instead, so <img src="/images/my_image.jpg"> instead, but that may work as well.
You can also use {% include file_path %} If you want to include your own widgets. Please note that file_path is the file path in source/_include/...