How to filter images? - django

The truncatechars and safe filters work the way I want the problem is the image shows up too in my descriptions and I don't want images to show up like they do in this image. https://i.imgur.com/KjcX5NQ.png
{% for post in post_entries %}
<div class="post-preview">
<h3 class="post-subtitle">{{ post.post_text|truncatechars:125|safe }}</h3>
</div>
{% endfor %}
<h3 class="post-subtitle"><p><img alt="" src="./Journal_files/1555448282201.jpg" style="float:right; height:155px; width:55px">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrup…</p></h3>
</a>

You have to remove the <img> tags (and possibly quite a few others) from your post.post_text before rendering it. FWIW, applying the truncatechars and safe filters in succession to an HTML snippet is a very bad idea, as you can (and will) end up with unclosed tags, breaking your own template's markup.
Django provides a striptags filter too, but the offical recommandation here is to use bleach:
Note that striptags doesn’t give any guarantee about its output being
HTML safe, particularly with non valid HTML input. So NEVER apply the
safe filter to a striptags output. If you are looking for something
more robust, you can use the bleach Python library, notably its clean
method.

Related

Submit buttons in Zurb: do you use an <a> or?

I'm not really getting the rationale behind the overabundance of <a>s in the code at http://foundation.zurb.com/docs/components/buttons.html; and the lack of representation for the other elements.
Short of one mention, and one line, both under the Accessibility section, no mention is made of any other element (why not <button>, or <input> for example?). It almost seems as if (due to the overwhelming overrepresentation) the documentation were saying "we really designed this for <a>s". Is that really the case?
(Small aside: the line that mentions using other elements, I have a problem with: If there is no <a href=""> then simply add the tabindex="0" to the div or span to make it focusable. If a button is focusable, I expect to be able to trigger it with the spacebar. Unfortunately, when you've got a div or a span, you can't. So is this really useful, or even constructive?)
I get that you can use <a>s for cases where no forms are involved, but what of your standard "submit" button where a form is involved? Wouldn't using a <button> resolve all the issues that you would have using an <a>? 1. It's focusable. 2. When focussed, you can trigger it with the spacebar. 3. You can conveniently press <Enter> to submit the form. What do other folks use for your submit button/s?
The buttons tags are usable in foundation 5. There is not a lot of documentation on it but (and I tested it to make sure I was correct) the <button> tag works as normal.
The <a> tag is used on the example site sure, but that doesn't limit its use when working with it.
You should still use <button> with forms and use <a> for links.
If you look at adioso.com (they use foundation) and inspect their forms, they use buttons for functional uses outside of links.
<form class="flight_search" method="get" action="/search_form">
<div class="search_form_inputs">
<ul class="row">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
<li class="columns large-3 small-12 medium-6">
</ul>
</div>
<div class="search_sundries">
<div id="passengers" class="awesome-search">
<div id="submit-wrap">
###<button id="submit-btn" type="submit" class="search_button" tabindex="9">Find Flights</button>###
</div>
</div>
</form>
Check the above code. The example website isn't a very solid representation of what foundation can do but play with it a bit and you'll see its a very solid framework.

How to make reuseable blocks of HTML based upon a model object

Say I have a simple model with Title, Price, Description and Image fields. I would like 3 html outputs/blocks that I can reuse for each object of this model. For added 'complexity', 2 of the outputs will be combined to make the 3rd. So, here is what these 3 output might look like in a template.
output_image
<span class="output_image"><img src="{{ object.image.url }}" alt="{{ object.title}}></span>
output_info
<ul class="output_info">
<li>{{ object.title }}</li>
<li>Price: {{ object.price }}</li>
<li>{{ object.description }}</li>
</ul>
output_all (wraps up the previous 2)
<div class="output_all">
<span class="output_image">...</span>
<ul class="output_info">...</ul>
</div>
I might want to use output_image on a search page, and output_all on listing and advanced search, for example. Hence I only want to write this output once, and reuse it. What is the best way to achieve this?
Initially I thought to add methods/properties to the model class, which would return the formatted html. This worked, and in my template I could just call {{ object.output_all }}, for example. Is it bad practice to output html like this?
I have briefly looked at other ways too. Inclusion tags seems to work, but I have only tested with a 'complete' version of the output_all case (ie have not 'nested' the other 2 output tags within output_all yet). Is this the correct method, and is it possible to 'nest' the tags?
I would use inclusion tags for this. Keep presentation logic where it belongs, in templates.

Fetch blog entries with bootstrap custom theme and mezzanine

I'm new to mezzanine, I managed to install my custom bootstrap theme just copying templates and static files in the relatives folders in my django app.
Assume in my index.html I have some blog entries like these
<h2>Other Entries</h2>
<article>
<h3>Blog Post 1</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.... Read more</p>
</article>
<article>
<h3>Blog Post 2</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.... Read more</p>
</article>
<article>
<h3>Blog Post 3</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.... Read more</p>
</article>
How can I fetch my blog entries I've previously inserted in the admin page?
Thanks
At the top of your template put:
{% load blog_tags %}
Then wherever you want the blog posts to show up put something like the following
{% blog_recent_posts as recent_posts %}
{% for blog_post in recent_posts %}
<h3>{{ blog_post.title }}</h3>
{{ blog_post.description_from_content|truncatewords_html:10|safe }}
Read more
</article>
{% endfor %}
Shameless plug:
I'm in the middle of writing a series of blog posts that describes the process of how I create themes for Mezzanine. Check it out, http://bitofpixels.com/blog/mezzatheming-creating-mezzanine-themes-part-1-basehtml/

How to state correctly the author informations of an article with microdata?

I'm using the microdata system for some articles.
But I can't find some good ressources to know if the structure of my schema, for the author, is good or not.
"Article"'s shema allow to specify an "author", but how to indicate the informations (image, link, name) about this author ?
Actualy I use the following (fiddle):
<div itemscope itemtype="http://schema.org/Article">
<h1 itemprop="name">Article title</h1>
<div itemprop="articleBody">
Lorem ipsum dolor sit amet...
</div>
<div itemprop="author" itemtype="http://schema.org/Person" class="author">
<a href="member-page.html" itemprop="url">
<img itemprop="image" src="http://pic.okisurf.com/member/none/xs/m.png"/>
<span itemprop="name">Author name</span>
</a>
</div>
</div>
Does this line is correct ?
<div itemprop="author" itemtype="http://schema.org/Person">
If it is not, any help or ressource link will be greatly appreciated.
It seems that to specify a new itemtype inside another, we need to specify another time the itemscope !
So this line will be correct :
<div itemscope="" itemprop="author" itemtype="http://schema.org/Person">
To make sure that the microdata are well formed, I suggest to use the Webmaster Tools richsnippets test

Django: Why is this output HTML-escaped

In my template I'm writing:
<div class="content video">{{ each.text }}</div>
And I'm getting:
<iframe width="300" height="200" src="http://www.youtube.com/embed/1C1HLH-hOZU" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>
I want that text to be the part of the mark up,not as text.What say?
Do you mean the output of each.text is escaped and you see the text in your browser rather than the rendered markup?
This is because Django's template engine autoescapes output by default for security reasons. You might want to use the builtin safe filter like this:
<div class="content video">{{ each.text|safe }}</div>
Or another way is to use mark_safe in your view.