I have a django template that gets a set of images. The number of images varies. I want to align it in the template file, like 3 images per line. Normal displaying of the image does not align it. creating a
<div class="col-md-4">
</div>
for each image misformats after 3 images. How do I acquire this, either using django itself, or in bootstrap?
If I understand correctly you need to close your row after 3 objects.
To do this you should take a look at forloop.counter template tag and divisibleby filter in Django documentation about built-in template tags.
It seems that you want to split a list into equally sized chunks in django templates.
The following snippet would help.
Templatetag code:
from django import template
register = template.Library()
#register.filter(name='chunks')
def chunks(iterable, chunk_size):
if not hasattr(iterable, '__iter__'):
# can't use "return" and "yield" in the same function
yield iterable
else:
i = 0
chunk = []
for item in iterable:
chunk.append(item)
i += 1
if not i % chunk_size:
yield chunk
chunk = []
if chunk:
# some items will remain which haven't been yielded yet,
# unless len(iterable) is divisible by chunk_size
yield chunk
Template code:
{% for chunk in images|chunks:3 %}
<div class="row">
{% for image in chunk %}
<div class="col-md-4">
{{image}}
</div>
{% endfor %}
</div>
{% endfor %}
Related
I am creating a personal blog website with Flask and sqlalchemy.
While posting my blogs, I want the blog to be published with well formatted html.
Here is my model for Blogs:
class Blog(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(), index=True)
description = db.Column(db.Text(), index=True)
content = db.Column(db.Text(), index=True)
timestamp = db.Column(db.DateTime, index=True, default=datetime.utcnow)
likes = db.Column(db.Integer, default=0)
dislikes = db.Column(db.Integer, default=0)
comments = db.relationship('Comment', backref='commented_by', lazy='dynamic')
def __repr__(self):
return 'Title <>'.format(self.title)
And here is my form for adding blog:
{% extends 'base.html' %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1 class="code-line text-center" data-line-start="14" data-line-end="15">Add Blog</h1>
<br>
</div>
</div>
<form action="" method="POST" novalidate>
{{ form.hidden_tag() }}
<p>
{{ form.title.label }}<br>
{{ form.title(size=30) }}<br>
</p>
<p>
{{ form.description.label }}<br>
{{ form.description(size=30) }}<br>
</p>
<p>
{{ form.content.label }}<br>
{{ form.content() }}<br>
</p>
<p>
{{ form.submit() }}
</p>
</form>
{{ ckeditor.load() }}
{{ ckeditor.config(name='content') }}
{% endblock %}
This is how I am rendering my blog:
{% extends 'base.html' %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1 class="code-line text-center" data-line-start="14" data-line-end="15">{{ blog.title }}</h1>
<br>
{{ blog.content }}
</div>
</div>
</div>
{% endblock %}
While adding blog, I am using a text editor
But once it has been posted and I render it on view blog page, no html content is being rendered not even linebreaks
How can I save html content and tags in my sql database and then render it using jinja template?
first, what is wrong:
the text you get from the text field in the form is not the same thing as HTML that renders it, what you are getting is the text.
in case you want to get the HTML generated inthat form, you should integrate a rich text editor, like quilljs.com, or tiny.cloud in your template, that will have a field that you can use, to grab the HTML it generated, and it will also allow you to create nice looking blog articles.
if you do not want this either, to get html from that form, writing HTML directly in that form will give you what you want.
In the context of markdown, it is actually possible to apply the same format to your database-saved content. You can use a few packages to help you work with HTML in your database.
To begin, let me suggest Stackoverflow QA forms. Notice how it has enabled markdown editing and a nice little preview of the text being written. To enable the preview, you can install the flask-pagedown package in your virtual environment.
(venv)$ pip3 install flask-pagedown
Initialize a pagedown object in your application's instance, say in __init__.py file, or whatever other file you are using.
# __init__.py
from flask import Flask
from flask_pagedown import PageDown
app = Flask(__name__)
pagedown = PageDown(app)
Within your head tags in HTML, add this CDN call whose files you do not need to have in your application.
<!-- base.html -->
{% block head %}
{{ pagedown.html_head() }}
{% endblock %}
Or this:
<head>
{{ pagedown.html_head() }}
</head>
If you prefer to use your own JavaScript source files, you can simply include your Converter and Sanitizer files directly in the HTML page instead of calling pagedown.html_head():
<head>
<script type="text/javascript" src="https://mycdn/path/to/converter.min.js"></script>
<script type="text/javascript" src="https://mycdn/path/to/sanitizer.min.js"></script>
</head>
Now, simply update your forms to use PageDownField:
# forms.py
from flask_pagedown.fields import PageDownField
class Post(FlaskForm):
post = PageDownField('Comment', validators=[DataRequired()])
Or this:
<form method="POST">
{{ form.pagedown(rows=10) }}
</form>
That's it! You should be able to have a client-side post preview right below the form.
Handling Rich Text in the Server
When the post request is made, then only raw markdown will be sent to the database and the preview will be discarded. It is a security risk to send HTML content to your database. An attacker can easily construct HTML sequences which don't match the markdown source and submit them, hence the reason why only markdown text is submitted. Once in the server, that text can be converted back to HTML using a Python markdown-to-html convertor. There are two packages that you can make use of. Install then in your virtual environment as seen below:
(venv)$ pip3 install markdown bleach
bleach is used to sanitize the HTML you want converted to allow for a set of tags.
At this point, the next logical step would be to cache your content field content while in the database. This is done by adding a new field, let us say content_html, in your database specifically for this cached content. It is best to leave your content field as it is in case you would want to use it.
# models.py
class Blog(db.Model):
content = db.Column(db.String(140))
content_html = db.Column(db.String(140))
#staticmethod
def on_changed_body(target, value, oldvalue, initiator):
allowed_tags = ['a', 'abbr', 'acronym', 'b', 'blockquote', 'code',
'em', 'i', 'li', 'ol', 'pre', 'strong', 'ul',
'h1', 'h2', 'h3', 'p']
target.content_html = bleach.linkify(bleach.clean(
markdown(value, output_format='html'),
tags=allowed_tags, strip=True))
def __repr__(self):
return f'Title {self.title}'
db.event.listen(Blog.content, 'set', Blog.on_changed_body)
The on_changed_body() function is registered as a listener of SQLAlchemy’s “set” event for body , which means that it will be automatically invoked whenever the body field is set to a new value. The handler function renders the HTML version of the content and stores it in content_html , effectively making the conversion of the Markdown text to HTML fully automatic.
The actual conversion is done in 3 steps:
markdown() function does an initial conversion to HTML. The result is passed to clean() function with a list of approved HTML tags
clean() function removes any tags that are not in the whitelist.
linkify() function from bleach converts any URLs written in plain text into proper <a> links. Automatic link generation is not officially in the Markdown specification, but is a very convenient feature. On the client side, PageDown supports this feature as an optional extension, so linkify() matches that functionality on the server.
In your template, where you want to post your content you can add a condition such as:
{% for blog in blogs %}
{% if blog.content_html %}
{{ blog.content_html | safe }}
{% else %}
{{ blog.content }}
{% endif %}
{% endfor %}
The | safe suffix when rendering the HTML body is there to tell Jinja2 not to escape the HTML elements. Jinja2 escapes all template variables by default as a security measure, but the Markdown-generated HTML was generated by the server, so it is safe to render directly as HTML.
so i just started learning django, i understand the basic tag blocks but it didn't works well on my page. i have page called index.html and question.html
i write like this in index.html
<body>
<div>
<div>
sum content
</div>
<div>
{ % block content % }
{ % endblock % }
</div>
</div>
</body>
and like this in question.html :
{ % extends 'index.html' % }
{ % block content % }
<<my content>>
{ % endblock % }
but the content in question.html didn't show up in index.html. i've checked my setting and didn't have django-stub like in other case.
and if you want to know the structure, it goes like :
djangoProject1
>djangoProject1
>myweb
>static
>templates
-index.html
-question.html
this is my views.py
def index(request):
return render(request, 'index.html')
def question(request):
return render(request, 'question.html')
def formdata(request):
nama = request.POST.get("namaa")
umur = request.POST.get("umur")
komorbid = request.POST.get("penyakit_bawaan")
ruang = request.POST.get("ketersediaan_ruang")
demam = request.POST.get("demam")
lelah = request.POST.get("lelah")
batuk = request.POST.get("batuk")
nyeri = request.POST.get("nyeri")
tersumbat = request.POST.get("tersumbat")
pilek = request.POST.get("pilek")
sakit_kepala = request.POST.get("sakit_kepala")
tenggorokan = request.POST.get("tenggorokan")
diare = request.POST.get("diare")
hilang_cium = request.POST.get("hilang_penciuman")
ruam = request.POST.get("ruam")
sesak = request.POST.get("sesak")
sulit_gerak = request.POST.get("sulit_gerak")
nyeri_dada = request.POST.get("nyeri_dada")
hasil_rekomendasi = request.POST("hasil_rekomendasi")
data_resp = DataResponden(nama=nama, umur=umur, penyakit_bawaan=komorbid, ketersediaan_ruang=ruang, demam=demam,
lelah=lelah, batuk=batuk, nyeri=nyeri, tersumbat=tersumbat, pilek=pilek,
sakit_kepala=sakit_kepala, tenggorokan=tenggorokan, diare=diare,
hilang_penciuman=hilang_cium, ruam=ruam, sesak=sesak, sulit_gerak=sulit_gerak,
nyeri_dada=nyeri_dada, hasil_rekomendasi=hasil_rekomendasi)
data_resp.save()
return render(request, 'question.html')
Thank you in advance!
It looks like you might have some confusion regarding how templates work. index.html is a parent/base template, because it is being extended (through the {% extends 'index.html' %} tag). question.html is a child template, which means if you make no changes, it will inherit everything from index.html.
A child template can override parts of the parent template by using {% block %} tags. So when the webpage is getting rendered, the code from the block in the parent is not used at all (if there was any). When you directly render the parent template, there will be no such replacement since it does not extend anything.
So the rendered HTML for your files should be as follows
index.html
<body>
<div>
<div>
sum content
</div>
<div>
</div>
</div>
</body>
question.html
<body>
<div>
<div>
sum content
</div>
<div>
<<my content>>
</div>
</div>
</body>
So yeah, content in question.html is not supposed to show up in index.html. It works the other way around, with the entire structure of index.html being used for question.html, except for the things you override.
If you want index to have some content by default, you can have code inside the content block. It will be replaced by any child templates if necessary, but when you load just index.html it will still be visible.
If you are actually trying to insert something into index.html, take a look at the include tag. This allows for re-using common sections of the website across webpages. But you would not extend the base template inside any template you are planning to include.
Just remove the spaces in tag blocks everywhere like this:
Change this:
{ % block content % }
To this:
{% block content %}
Similarly with other tag blocks.
I created jinja module as example, which looks like this
{% from 'snippet.j2' import module with context %}
{% call module() %}
logic [$size(din.data)-1 : 0] res;
assign res = din.data * din.data;
{% if params['half'] %}
assign dout.data = res / 2;
{% else %}
assign dout.data = res;
{% endif %}
assign din.ready = dout.ready;
assign dout.valid = din.valid;
{% endcall %}
How should I use this module inside PyGears?
Okay, I think this should work.
If I understood correctly you are trying to create a Jinja template for a module that will multiply with 1/2 (in other words divide by two). First of all, make sure your Jinja file and module are named the same (this is a must so PyGears would know which Jinja template to use).
Having all this in mind let's say our module name is mulh
Python file would be something like this:
from pygears import gear, Intf, reg
from pygears.typing import Uint
from pygears.hdl import hdlgen
#gear
def mulh(din: Uint,*,half=False)->b'din*din':
pass
mulh(Intf(Uint[8]))
hdlgen('/mulh', outdir='.')
This code will call your Jinja file and the HDL output would look like something like this:
module mulh
(
input logic clk,
input logic rst,
dti.consumer din, // u8 (8)
dti.producer dout // u16 (16)
);
typedef logic [7:0] din_t; // u8
typedef logic [15:0] dout_t; // u16
din_t din_s;
dout_t dout_s;
assign din_s = din.data;
assign dout.data = dout_s;
logic [$size(din.data)-1 : 0] res;
assign res = din.data * din.data;
assign dout.data = res;
assign din.ready = dout.ready;
assign dout.valid = din.valid;
endmodule
To make it easier to picture all of this I made this picture bellow
I am making an app that displays questions. The question model has a text field and an image field. Each question has a template that is stored in my database in the text field. My problem is when I want to access images from the model, template tags are displayed as text and not rendering. My code:
# question model
class Question(models.Model):
question_text = models.TextField()
question_image = models.FileField(upload_to='static/images/questions', blank=true)
# question view
def question(request, question_id):
question = get_object_or_404(Question, pk=question_id)
return render(request, 'questiontemplate.html', {'question': question})
# template
{% extends 'base.html %}
{% load static %}
{% autoscape off %}
{{ question.question_text }}
{% endautoscape %}
# in my database:
question.question_text = '<p> some html
{{ question.question_image.url }}
some html </p>'
question.question_image = 'image.png'
This works fine and renders the html perfectly except the template tag is not rendered and does not not give the image url
I want this to be the output:
Some html
static/images/questions/image.png
some html
But instead this is the output:
some html
{{ question.question_image.url }}
some html
Any suggestions to how the template tags could be render from the database text would be much appreciated.
Thanks for reading
Django doesn't know that the content in your model field is itself a model. The template can't know that. The only way to make this work is to treat that field itself as a template, and render it manually.
You could do that with a method on the model:
from django.template import Template, Context
class Question(models.Model):
...
def render_question(self):
template = Template(self.question_text)
context = Context({'question': self})
rendered = template.render(context)
return mark_safe(rendered)
Now you can call it in your template:
{{ question.render_question }}
This question already has answers here:
is there a way to loop over two lists simultaneously in django?
(6 answers)
Closed 6 years ago.
I am new to Django, I have passed two list(rawmaterial and food) to my template, and then I want to have a loop like this :(it is the logic of my aim, the syntax is not correct)
for(i=0;i<food.length;i++)
<div ,id="menuFood>
<h4> food.name(i)</h4>
<h4> rawmaterial.name(i)</h4>
</div>
but when i searched, i can find only loop like this:
{% for o in some_list %}
{% endfor %}
so with this syntax , I can't understand how to create that loop. I think only nested loop can make by this syntax..
here is my view code :
def foods(request):
food = Food.objects.all()
raw = [];
.
.
.
raw.append(warehouse)
return render(request, 'polls/foods.html', {'food': food,'rawmaterial': raw})
You can't do index on django template, but you could just put 2 lists together in your views.py using zip function:
food = Food.objects.all()
raw = []
# ...
raw.append(warehouse)
result = zip(food, raw)
return render(request, 'polls/foods.html', {'result': result})
Then in your template:
{% for food, raw in result %}
<h4>{{ food }}</h4>
<h4>{{ raw }}</h4>
{% endfor %}
By the way, you seems to come from java/c++ background because in python people never do:
for(i=0; i<food.length; i++)
print food[i]
instead, we do:
for i in food:
print i
Django template is adopting the similar syntax, it makes writing a loop a lot easier.