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/...
Related
I want my page to show table of content from list of dictionary call book_re. I use Jinja to iterate through my list and show each of them in page. One of them is image link so I use <img> tag for output the image. I add src attribute and use Jinja to assign img link from my dict. But HTML interpret my first quotation mark in key bracket as close quotation mark for src attribute. The problem is I don't know which escape syntax I need to use from Jinja or HTML. Which one I should use or are there any solution? to solve this.
Here is my HTML code
{% extends "layout.html" %}
{% block title %}
Search results: {{ keyword }}
{% endblock %}
{% block main %}
<h3>Keyword {{ keyword }}</h3>
<h3>result</h3>
<table class="table">
{% for book in book_re %}
<td><img src="{{ book["smallpic"] }}" alt="bookpic"></td>
{% endfor %}
</table>
{% endblock %}
Since Jinja is rendered before your HTML, your template should work. You can combine single and double quotes if you want better syntax highlighting support in your IDE.
<td><img src="{{ book['smallpic'] }}" alt="bookpic"></td>
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'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.
I am using the django template system fine-though is there a way to use the same variable inheritance tag for more than one template without pulling in the data from the other template too.
<div id="content-container3">
{% block content-container2 %}{% endblock %}
</div>
So I want to use the above in say people.html template and test.html template.
for example:
{% extends "base.html "}
{% block content-container2 %}{% endblock %}
Though it cross refernces information from two templates in this case -does each variable inheriatnce tag have to be unique?
try to move this part of code to different file (content_container3.html) and use include tag... or I did not understand your question :)
I think you should try nesting blocks like the below example.
{% block first_section %}
{% block first_section_upper %}
{{block.super}}
{% endblock first_section_upper %}
<h1 class="display-5">Some content</h1>
<h5 style="color: white !important;" class="display-5"> *Your text here*</h5>
<p class="lead">The Algorithms that run our Universe</p>
{% block first_section_lower %}
{{block.super}}
{% endblock first_section_lower %}
{% endblock first_section %}
The h1 tag and p tags can be different for every new template. As far as i could understand, this might solve your problem.