I am fairly new in Django and developing a book recommendation system using Django and PostgreSQL. I have my dataset with some field that also keeps corresponding book images URL (not the images itself) where images reside in other places, not in my static files or database. i want to access that images online and display them in my Django template here is how I tried to do but didn't work and doesn't access the image.
<img src= {{ book.image_url.url }} style="display:block;" width="100%" height="100%" alt="">
and also tried this:
<img src="{{ book.image_url.url }}" style="display:block;" width="100%" height="100%" alt="">
where book is dictionary and images_url is simply a url string for image residing somewhere in the web.
can you help me out how to access this string of url on the web and display it on django template ?
For urls, you want to use a different template tag. Try this:
<img src="{% url book.image_url.url %}" style="display:block;" width="100%" height="100%" alt="">
Related
I'm trying to pull the link from the database in the src part, but I couldn't.
im using django. images are in s3 storage. i append link to sqlite database in django. normally, {{project.ac}} is working. but <img src=> is not working.
JİNJA TEMPLATE
CODE
<figure class="glitch-filter-example">
<figcaption class="glitch-filter-example__heading">{{ project.ac }}</figcaption><br/><br/>
<img src={{ project.image }}>
<img src={{ project.image2 }}>
<p class="glitch-filter-example__filtered-text">HTML text</p>
</figure>
<script src="{% static 'icerik/js/script.js' %}"></script>
PAGE SOURCE
<figcaption class="glitch-filter-example__heading">MY TEXT</figcaption><br/><br/>
<img src=>
<img src=>
I've just started learning django and have a problem loading images using loops.
In models.py I created a class called Pictures
In views.py I created 3 instance of the class(Pictures) where img attribute is set to 3 different image names stored in the static folder.
Now, I got stuck in loading the images in the template using for loop. apart from img attribute, I also created other attributes. These are the name and image description both of type string and they load just fine when rendered in the template using for loop.
My question is what should I put in inside the img html tag to load these 3 different images using for loop?
Initially, I was using the syntax below to load images directly from the static folder.
<img src="{% static 'img/image-name.jpg' %}" alt="" width="250" height="250">
Now, I want to load the names from the img attribute and for each iteration, I want each of the three different images to load in the template each loop. Now I am not sure what to put inside the src="???".
what i have so far and its working:
{% for image in images %}
<li>
<img src="{{image.img}}" alt="" width="250" height="250">
<!-- I am not sure which line of code to include in src="" -->
</li>
{% endfor %}
also tried creating a variable like this:
{% static "img" as baseUrl %}
<img src="{{baseUrl}}/{{image.img}}"
put .url at image src
{% for image in images %}
<li>
<img src="{{image.img.url}}" alt="" width="250" height="250">
<!-- I am not sure which line of code to include in src="" -->
</li>
{% endfor %}
I would like to embed a pptx that is uploaded into a folder in OneDrive within a iframe tag in a Django template. I have the urls stored in a model and saved into the SQLite database. In this sense, in the views.py file, I have the following code:
context = {
'selectedunit': selectedunit,
'url_to_be_inserted': MyModel.objects.filter(unit=selectedunit)
}
return render(request, 'web.html', context)
The code for web.html is very easy:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container col-lg-8">
<div class="center">
<iframe class="center" src={{ url_to_be_inserted.url }} width="100%" height="300%" frameborder="0"/>
</div>
</div>
{% endblock %}
The result is the snapshot below:
While, I would like to embed the ppt into the web site. If I directly insert the URL, instead of using the context variable, it works. That is to say:
<iframe class="center" src="https://..." width="100%" height="300%" frameborder="0"/>
In this case, the result is as follows (ppt embedded into the Web site):
The reason why doing in this sense is because, depending on the selectedunit variable, I would like to address a different pptx with a different URL and I would like to dynamically change the pointer (as you see above by filtering the model).
How could I solve it?
Many thanks in advance
Currenlty,I have learn django from the http://www.lightbird.net/dbe/photo.html and I meet a problem!I want show the thumbnail image on the 'Thumbnail item' but it's just show the html code:
<a href="/photos/1414.jpg><img border="0" alt="" src="/photos/1414.jpg" height="40"/></a>
I have define the class Image method like below:
def thumbnail(self):
return """<a href="/%s><img border="0" alt="" src="/%s" height="40"/> """ % ((self.image.name,self.image.name))
The attribute of Class Image have define like that:
class Image(Models.Model):
#The rest of another code
image=models.ManyToManyField(upload_to="photos/")
#....another code ..
I have check my path have create a photos on my project 'myweb/photos/'
How can i let the page understand it's html code .
First, I have no idea why you're using a ManyToMany field for this use case. You need to be using an ImageField.
The field you define as an ImageField will have a url property, which is what you use to reference the relative path to the file.
Second, don't mix HTML and Python in your model class. Django has templating specifically for this use case:
from django.template.loader import render_to_string
class Image(models.Model):
image = models.ImageField(upload_to='photos')
alt = models.CharField(max_length=100)
def thumbnail(self):
return render_to_string('thumbnail.html', {'image': self})
# thumbnail.html
<img src="{{ image.image.url }}" alt="{{ image.alt }}" ... />
Keep in mind that artificially scaling a full-size image to 40x40 pixels to generate a thumbnail is horribly inefficient, and if there are lots of these, will absolutely crush performance.
As others have mentioned, you can use excellent libraries like django-easy-thumbnails or sorl-thumbnail to generate proper, scaled down, optimized versions of these images at whatever dimensions you need.
please follow the tutorial on djangoproject.com ..the code on your link is not a right way use django,close it and read official docs
Use the url attribute instead of the name attribute on the image:
def thumbnail(self):
return """<a href="/%s><img border="0" alt="" src="/%s" height="40"/> """ % ((self.image.url,self.image.url))
There is also the excellent tool sorl-thumbnail. It helps with dynamically generating thumbnails in your templates. Install it with pip install sorl-thumbnail. You can use it like this:
template.html
{% load thumbnail %}
{% thumbnail item.image "100x100" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
I'm currently attempting to embed a user-submitted YouTube link via a Django form within a Twitter Bootstrap layout.
The space for the video is appearing and the source code reflects the correct information and link, but neither the video nor the player appears. I'm also using the "flex-video" class from this link for a responsive layout http://poslavsky.com/blog/2012/04/01/responsive-video-in-twitter-bootstrap/ but it doesn't work when that class is changed to another name such as "video" either.
This is the code:
<div class="row">
<div class="span12">
<span>{{story.author}}</span><br>
<span>{{story.zip_code}}</span><br>
<span>{{story.date}}</span><br>
<p>{{story.copy}}</p>
<div class="image">
{% if story.pic %}
<img src="{{ story.pic.url }}" alt="some_image_alt_text" />
{% endif %}
</div>
<div class="flex-video">
{% if story.video %}
<p> <iframe width="460" height="250" src="{{ story.video}}" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</p>
{% endif %}
</div>
</div>
Any insight greatly appreciated.
I guess {{story.video}} gives Youtube video Url something similar to this http://youtube.com/watch?v=ASO_ypdnsQ which is direct youtube url, and not embed url.
Embed URL for same video is different than direct url, like this http://youtube.com/embed/....
I created a custom template tag, here is how.
import urlparse
...
#register.inclusion_tag('video_embed.html', takes_context=True)
def youtube_embed(context, url):
url_data = urlparse.urlparse(url)
query = urlparse.parse_qs(url_data.query)
video_id = query["v"][0]
context['embed_url'] = ('http://youtube.com/embed/%s' % video_id)
return context
Then, in templates just load the tag, and pass the youtube url. It will give embed url from normal url.