I'm new with django and i'm trying to create project, but i got a problem with displaying images. I have a html table with checkboxes and after selecting an object i wish to display image on next page but i can only get broken image.
i can display image this way :
<img src="{{ MEDIA_URL }}bird.png" class="img-responsive" style="width: 60px; height:80px; margin:auto;" />
but then obviously this image will be shown in every object.
but in this way what i use in index page it wont find any images:
<img src="{{ tags.tag_image.url }}" class="img-responsive" style="width: 60px; height:80px; margin:auto;" />
this is my views.py
def selected(request):
tags = request.GET.getlist('selected')
return render(request, 'tag/selected.html', {'all_tags':tags})
if i use:
def selected(request):
tags = request.GET.getlist('selected')
all_tags = Tags.objects.all
return render(request, 'tag/selected.html', {'tags':tags, 'all_tags':all_tags})
then it will find the images but then it will also show all the images even if i select only one.
this has been my problem for awhile now so please if anyone could help me i would really appreciate that
I'll try to interpret your question correctly! but tell me if I'm wrong:
Your Tags model looks something like this:
class Tags(models.Model):
tag_image = models.ImageField(upload_to='/somewhere')
...
If you want to get only the selected few, in your view you'll do something like this:
def selected(request):
tag_ids = request.GET.getlist('selected')
selected_tags = Tags.objects.filter(id__in=tag_ids)
return render(request, 'tag/selected.html', {'tags': selected_tags})
and then, in your template, you want something like this:
{% for tag in tags %}
<!-- tag is a single tag in this context -->
<img src="{{ tag.tag_image.url }}" class="img-responsive" style="width: 60px; height:80px; margin:auto;" />
{% endfor %}
Hope it helps to clarify how Django works...
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
I have a little issue, that I'm not able to decide myself.
I'm using Django and trying to add this Python code:
{{ question.question_logo }}
that means "1", into HTML element this way:
<img id = image src ="{% static "polls/images/question_logos/{{ question.question_logo }}.jpg"%}/>
To check myself i tried:
<img id=i mage src="{% static " polls/images/question_logos/1.jpg " %}"/>
<h1>{{ question.question_logo }}</h1>
It works perfectly
I need to let HTML know somehow, that
{{ question.question_logo }}
is not a raw part of a link
Thank's for your time
Do this instead
<img id="image" src ="{% static "polls/images/question_logos/" %}{{ question.question_logo }}.jpg"/>
You need to put quotes around the id attribute as well.
This should work perfectly.
<img id ="image" src ="{% static "polls/images/question_logos/{{ question.question_logo }}.jpg" %}"/>
I've been stuck with the following problem for a while, and i can't seem to get it to work on this Python flask web application i've been developing:
1) my flask view -> obtains image data from a local database and passes the data via a generator to a template
My flask route/view code:
#app.route(#app.route('/viewer',methods=['GET'])
def viewer():
archive = request.args.get('filepath')
arc = rarTools()
pagetotal = arc.pageTotal(archive)
def g():
for n in range(pagetotal):
data = arc.getPageb64(archive,n+1)
print(n+1)
yield data
return Response(stream_template('viewer.html',data=g()))
2) My HTML template with JQuery Mobile UI obtains this data and simply displays all the image data on 1 page
My HTML viewer.html with JQuery mobile UI:
<body style="background-color: black">
<div data-role="page" class="page" id="mainpage" data-theme="b">
<div data-role="main" class="ui-content">
<div id="frame" align="middle" style="width: 100%">
{% for page in data %}
<img id="page_img" src="data:image/png;base64,{{ page }}" width="80px" height="auto"/>
{% endfor %}
</div>
</div>
</div>
</body>
My HTML viewer.html WITHOUT JQuery mobile UI:
<body style="background-color: black">
<div id="frame" align="middle" style="width: 100%">
{% for page in data %}
<img id="page_img" src="data:image/png;base64,{{ page }}" width="80px" height="auto"/>
{% endfor %}
</div>
</body>
My problem is how long it takes to load pages when there are many images in my database. The load time is vastly different when I use JQuery Mobile and when I don't:
Because i'm using a generator to pass the data to the template, the images are loaded dynamically with the page loading immediately and each page appearing as the image data is generated on the flask back-end when I don't use JQuery Mobile to style the page.
When I use JQuery Mobile on the other hand, the page only loads once all the image data is passed even though i'm using a generator.
How can I get my JQuery Mobile template page to refresh after every yield, so that
The page loads immediately irrespective of image count?
The pages refreshes after each new image data "yield" so the the images are loaded dynamically? - like it works when I don't use JQuery Mobile?
I am aware that it has something to do with the - either: 'pageinit' or 'pageload' events with Jquery Mobile, but for the life of me, i can't seem to get the above code to work!!
Any assistance would be much appreciated, thanks in advance!
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>
I have created app using django which searches the keywords entered by the user in 10 xml documents and maintains the frequency count of those words for each file. The results are returned to the user in the form of expandable hyperlinked list of filenames and the charts. My html code:
<html>
<style type="text/css">
h1 {
position: absolute;
top: 5px;
left: 200px;
}
form #Edit1 {
position: absolute;
top: 37px;
left: 410px;
}
form #Edit2 {
position: absolute;
top: 37px;
left: 840px;
}
</style>
<font size="4" face="arial" color="#0000FF">
<h1>XML Search</h1>
</font>
<br/>
<br/>
<Form Action ="/search/" Method ="POST">
<div id="Edit1">
<INPUT TYPE = 'VARCHAR' name ='word' VALUE ="" size = "50">
</div>
<div id="Edit2">
<INPUT TYPE = "Submit" VALUE = "Search">
</div>
<br/>
<hr/>
{% csrf_token %}
</FORM>
{% if list1 %}
<input type="text" name="word" value="{{ word }}" />
<ul>
{% for l in list1 %}
<li>{{l.file_name}}, {{l.frequency_count}}</li>
{% endfor %}
</ul>
<br/>
# -- charts to be employed -- #
{% endif %}
</html>
this html page is redirected from views.py file. Now, I want to write the code for charts using matplotlib in this html code. As the code to create charts using the mentioned library is written in python, so how can I write this python code in the above html file or if there is any other way out, so please tell?
Note:
I have made use of google charts and that are working perfectly fine but I want to make this app internet independent, so please do not suggest me google charts.
Please Help , I'm new to charts and django.
The matplotlib cookbook has an entry on using matplotlib with django.
It boils down to the following:
In urls.py you add an entry for a png with a link to a new view.
In your new view you create a HttpResponse with content_type image/png
Using matplotlib you write a figure as png to the aforementioned HttpResponse
A straight copy/paste from the cookbook should get you going.
Perhaps you can break the problem into bite size pieces to avoid learning three things at once:
Add a static .png to your page
Add a dynamic .png to your page via urls.py and a new view
Create a figure in Matplotlib (offline)
Put the matplotlib figure from step 3 into the dynamic image from step 2