I'm having some trouble with getting Flask to serve images I downloaded.
Python:
r = requests.get(image_url)
with open(f"static/image{i}.jpg", "wb") as f:
f.write(r.content)
# Add the image to the list of images
images.append(f"image{i}.jpg")
return render_template('story.html', paragraphs=paragraphs, images=images)
Html:
<body>
<h1>Story</h1>
{% for paragraph in paragraphs %}
<p>{{ paragraph }}</p>
<img src="{{url_for('static', filename=images[i] }}">
{% endfor %}
Resulting page source code:
<h1>Story</h1>
<p>Once upon a time there was a young girl named Maria who was in a long distance relationship with her boyfriend, John. John lived in a different city and they could only see each other once every few months.</p>
<img src="/static/">
<p></p>
<img src="/static/">
<p>Whenever they met, they would talk and laugh and enjoy each other's company, but Maria couldn't help but feel like something was missing. She was feeling lonely and unsure about the future of their relationship.</p>
<img src="/static/">
<p></p>
<img src="/static/">
Not sure what I'm doing wrong.
The images array isn't empty, it prints all the image filenames. Also a bit weird that under each paragraph there are two images.
{% for paragraph in paragraphs %}
<p>{{ paragraph }}</p>
<img src="{{url_for('static', filename=images[loop.index]) }}">
{% endfor %}
This was the solution.
Related
I am trying to show few images on my website, I've collected the sources of all of them in a list. In html file I've created a loop to iterate through each of them.
HTML body :
<body>
<div class="content">
{% for output in outputs %}
<h1> {{ output }} </h1>
<img src="{% static '{{output}}' %}" alt="Mountains" style="width:100%">
<img src="{% static 'images/1.jpg' %}" alt="Mountains" style="width:100%">
{% endfor %}
</div>
</body>
So, the thing is - I am able to show image "1.jpg" from "images" directory (so the problem is not due to static files). I've also checked that "output" has the right content. This is the output of my code :
enter image description here
And this is directory where I store my images :
enter image description here
please, let me know if you have any idea what should i do next. Any advise will be helpful.
That's what worked for me, thanks to Abdul Aziz Barkat!
"Use {% static output %} not {% static '{{output}}' %} if you inspect the html you would see something like src="/static/{{output}}" for what you wrote.."
I'm attempting to create an expanding list displaying elements of a model that I have in django, but I'm having trouble getting the bootstrap 5 collapse function to work with the data from django. I'm relatively new to both, getting back into coding after an extended break. The code works if I replace id="{{saga.name}} with id="placeholder" and href="#{{ saga.name }}" with href="#placeholder", but refuses to do anything with the code as is.
Is there something going on with how bootstrap 5 interprets the data? I feel like I'm going crazy here.
{% for saga in sagaMemberList %}
{{ saga.name }}
<a class="btn btn-primary" data-toggle="collapse" href="#{{ saga.name }}" role="button" aria-expanded="false" aria-controls="collapse{{ saga.name }}">dropdown</a>
<div class="collapse" id="{{ saga.name }}">
{% for character in mSagaCharacterList|get_item:saga %}
<div class="row"><div class="col">
{{ character.name }}
</div></div>
{% endfor %}
</div>
<br>
{% endfor %}
I'm know it's not the prettiest code and I'm sure it's inefficient as hell, but I'm really struggling to understand why it's not working. Thanks for any insight any of you might have.
After puzzling with it for forever I figured out the answer right after I posted the question, which in hindsight should be obvious. Posting here in case anyone else stumbles across this.
html ids cannot contain whitespace, and the saga.name I was using contained whitespace. Still not sure why {{forloop.counter}} didn't work, but I got around it by adding a method to my model that returned the name in an accepted way.
I have been working on a project with Django on the back-end and amp on the front-end; although I am having some troubles to link both tags like the lightbox one.
I would like to get a list of first images on my product page (I have done it) and by clicking on an image it displays me the other images of that object on a lightbox without going to the detail template.
The whole project is updated on GitHub at:
https://github.com/lucasrf27/dealership
That is the amp code that I am trying to. I am trying this one on test.amp.html besides put on my category. (product template)
<body>
<h1>lucas</h1>
<div>
{% for v in veiculos %}
<h1>{{v.modelo}}</h1>
<amp-img lightbox="cars" src="{{ v.first_image.imagem.url }}" width="" height="" layout="fill" alt="{{v.modelo}}">
<amp-carousel lightbox="cars" width="350" height="350" type="slides">
<div>
{% for v in veiculos %}
<h1>{{v.modelo}}</h1>
<amp-img lightbox="cars" src="{{ v.first_image.imagem.url }}" width="300" height="400" alt="{{v.modelo}}">
<amp-carousel lightbox="cars" width="350" height="350" type="slides">
{% for p in veiculos.images.all %}
<amp-img lightbox="cars" src="{{p.imagem.url}}" width="" height="" layout="fill" alt="{{v.modelo}}"></amp-img>
{% endfor %}
</amp-carousel>
</amp-img>
{% endfor %}
</div>
</amp-carousel>
</amp-img>
{% endfor %}
</div>
<!-- These will belong to a different lightbox gallery -->
<div>
<amp-img lightbox="another" src="image3.jpg" width="400" height="300" layout="responsive"></amp-img>
<amp-img lightbox="another" src="image4.jpg" width="400" height="300" layout="responsive"></amp-img>
</div>
When I open the images from the lightbox on a new URL,
I get this one:
http://127.0.0.1:8000/veicles/image3.jpg (404)
However the image is in this one:
http://127.0.0.1:8000/media/veiculos_imagens/bugat-logo-whatsapp-fundo-transparente3.png
Is there some sort of media_prefix or something like that?
i've got the results in a silly way. besides setting on my views or my template a set up a object in function like i did in first_image but for the second and the other 2
it got like:
template
<body>
<h1>lucas</h1>
{% for v in veiculos %}
<amp-carousel lightbox width="1600" height="900" layout="responsive" type="slides">
<amp-img src="{{v.first_image.imagem.url}}" width="200" height="100"></amp-img>
<amp-img src="{{v.second_image.imagem.url}}" width="200" height="100"></amp-img>
</amp-carousel>
{% endfor %}
models:
def first_image(self):
return self.images.first()
def second_image(self):
return self.images.all()[1]
if anyone in the future is not understanding the project try to access:
https://github.com/lucasrf27/dealership
Gooday to all. I have been googling about some solutions on how to do this. I would like to print newlines from my database to html (like php's nl2br) So, I have stumbled on a post that says use <pre></pre> but it encapsulates the paragraph on a table like container
It would not be any problem on a desktop but on mobile, you are gonna have to scroll side to side to see the contents, is there any way to print out something like this? (just the newlines without the pesky container like thing )
if I just call it directly using
{{article.notes | safe }}
It does not print newline. It just goes on like
1.Thisisacontentblablabla2.foobarbarbarbar3.loremipsumilovetoeatnoodles4.test
here is the code on html
{% extends 'layout.html' %}
{% block body %}
<center>
<h1>{{article.topic_name | safe }}</h1>
<input type="submit" value="Edit" class="btn btn-danger">
</center>
<div>
<h2> Procedures: </h2>
<pre>
<p align="left"> {{article.explaination | safe }} </p>
</pre>
</div>
<div>
<h2> User Notes: </h2>
<pre>
<p align="left"> {{article.notes | safe }} </p>
</pre>
</div>
<div>
<h2> Commands: </h2>
<pre>
<p align="left"> {{article.commands | safe }} </p>
</pre>
</div>
{% endblock %}
Thankyou So Much in advance :)
I found solution to this problem which caused another problem but thats another topic for another day :)
{{something | safe}}
Just pipe it in the safe tag and it will execute the
I still have not found the solution about Xss on this. since it executes the tags. it also executes malicious javascript tags. Ill ask a new question on this
I wanted to print barcodes using for loop in python. This is my code:
`{%- from "templates/print_formats/standard_macros.html" import add_header -%}
<hr>
{% set a = doc.end %}
{% set count = 0 %}
<div class="row">
{%- for i in range(doc.start,doc.end) -%}
<div class="col-md-4 text-center">
<p style="font-family: Code39AzaleaFont;font-weight: normal;font-style: normal;font-size:30px;">
00000000000000{{ i }}</p>
{% set count = count + 1 %}
{{count}}
<br/>
</div>
{%- endfor -%}
</div>
<hr>
<br>
<p class="strong">
<br>
<br>
<br>
{{ _("Authorized Signatory") }}
</p>
</div>`
The problem is,I wanted to restrict the number of barcodes printed on one sheet of paper to 24.Is there any way to do that?
You can add a page break after every 24th barcode using:
{% if count % 24 %}<div style="page-break-before: always;"></div>{% endif %}
HTML doesn't have a really good concept of "paper sheet size". A HTML page has an infinite height and browser's are notoriously bad a printing HTML in a readable way (with the notable exception of Opera).
With CSS 3, three page break properties were defined.
They might be supported by your browser. If they are, then wrap 24 bar codes in a <div> and give that <div> a class which tells the browser to break the page afterwards.
If the browser emits an empty page at the end, then you need two classes: One for the first <div> without a page break and one for every successive <div> and a page-break-before: always;
If that doesn't work well, you should look at PDF. PDF allows you place elements exactly on pages with a known, fixed size.