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>
Related
I am trying to make a website using Jekyll as a local test for github-pages.
I wrote like the following within my _layouts/default.html, but it seemed that ‘{{ category.name }}’ in the if statement was not recognized as a variable. Can’t we use variables in condition in Jekyll?
{% for category in site.categories %}
{% if page.dir contains ‘{{ category.name }}’ %}
<a href="{{ category.url }}">
{{ category.name }}
</a>
{% endif %}
{% endfor %}
I referred to these manual:
collection
navigation & include
You do not need to put a variable inside double curly braces when evaluating a expression in tags. You simply need to do:
{% if page.dir contains category.name %}
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'm creating a bird's eye view tutorial for Jekyll, to be hosted on Github pages (on my blog that runs on Jekyll). So, I want to put some code there. If I put the following:
{% for post in site.posts %}
{% if post.categories contains '<categoryname>' %}
<h2>
{{ post.title }}
</h2>
{% endif %}
{% endfor %}
(all lines after tabspaces), it doesn't render as code, rather, it executes. How do I stop it from executing and render it as code?
The {%...%} syntax used by Jekyll is part of the Liquid templating engine. To escape these tags, and so show them literally, you should use the raw tag.
You will probably want to combine this with the markdown syntax for code blocks. With Redcarpet you can use the triple backtick syntax. It doesn’t matter if you put the backticks inside the raw tags or the other way round:
{%raw%}
```
{% for post in site.posts %}
{% if post.categories contains '<categoryname>' %}
<h2>
{{ post.title }}
</h2>
{% endif %}
{% endfor %}
```
{%endraw%}
Enclose your code in backticks:
(tested with redcarpet markdown engine)
```
{% for post in site.posts %}
{% if post.categories contains '<categoryname>' %}
<h2>
{{ post.title }}
</h2>
{% endif %}
{% endfor %}
```
There are at least three options exist, taht you can use to format code in Jekyll:
highlight - Jekyll has built in
{% highlight java %}
ValidationResult validationResult = NetLicensing.LicenseeService.validate(context, licenseeNumber);
{% endhighlight %}
example: https://raw.githubusercontent.com/Labs64/netlicensing.io/gh-pages/_drafts/2010-09-16-post-template.md (see Syntax highlighting section)
backtick - GitHub style
```java
ValidationResult validationResult = NetLicensing.LicenseeService.validate(context, licenseeNumber);
```
HTML pre/code - HTML can be included in markdown as well
<pre><code>
ValidationResult validationResult = NetLicensing.LicenseeService.validate(context, licenseeNumber);
<code/></pre>
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/...
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.