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 %}
Related
I am trying to get all of the slides in my orbit slider to be the height of the largest slide.
Here is my markup:
$(document).ready(function(){
$('.orbit-container').equalize('outerHeight');
});
<div class="orbit" data-orbit="" role="region" data-auto-play="false" data-resize="7sdsk0-orbit" id="7sdsk0-orbit" data-t="3k1v70-t"><button class="orbit-previous" tabindex="0"><span class="show-for-sr">Previous Slide</span>◀︎</button><button class="orbit-next" tabindex="0"><span class="show-for-sr">Next Slide</span>▶︎</button><div class="orbit-wrapper">
<ul class="orbit-container" data-options="bullets: true; autoPlay:false;" data-auto-play="false" data-equalizer="" data-equalize-on-stack="true" data-equalize-by-row="true" data-resize="lo2q16-eq" data-mutate="k2tsn5-eq" data-t="fgxh6n-t" tabindex="0" style="height: 0px;" data-events="mutate">
<li data-equalizer-watch class="orbit-slide" data-slide="0">
<div>
<div class="text-container">
<h1>Arthritis. Give Before it takes.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisi elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud</p>
Learn More
</div>
<div class="inner-overlay"> </div>
<img alt="" class="orbit-image desktop" src="/AS/media/AS/Homepage%20Billboards/billboard-tweaked.jpg?ext=.jpg">
<img alt="" class="orbit-image mobile" src="/AS/media/AS/Homepage%20Billboards/mobile-cropped.jpg?ext=.jpg">
</div>
</li>
<li data-equalizer-watch class="orbit-slide is-active" data-slide="1" aria-live="polite">
<div>
<div class="text-container">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisi elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, nostrud</p>
Learn More
</div>
<div class="inner-overlay"> </div>
<img alt="" class="orbit-image desktop" src="/AS/media/AS/Homepage%20Billboards/billboard-tweaked.jpg?ext=.jpg">
<img alt="" class="orbit-image mobile" src="/AS/media/AS/Test%20Images/rough-mobile.jpg?ext=.jpg">
</div>
</li>
</ul>
</div>
On each li, an inline style is being applied of height="auto", so the slides are different heights. Even if I call that function after the window has loaded, it has the same effect.
Am I missing something?
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 %}
With the Flex Grid of Foundation 6, I'm trying to centrally align a child of a parent ele that has been centrally aligned with Foundation's 'align-center' class.
The parent .row uses Flex Box to align (justify) the content of its children. How do I apply central alignment to the ele on line 4, using the Framework?
Notes:
The 'align-self-center' on line 4 has no effect.
In-line styling used for sample/readability only.
Applying 'margin:auto' to line 4 resolves the issue, however would not in the case of using an img.
<section class="row expanded align-middle align-center" style="height: 100%;">
<div class="columns small-7 medium-4">
<h3 class="text-center">lakakakaka</h3>
<div class="align-self-center" style="height: 20px; width: 20px; background: pink;"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
In the case of using an img, applying a wrapper as a column and setting margin: auto also achieves the desired effect, but surely theres a better way to do this?
<section class="row expanded align-middle align-center" style="height: 100%;">
<div class="columns small-7 medium-4">
<h3 class="text-center">lakakakaka</h3>
<div class="row columns small-6" style="margin:auto">
<img src="..." alt="..." style="width: 100%;" />
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>
By default, .row is a flex parent so .columns are flex children. To make a .column a flex parent so that it's children can be aligned, you need some CSS like
.align-middle {
display: flex;
align-items: center;
justify-content: center;
}
We wrote a lesson on this recently that will help https://zurb.createsend.com/campaigns/reports/viewCampaign.aspx?d=y&c=E5D5A5C6700B86DC&ID=3053EAAD5186C206&temp=False&tx=0
I've been using Foundation 5 for about a month, but I'm having trouble placing three images side by side without spaces. Any ideas please?
Here's the code prior to adding Foundation 5:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
margin: 0;
border: 0;
padding: 0;
}
.left {
float:left;
width: 15%;
}
.center {
float: left;
background:white;
width: 70%;
}
.main {
float:left;
width:70%;
}
aside {
float:left;
width:30%;
}
.right {
float: left;
width: 15%;
}
</style>
</head>
<body>
<div class="left"><img src="_images/topo_l.jpg" alt="topo map" /></div>
<div class="center">
<div class="header">
<h1>Header H1</h1>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. </p>
</div>
<aside>
<ul>
<li>Aside li items here</li>
<li>Aside li items here</li>
<li>Aside li items here</li>
<li>Aside li items here</li>
<li>Aside li items here</li>
<li>Aside li items here</li>
</ul>
</aside>
</div>
<div class="right"><img src="_images/topo_r.jpg" alt="topo map" /></div>
</body>
</html>
It looks okay at this point, but after I include Foundation (foundation.css, etc.) the code breaks.
I believe you're looking for Foundation's Block Grid feature.
http://foundation.zurb.com/docs/components/block_grid.html
You could also use the regular grid, and in the class="row", modify to something like class="row small-collapse". Example below.
<!-- BEGIN BLOCK GRID EXAMPLE -->
<div class="row">
<ul class="small-block-grid-3">
<li style="background-color:blue;height:100px;"></li>
<li style="background-color:red;height:100px;"></li>
<li style="background-color:green;height:100px;"></li>
</ul>
</div>
<!-- END BLOCK GRID EXAMPLE -->
<!-- BEGIN REGULAR GRID EXAMPLE -->
<div class="row small-collapse">
<div class="small-4 columns" style="background-color:blue;height:100px;"></div>
<div class="small-4 columns" style="background-color:red;height:100px;"></div>
<div class="small-4 columns" style="background-color:green;height:100px;"></div>
</div>
<!-- END REGULAR GRID EXAMPLE -->
The block grid uses ul and li tags, while the regular grid uses the traditional row and columns classes inside div.
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 %}