I am creating pages that display slides from a slideshow (which are stored as images called slide001.png, slide002.png, etc.) along with transcripts of the voiceover. The templates look like this:
<div class="transcript">
<p>Hello, and welcome to the first slide.</p>
<p>This is the second slide.</p>
<p>/...and so on...</p>
</div>
I want this translated into:
<div class="transcript">
<div class="slide">
<img src="slide001.png"/>
<p>Hello, and welcome to the first slide.</p>
</div>
...and so on for each slide...
</div>
i.e., each paragraph is wrapped in a div, and an img element is inserted with a consecutively-numbered image reference. I'm doing this with JavaScript right now, but since I'm using Jinja2 to do other things (insert consistent headers and footers, creating forward/back links, etc.), I was hoping I could do the wrap-and-enumerate in Jinja2 as well. Is it possible without heroic hackery?
If you can get the data into the following format in your page then it can be rendered quite nicely.
transcript = [{'image': 'filepath', 'text':'welcome...'},
{'image': 'filepath2', 'text':'slide2'},
{'image': 'filepath3', 'text':'slide3'}]
The Jinja can placed inline or moved to a macro but this will do the trick either way:
<div class="transcript">
{% for slide in transcript %}
<div class="slide">
<img src="{{ slide.image }}"/>
<p>{{ slide.text }}</p>
</div>
{% endfor %}
</div>
Related
I'm trying to pass list values (from 'ci' list below) into my wepage using python. The list values contain URLs for images which will go in the HTML <img src {{ listname[1] }} tag (see HTML below for more info). However, when I try the below code and render the template on my local server the img does not appear and when I inspect element the img src tag is empty.
My code is below:
Python
#app.route('/route', methods=['GET', 'POST'])
def _get_gallery():
df=pd.read_csv('C:\\username\\foldername\\excelfile.csv')
images=list(df["image"].values)
clean_images=[]
for image in images:
if "https" in str(image):
clean_images.append(image)
ci=pd.DataFrame(clean_images)
return render_template('template.html', ci=ci)
if __name__ == '__main__':
app.run(debug=True)
The HTML template has the following code to try and pull through the list values:
<div class="row">
<div class="col">
<a href="{{ ci[1] }}">
<img class="img" src="{{ ci[1] }}" alt="">
</a>
</div>
I think you don't need to convert the list to pandas DataFrame, try to comment this line and see if its work
How to keep the original text formatting (e.g. new lines, bold text) in TextField django admin.
For example, I want to place text on two lines. But in html code I see only one line "Line1 Line2"
I found solution --- usage of html tags, but it's not suitable for me.
How to keep the original text formatting without html tags in django?
Any design advises?
UPD 1
I added "< pre >" tag, and how can I remove scroll at the end?
mycode.html
{% block content %}
<div class="container" style="margin-top: 20px">
<div class="row">
<div class="col-md-8">
<h1>{{vacancy}}</h1>
<h2>{{vacancy.salary}}</h2>
<h3>{{vacancy.company_key.name}}</h3>
<p>{{vacancy.city}}</p>
<p><pre>{{vacancy.text| safe}}</pre></p>
</div>
</div>
</div>
{% endblock %}
I have a list of items. So do make it simple let's say my list is
[id, title, picturePath]
I'm trying to achieve flashing out a Bootstrap Card Deck using from Flask import Markup.
Here's my code to flash the card out.
payload = Markup(f"<div class='card'>
<div class='card-body'>
<img src='{item[2]}' class='card-img-top'>
<h5 class='card-title'>{item[1]}</h5>
<p class='card-text'>asd</p>
</div>
</div>")
flash(payload)
And here's my code in the HTML page using Jinja2
<div class="container">
<div class="card-deck">
<div class="flashes">
{% for message in get_flashed_messages()%}
{{ message|safe }}
{% endfor %}
</div>
</div>
</div>
And... This is the result I get:
However, My expected Results is:
And that expected result is done by just putting in the html elements in the html code. It suppose to be in a 3x3 grid.
It seems as if flashing out these things using Markup causes it to loose its html class or i guess the ... formating? Not sure. But Does anyone have any idea?
Basically I have a django template from which I show data about a document and I want a link to download the file. I tried something like this but it is not working:
<div class="metadata-container">
<div class="metadata-title">
<div>Version</div>
<div>Author</div>
<div>File</div>
</div>
<div class="metadata-content">
<div>{{ document.version }}</div>
<div>{{ document.author }}</div>
<a href=document.file download><div>{{ document.file }}</div>
</div>
</div>
The filename in format '/documents/2017/filename.txt' is in document.file variable or however it's called. How can I use it in the ? or how can I make it work?
You should write a method inside your Document model a method which should return the correct link to the file.
Similar to:
def get_document_url(self):
if self.file:
return '/documents/2017/ + self.file.name + ".txt"
And then inside html you can get it with:
<a href={{document.get_document_url}}>Link</a>
This question already has an answer here:
Reference template variable within Jinja expression
(1 answer)
Closed 6 years ago.
I'm making a simple music app.
I want to allow users upload their audio files and I have a page where I'm planning to show all songs.
I've created a template, and the structure looks like:
{% for song in songs %}
<div class="chart-item">
<div class="chart-position col-md-1">
<h3>#u</h3>
</div> <!-- chart-position -->
<div class="band-logo col-md-2">
<img src="{{ url_for('static', filename='uploads/users/{{ song['artistName'] }}/{{ song['pathToCover'] }}')}}">
</div> <!-- band-logo -->
<div class="band-name-and-autio col-md-9">
<div class="band-name">{{ song['artistName'] }} - {{ song['songName'] }}</div> <!-- band-name -->
<div class="audio">
<audio>
</audio>
</div> <!-- audio -->
</div> <!-- band-name-and-autio -->
<div class="clearfix"></div>
</div> <!-- chart-item -->
{% endfor %}
Here I want to make a dynamical path to cover image and a record, but I do not know to correctly write the path to the file here:
<img src="{{ url_for('static', filename='uploads/users/{{ song['artistName'] }}/{{ song['pathToCover'] }}')}}">
Please, explain how to do it. I've tried to find the solution on flask web page, but for now I have no any result.
I don't believe you can nest template tags like that. But you also shouldn't need to.
<img src="{{ url_for('static', filename='uploads/users/') }}{{ song['artistName'] }}/{{ song['pathToCover'] }}">
You can see why this works from the following example:
>>> from flask import Flask, url_for
>>> app = Flask(__name__)
>>> with app.test_request_context():
... print url_for('static', filename='uploads/users/')
/static/uploads/users/
So then you just need to add the artistName, /, pathToCover
I think you can do
<img src="{{ url_for('static', filename='uploads/users/'+ song['artistName']+'/'+ song['pathToCover'])}}">
It works for me :)