Include snippets in template that have view-like logic - flask

I am building a blog with flask-flatpages. In the header of a markdown blogpost, I list the related blogpostings by filename. These should show up as excerpts below the actual blogposting.
Here is what blogpost-1.md should look like:
title: "Blogpost one"
published: 2014-02-13
related:
- blogpost-2.md
- blogpost-4.md
description: "This is the excerpt of blogpost one."
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
vel leo turpis. Cras vulputate mattis dignissim. Aliquam eget
purus purus.
And the result I want:
BLOGPOST ONE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel
leo turpis. Cras vulputate mattis dignissim. Aliquam eget purus purus.
related posts:
BLOGPOST TWO
Summary here
BLOGPOST THREE
Also a summary
The essential part is to follow the path of the related blogpostings and render their title and excepts. Naively something like:
{% for item in blog.meta.related %}
<div>
<h4>{{ item.title }}</h4>
<p>{{ item.decription</p>
</div>
{% endfor %}
This is obviously not going to work, because meta.related is simply a list of strings. It is also not difficult to make a view function that takes these strings and returns a httpResponse:
# app.py
#app.route('/excerpt/<path:path>.html')
def excerpt(path):
blog = blogs.get_or_404(path)
return render_template('excerpt.html', blog=blog)
# excerpt.html
<div>
<h4>{{ blog.meta.title }}</h4>
<p>{{ blog.meta.description }}</p>
</div>
My question: how do I make this happen within the same template?
Should I somehow try to pass the data from the related blogpostings into the context: a list of dicts maybe? Should I use a context processor to achieve this?

Hei Roy, thanks for you research but for the moment i cannot comment so i have to find a way to clarify this.
In order to make this working, in the markdown file you wrote:
title: "Blogpost one"
published: 2014-02-13
related:
- blogpost-2.md
- blogpost-4.md
description: "This is the excerpt of blogpost one."
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
vel leo turpis. Cras vulputate mattis dignissim. Aliquam eget
purus purus.
Need to be change blogpost-2.md and blogpost-4.md without the .md extension.
Without these changes when you loop on the view file:
for path in blog.meta['related']:
related_list.append(blogs.get_or_404(path))
blogpost-1/2.md will not be added to your list because Flask-FlatPages will not understand .md extension and 404 error comes up.
In my case
#app.route('/blog/<path:path>.html')
is changed without .html like :
#site.route('/bloging/<path:path>/')
And to simplify some coding, in template
{{ related.meta.title }}
is equivalent to
{{ related.title }}
and you could add the link to your related article with:
{{ related.title }}
where site is my blueprint.

I arrived at a pretty straightforward answer, but keeping the question open to see if there is a more elegant solution.
In the view function, I iterate the paths of the related blog postings and add the blog objects to a list, which gets passed to the template.
Like this:
#app.route('/blog/<path:path>.html')
def blog_detail(path):
blog = blogs.get_or_404(path)
related_list = []
for path in blog.meta['related']:
related_list.append(blogs.get_or_404(path))
return render_template('blog-detail.html', blog=blog, related_list=related_list)
And in the template:
{% for related in related_list %}
hoi
<div>
<h4>{{ related.meta.title }}</h4>
<p>{{ related.meta.description }}</p>
</div>
{% endfor %}

Related

Var inside of object attribute [duplicate]

This question already has answers here:
How can I use a variable as index in django template?
(3 answers)
Closed 12 months ago.
i got these code
`{%for number in List %}
<div class="top">
<h3>
{{songs.history.0.Song}}
</h3>
<section>
<p>{{number}}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
</section>
<footer>
<small>
Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in Code
</small>
</footer>
</div>
i want that the number of the {{songs.history.0.Song}} change with the var of the loop but when i change it to {{songs.history.number.Song}} the element a dont appear
the thing is that i want that the number change automatic
Something like:
{% for song in songs.history %}
<div> Number: {{loop.index}} </div>
<div> Name: {{song.Song}} </div>
{% endfor %}

cflayout of type accordion in coldfusion 11

I am trying to use cflayout to create an accordion control on ColdFusion 11. Below is the code I am using:
<cflayout name="outerlayout" type="accordion" titlecollapse="true" width="150px">
<cflayoutarea name="area1" collapsible="true" title="acc1">
<h3>Area 1</h3>
<ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul>
</cflayoutarea>
<cflayoutarea name="area2" collapsible="true" title="acc2">
<h3>Area 2</h3>
<ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul>
<ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul>
<ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul>
</cflayoutarea>
</cflayout>
I have the following issues with the code:
1. It displays same height for each accordion irrespective of their content.
2. Unordered list doesn't get displayed as usual.
3. I want all the accordions to be initially collapsed. I am not able to accomplish it.
Note: I know it's not wise to use cflayout of the ColdFusion. But anyway I want to use it.
I finally decided to switch to jQuery solution as the cflayout solution of ColdFusion seems to be very buggy. This is how I achieved my requirements using jquery.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Collapse content</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({
active: false,
collapsible: true,
heightStyle: "content"
});
$("#accordion>h3>a").click(function(){
var loc = $(this).prop("href");
window.open(loc, '_blank');
})
});
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
</div>
<h3>Section 2</h3>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
</div>
<h3>Section 3</h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
</div>
</body>
</html>
To solve my first issue we need to set heightStyle option to "content". It ensures that the height of each accordion element is a according to content of its elements.
The jQuery accordion has no issues with unordered list.
Finally to make all the accordions collapsed initially, we just need to set active to false.
One more thing. I noted that jQuery accordion loads faster than the Coldfusion's one. Thanks Adam Cameron & Scott Stroz for pushing me to go for jQuery solution.
To answer your Issue #1:
The code for cflayout.js on ColdFusion 11 has the height for all accordion tabs hardcoded to 600. This results in either scrollbars or large blank spaces in each tab.
Edit the code at c:\ColdFusion11\cfusion\wwwroot\CFIDE\scripts\ajax\package\cflayout.js, and delete Line 430 which reads:
_85e.height=600;
You will need to flush the template and component caches after editing this code (in the Caching section of ColdFusion Administrator).

Django 1.6 - How to short the text displayed into a template?

How do I short an text in django? For example:
I have this text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
And I want to get:
Lorem ipsum dolor sit amet, consectetur adipisicing elit(more)
Where "(more)" is a link to show the entire text.
Can someone help me? Thank you very much in advance!
Have you tried the template tag truncatechars?
{{ value|truncatechars:[number to truncate chars after] }}
Check out how you'd handle the (more) part here:
If you actually wanted a link to persist and not just hover, you would probably want to use javascript to manipulate your DOM.
Make sure 15 (this is arbitrary) is greater than the number you're slicing by:
{% if value|length > 15 %}
{{ value|slice:"-6" }}(more)
{% else %}
{{ value }}
{% endif %}

Backbone Underscore error on template render: Uncaught TypeError: Object #<Object> has no method 'get'

At the console.log line in the render method below, it shows that this.member instance is exactly what it should be. So member object is good. I've spit out the string in tpl and it's what it should be. So what's causing the error in topic title?
Additional info: This view is a subview rendered by parent. I'm using Backbone.Subviews.
Thanks a lot for your help. I'm spinning my wheels :-/
Here is my code...
EDIT: Changed member object attrib references and now it works...
Template...
<div class="wrap-profile container">
<div class="profile-pic">
<div class="pic">
<img src="<%= pathUploads %><%= member.photo_profile %>" width="400" height="600" id="<%= member.id %>" class="photo-img">
</div>
</div>
<div class="profile-info">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur urna nec erat pretium tempus.
</div>
<div>
Morbi nec arcu at leo lobortis egestas. Phasellus sagittis neque dolor, ut congue lorem egestas id.m laoreet, vitae tristique lorem sollicitudin.
</div>
<div>
In vel libero eget enim rhoncus suscipit. Nunc tristique in nisi eget bibendum. Mauris et pulvinar orci.
</div>
<div>
Quisque eget sem id dolor tempus dictum. Pellentesque luctus scelerisque lacinia.
</div>
<div>
Sed gravida rutrum bibendum. Aenean condimentum eu dui nec adipiscing. Duis sagittis pharetra enim.
</div>
</div>
</div>
The view js...
// ProfileView.js
define( function(require) {
"use strict";
var $ = require('jquery'),
_ = require('underscore'),
Backbone = require('backbone'),
Helper = require('helper'),
tpl = require('text!templates/profilePicTemplate.html'),
template = _.template(tpl);
return Backbone.View.extend({
el: $("#profile"),
initialize: function(member) {
var self = this;
this.member = member;
},
render: function() {
var data = {
pathUploads: Helper.global.pathUploads,
member: this.member
};
console.log(this.member);
this.$el.html(template(data));
return this;
},
destroy: function() {
template = null
this.member = null;
}
});
});
The evidence points quite directly at this.member being a plain old javascript object instead of an instance of a Backbone.Model subclass. You seem to be aware of this, so I think it's a case of "no really, hear us now and believe us later". To test this theory, swap in this snippet.
var data = {
pathUploads: Helper.global.pathUploads,
member: new Backbone.Model(this.member)
};
If that fixes it, the theory holds.
(Aside...)
For what it's worth, making your template require a backbone model instance instead of plain data is probably inferior, so consider just having your template do <%= member.photo_profile %> instead so it doesn't care where the data comes from. This also makes it easier to use the presenter design pattern. You can use member.toJSON() in your view to get at the plain data attributes to pass in to the template.

Translating text blocks with Django .. what to do with the HTML?

The title might not be clear, but I don't know how else to put it..
In the Django documentation it's pretty clear how to mark a text block for translation .. Take this example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec quam sem, sodales in fringilla nec, lacinia a lorem.
Vivamus vel molestie ante.
So far so good. You just either use the trans or blocktrans tag.
But now consider this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec quam sem, sodales in fringilla nec, lacinia a lorem.
Vivamus vel molestie ante.
How should I deal with this ? Do I just wrap it in a block trans ?
Edit:
I think I've found out how it should be done ..
{% url some-view as some_view_url %}
{% blocktrans %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec quam sem, sodales in fringilla nec, lacinia a lorem.
Vivamus vel molestie ante.
{% endblocktrans %}
I would definitely use blocktrans. Sometimes its not possible to split i18n html text into different fragments. Blocktrans has some powerfull features:
{% url path.to.view arg arg2 as the_url %}
{% blocktrans with object.title as title and author|title as author_t %}
{{author}}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec quam sem, sodales in fringilla nec, lacinia a lorem.
{{title}} molestie ante.
{% endblocktrans %}
Have a look at:
url template tag
blocktrans template-tag