show text as it is entered in input box - django

I have created a Q&A website in Django I want to print text in the same format as it entered
This is the text
This is on a new line
It should print in this format as it is entered but it prints like this
This is the text This is on a new line
my forum.html code
<div class="card-body cardbody">
<p>{{post.post_content|truncatewords:"10"|linebreaks}}</p>{% if post.post_content|length|get_digit:"-1" > 50 %}
<button class="btn btn-light" style="color:blue; font-size: 13px;">Show more </button>
{% endif %}
</div>
please help me to do this

The documentation for truncatewords mentions:
Newlines within the string will be removed.
Hence you need to use the linebreaks filter first and then instead of truncatewords you should use truncatewords_html:
{{ post.post_content|linebreaks|truncatewords_html:10 }}

Related

Showing list of items including item details on same page in Django

In a Django v3.x app I would like to display a list of uploaded file names (e.g. images) in the left hand side of the screen. When a user clicks on one of those, I'd like to display the actual file/image on the right hand side of the screen. I am still new to Django and have used both ListView and DetailView separately, but not in such a combination. I'm not sure how this can be achieved.
Using a little Bootstrap magic, I can create a split screen easily. Hence, my template would look somehow like this:
<div class="row">
<div class="col-md-5 left">
{% for image in images %}
<div class="card">
<h4>{{ image.url }}</h4>
View
</div>
{% endfor %}
</div>
<div class="col-md-5 right">
{# TODO: When the user clicks on the View url above, then I'd
like to load the actual image here on the right hand side of the
screen inside this div-tag. #}
</div>
</div>
Question 1: How can I achieve loading a selected image from a list? Can I still use ListView and DetailView, or do I need to write my own View logic?
Question 2: Ideally, I'd like to NOT re-send the whole page from the server to the client, because the list of images in the lefthand-side could potentially be long and require pagination. So, when the user clicks View, then, ideally, I'd like to load only the document from the server. Is this somehow feasible?
Well I have made a sample code and you can refer to it and get some idea.
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails"
data-ride="carousel">
<!--Slides-->
<div class="row">
<div class="col-lg-8">
<div class="carousel-inner" role="listbox">
{% for latest in latest_course %}
<div class="carousel-item {% if forloop.counter0 == 0 %}active{% endif %}">
<img class="d-block w-100" src="{{latest.poster.url}}" alt="First slide">
</div>
{% endfor %}
</div>
</div>
<!--/.Slides-->
<div class="col-lg-4">
<ol class="slider_list">
{% for latest in latest_course %}
<li data-target="#carousel-thumb" data-slide-to="{{forloop.counter0}}"
class="active"> <img class="img-thumbnail" width="100px" height=100px src="
{{latest.poster.url}}"
class="img-fluid"></li>
{% endfor %}
</ol>
</div>
and the output looks like this
Here, you can see the list on the right side and when you select an item the selected item loads in the left side. This way you can style your template the way you want.
basically you want to show the selected item from the list on the other side like a slideshow

Concatenate string and UUID in Django Template

I am trying to concatenate the UUID of a record with a base URL to create a scannable QR code that will link to the direct record on the website. When trying to concatenate the two it fails and yields nothing.
The relevant part is device.id which is a UUID for the device. I've string |stringformat:"s" as well and that didn't work. I don't know what the best practice to do this is and am struggling.
<div class="row">
<div class="col-xs-12 text-center">
{% with "http://127.0.0.1:8000/ims/device/"|add:device.id as deviceurl %}
{% qr_from_text deviceurl size=25 %}
<p class="small text-center">{{deviceurl}}</p>
{% endwith %}
<p class="small text-center">{{ device.id }}</p>
</div>
</div>
Since the |add filter only works with two strings it cannot be used as a general answer. I created a custom |addstr filter and included it in the file which solved the problem.
How to concatenate strings in django templates?

Django, remove initial space of a template value in a textarea

I am trying to put some text in a textarea using a template variable like this:
{% if action == 'edit' %}
<form>
<textarea style='width: 420px; height: 65px'>
{{ post.text }}
</textarea>
</form>
{% endif %}
However, I notice that the text is displayed with some initial whitespace that I can't remove. I tried creating a filter to .strip() the text before showing to the user but to no avail. Although the text is stripped from whitespace it does display with some space characters before the first letter.
Is there a solution for this?
try not to put space in your code
<textarea style='width: 420px; height: 65px'>{{ post.text }}</textarea>

django display textfields

I have a form with textfields in Django, and users enter texts line by line.
When I look at the entries in admin side, I saw exactly how user wrote it but when I display it on my website, in Django templates, it just joins the sentences and I couldn't display the text line by line anymore.
To illustrate, user enters text as
-bla
-bla1
-bla2
However, it looks like in my page as
-bla1-bla2-bla3
This is my code in the template:
<div>
<p>
{{ rev.myTextField }}
</p>
</div>
In HTML, newlines between text don't imply a newline in display; you need to use HTML to insert the newline. The most straightforward way is with the <br /> tag, although there are other methods as well.
Django has a template filter for this: use |linebreaks. Here's the Documentation.
So, change:
{{ rev.myTextField }}
to:
{{ rev.myTextField|linebreaks }}
Try "safe" tag
{{ rev.myTextField|safe }}
using
{{ rev.myTextField|linebreaks }}
disables <small> tag, its better to use
{{ rev.myTextField|linebreaksbr }}
it just put <br> tag, not <p>

UnicodeDecodeError in template

I get the following error code when trying to load the template.
'utf8' codec can't decode byte 0x94 in position 720: invalid start byte
Here is the template:
{% extends "base.html" %}
{% block site_wrapper %}
<div id="main">
Skip to main content
<div id="banner">
<div class="bannerIEPadder">
<div class="cart_box">
[link to cart here]
</div>
Modern Musician
</div>
</div>
<div id="navigation">
<div class="navIEPadder">
[navigation here]
</div>
</div>
<div id="middle">
<div id="sidebar">
<div class="sidebarIEPadder">
[search box here]
<br/>
[category listing here]
</div>
</div>
<div id="content">
<a name=”content”></a>
<div class="contentIEPadder">
{% block content %}{% endblock %}
</div>
</div>
</div>
<div id="footer">
<div class="footerIEPadder">
[footer here]
</div>
</div>
</div>
{% endblock %}
In UTF-8 0x94 is nothing, however in ISO1252 it's a right quote (”). Generally speaking the plain quote (") is much safer.
Make sure you're not copying and pasting this out of some blog that has weird accented quotes or something like that.
If you're using a text editor save it as ascii and see what crops up missing.
You have weird double quotes around div#content, try replacing them with ASCII quotes.
Maybe your template is encoded with something other than utf-8? It depends on your terminal/editor or maybe OS settings.
I had some strange characters in my code because i copied out of a pdf-file.
I had this same error . . . and it turned out that the problem was I included a "©" in my source copied as a part of a template.
Got to check that code for strange characters.........