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.."
Related
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.
i am trying to display pdf documents on the browser but its not displaying on chrome, instead its downloading, but on other browsers like IE it's working just fine
{% block content_display %}
<embed type="application/PDF" src="{{bk.upload_content.url}}" width="100%" height="650"/>
{% end block %}
try to use this
{% block content_display %}
<iframe src="{{bk.upload_content.url}}" width="100%" height="650"/>
{% end block %}
if it does not work then try this after clear your cache.
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
I cant get django-easy-maps to work. It has "geocoding error" error and I am not sure why and how to solve this.
based on this:
https://github.com/bashu/django-easy-maps
I first ran this:
pip install django-easy-maps
settings.py
INSTALLED_APPS = (
...
'easy_maps',
)
EASY_MAPS_GOOGLE_MAPS_API_KEY = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ___0123456789' (not this is not my key but i just put it as example'
in my template for the html
{% extends 'employee/base.html' %}
{% load bootstrap3 %}
{% block page %}
<div class="col-lg-12">
<div class="panel">
<div class="panel-heading bg-blue">
<h4 class="panel-title text-center text-white">
My Map
</h4>
</div>
<div class="panel-body">
{% load easy_maps_tags %}
{% easy_map "Russia, Ekaterinburg, Mira 32" 300 400 %}
</div>
</div>
</div>
{% endblock %}
I run
python manage.py makemigrations
python manage.py migrate
But it doesnt show any map in the page. It has this
It has this "geocoding error" in the html generated file.
<!-- HTML map container -->
<div id="map-canvas-1"
class="easy-map-googlemap">
<!-- geocoding error -->
</div>
What is the problem and what is the right way to setup easy-maps on django ?
I have the same problem with my configuration. I have noticed that the address seems to be case sensitive to a parameter I don't understand
An address can work if all the string is in lower case but the same address with one char to uppercase and it doesn't work anymore.
And this doesn't mean that the address needs to be in lowercase.
For example in my case :
That address works: 28 rue bardin, 92110 clichy
but this one not :
28 rue bardin, 92110 Clichy
and in others situations, it's inverted some uppercase are needed for the address to work properly
This is my first question ever on SO and I'm happy to take any tips on improving. Be gentle :)
To increase maintainability, I am trying to keep CSS, JS and HTML all together in the same file. This becomes difficult with include files, or macros, etc. The final output template.render() should grab all that CSS and JS, and place it at the top and bottom of the base HTML template.
Example should explain what I mean:
base.html
<html>
<head>
<style>
{{ print_css() }}
</style>
</head>
<body>
{% include 'bolded_text.html' %}
<script>
{{ print_js() }}
</script>
</body>
</html>
bolded_text.html
{# this doesn't need to be a filter. It could be a block, or anything else that would make this work #}
{% filter add_css %}
strong {
background: #ccc;
}
{% endfilter %}
<strong>Bolded text</strong>
{% filter add_js %}
alert('javascript included!');
{% endfilter %}
Output would of course be:
<html>
<head>
<style>
strong {
background: #ccc;
}
</style>
</head>
<body>
{% include 'bolded_text.html' %}
<script>
alert('javascript included!')
</script>
</body>
</html>
Predictably, the problem is that print_css() outputs nothing.
I tried doing this with context filters, where add_js and add_css append to a variable in the context, and then print_css and print_js output that variable. This works nicely and simply for JavaScript, since the print statement follows all the filters.
However, I can't think of a way to make it work with CSS. If I could make the print_css() call lazy, or swap in the output in the jinja2 AST somehow, that might work. I'm trying to avoid hacky string manipulation (such as outputting the CSS at the bottom and then using regexes to move it to the top).
I figured there might be a way to do this elegantly and my experience with jinja2's low-level API is limited.
Any help is much appreciated, thanks!
Macros will do that, but I don't see the point why you wouldn't use StyleSheets, this enables the browser a way better caching and it's also easier to maintain.
EDIT:
Example:
{% macro generate_css(strong_bg='#ccc', additional_options=None) -%}
strong {
background: {{ strong_bg }};
}
{%- endmacro %}
<head>
<style>
{{ generate_css() }}
</style>
</head>