I've posted something similar earlier without being able to find a suitable solution. One of the things I am struggling with is the ability to serve static path / file references within DJANGO html templates. Hopefully, by posting another question I will be able to understand how this works. Done quite some research and read through the DJANGO documentation without being able to find something covering my scenario.
Here we go:
Within my model I use a path reference field
class Product_images(models.Model):
product = models.ForeignKey(Products, on_delete=models.SET_NULL, blank=True, null=True)
path_to_image = models.CharField(max_length=150,null=True, blank=True)
name = models.CharField(max_length=50,unique=False,blank=True)
class Meta:
verbose_name = 'Product Image'
verbose_name_plural = 'Product Images'
def __str__(self):
return '{} - {} - {}'.format(self.pk, self.product, self.name)
The value of this field is set to (example):
static\images\Product\PowerBI\Receivables\Receivables 6.png
The files are physically stored within the app Main/static/....
My setting file contains:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
MEDIA_ROOT = os.path.join(BASE_DIR, 'Main/')
MEDIA_URL = '/Main/'
Then I have two templates within the app where I want to serve these images. One page uses a custom context processor in the following way:
{{ product_section }}
Which returns html including:
html_value += u'<img class="d-block w-100" src="{}" width="400px" height="250x" alt="{}">'.format(productimages_obj.path_to_image,productimages_obj.name)
This context processor tag is used within a template returned by the products_view view function.
Now, I want to use the same images within another view gallery_view:
def gallery_view(request, requestid, *arg, **kwargs):
productimages = Product_images.objects.filter(product=requestid)
if productimages.exists() != True:
return HttpResponseNotFound('<h1>Page not found</h1>')
context = {
'productimages': productimages
}
return render(request, "gallery.html", context)
When using the following template tag {{ productimages.path_to_image }} I am getting 404 "GET /Gallery/static/images/Product/PowerBI/Finance/Finance%207.png HTTP/1.1" 404 3485.
The template is coded as following:
<section id="gallery" class="bg-light">
<div class="container-fluid">
<div class="row">
{% for productimages in productimages %}
<div class="col-md">
<img src="{{ productimages.path_to_image }}" onclick="openModal();currentSlide({{ forloop.counter }})" class="hover-shadow">
</div>
{% endfor %}
</div>
</div>
Last but not least Urls.py:
urlpatterns = [
path('', views.home_view, name='home'),
path('Home', views.home_view, name='home'),
path('PowerBI', views.products_view, name='power bi'),
path('Services', views.services_view, name='services'),
path('About', views.about_view, name='about'),
path('Contact', views.contact_view, name='contact'),
path('Gallery/<int:requestid>', views.gallery_view, name='gallery'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
What mistake am I making here? Why does the GET include /Gallery/ within the URL? How do I circumvent this?
Thanks everyone.
I would set an image field and in the templates I would use its URL property:
models.py:
image = models.ImageField(null=True, blank=True)
.html file:
<img src="{{object.image.url}}" alt="" class="img-fluid">
Related
I was getting tired of figuring out how to fix this problem. I checked a lot of different posts and answers but nothing helped me.
I have a form where I'm creating new advert. I have file input there for Image.
Form is valid and everything works fine, but my problem is that when I want to display my image from Advert model then it's not showing on website.. even the alt text.
My template code:
{% for advert in adverts %}
<img src="{{ advert.get_image }}" alt="test"/>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="mb-4 card">
<div id="second-advert" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{ advert.get_image }}" alt="test"/>
</div>
</div>
My urls.py:
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('carapp.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
My settings.py:
STATIC_URL = 'carsearch/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
My models.py:
class Advert(models.Model):
def get_image(self):
if self.featured_image and hasattr(self.featured_image, 'url'):
return self.featured_image.url
else:
return '/path/to/default/image'
owner = models.ForeignKey(Profile, null=True, blank=True, on_delete=models.SET_NULL)
title = models.CharField(max_length=200)
[...] <-- there's more code
featured_image = models.ImageField(null=True, blank=True, default='profiles/user.png', upload_to='adverts/')
[...] <-- there's more code
def __str__(self):
return self.title
My project structure:
enter image description here
And my website:
enter image description here
The image should appears above these two containers.. but it doesn't.
When I go to admin panel I can see added image in my model and I can click it and see it.
I also can see it in my database with python shell and with DB Browser for SQLite
But when I inspect the website then I can find my img tag but it is disabled(?)
enter image description here
enter image description here
And my views.py:
def adverts(request):
adverts = Advert.objects.all()
context = {'adverts': adverts, 'profile': profile}
return render(request, 'carapp/advertsView.html', context)
I tried many things from google and nothing works.. I also can say that I have a Profile form and Profile model. And there is also a photo which I can update and everything works there..
Actually I found a solution for this problem. Maybe it’s not what I expected but it helps.
The problem was in my featured_image field in models.py. I had to remove the attr upload_to=“images/adverts”
I am learning to write a Django app which will fetch all images from os.path.join(BASE_DIR, 'media_root', 'uploads') and show it on html page.
But its not working like so.
admin.py
from .models import Experience
# Register your models here.
admin.site.register(Experience)
settings.py
MEDIA_ROOT = os.path.join(BASE_DIR, 'media_root')
MEDIA_URL = '/media/'
models.py
class Experience(models.Model):
id = models.AutoField(primary_key=True)
image = models.ImageField(upload_to='uploads/', default='newbalance.jpg', height_field=None, width_field=None)
studio_name = models.CharField(max_length=255)
designation = models.CharField(max_length=255)
duration = models.CharField(max_length=255)
description_short = models.TextField()
description_long = models.TextField()
keywords = models.CharField(max_length=255)
date = models.DateTimeField('DateAdded',
auto_now=True, auto_now_add=False)
class Meta:
db_table = "experience"
def __str__(self):
return self.studio_name + ' ' + self.duration
views.py
class ExperienceList(generic.ListView):
model = Experience
template_name = 'resumesection.html'
queryset = Experience.objects.all()
urls.py
urlpatterns = [
path('modelview/', views.ExperienceList.as_view(), name='experience_list'),
]
In error log,
2021-07-19 04:15:40,528: Not Found: /resume_site/modelview/uploads/atomic_arts.png
2021-07-19 04:15:41,239: Not Found: /resume_site/modelview/uploads/futureworks.jpg
I presume django should read image from 'MEDIA_ROOT/uploads' folder but it reads from '/resume_site/modelview/uploads/'. Which is not there.
I come close to the answer in this post Django admin view uploaded photo,
But cannot connect the dots between 'MEDIA_ROOT/uploads' and '/resume_site/modelview/uploads/'
How does viewing image, uploaded from admin, work in django. ?
EDIT: Part of resumesection.html in context
{% for exp in object_list %}
<h5>{{exp.studio_name}} | {{exp.duration}}</h5>
<img src="{{exp.image}}">
<p id="description_short_text">
{{exp.description_short}}
</p>
<p id="text" style="display:none;color:red">
{{exp.description_long}}
</p>
<h4 id='keywords_text' style="display:block;color:green">KEYWORDS</h4>
<p id='alt_text' style="display:block;color:green">{{exp.keywords}}</p>
{% endfor %}
urls.py in project
urlpatterns = [
path('admin/', admin.site.urls),
path('barefoot/', include('barefoot.urls')),
path('resume_site/', include('resume_site.urls')),
path('photo_gallery/', include('photo_gallery.urls')),
]
if settings.DEBUG: # added
import debug_toolbar
urlpatterns += [path('__debug__/', include(debug_toolbar.urls))]
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
if you are want to fetch a file from a db & want to place in src you have to provide .url in last
so use this
<img src="{{ exp.image.url }}">
instead of
<img src="{{exp.image}}">
read this for better understanding https://docs.djangoproject.com/en/3.2/topics/files/
and tell me if you still getting error
I'm trying to display already stored database image in template. But here i'm getting only name of the image. How to solve this, Where i did mistake.
models.py
class Images(models.Model):
image = models.ImageField(upload_to='images', blank=True, null=True)
settings.py
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
urls.py
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
views.py
def display(request):
myimages_objs = Images.objects.all().values()
for i in myimages_objs :
myimages_objs = i['image']
return render(request, 'index.html', {'myimages_obj ': myimages_objs })
index.html
<div class="divi">
<img src="{{ myimages_obj }}" alt="image">
</div>
I don't understand why you are returning the objects inside the for loop, this causes only a single image to be displayed in the template. Instead of doing this, you can pass all the image objects in the template, then loop through the objects in the template to display the images.
You can change your view as:
def display(request):
myimages_objs = Images.objects.all() # get all the images
return render(request, 'index.html', {'myimages_objs':myimages_objs})
Then in your template:
<div class="divi">
{% for item in myimages_objs %} //loop through all the images
<img src="{{ item.image.url }}" alt="image">
{% endfor %}
</div>
Edit:
Change the upload_to to upload_to="images/".
As far as I am concerned, your images are not being stored inside the images folder as you have missed the backslash(which represents a folder name). So, the images are being saved inside the media folder.
But the image url is something like project_path/media/images/something.jpg which cannot be found as the images are not being saved inside the images folder.
Change the field as stated for new images to be stored in the specified folder. For old images, copy them to the images folder manually.
I hope this will help.
I am super new to python programming and django and i got the basics out of the way. I created a project with two apps, home and video. In my video models.py i have the following data:
class Video(models.Model):
name = models.CharField(max_length=200)
description = models.TextField(blank=True, null=True)
I want to do something with this in my home app in the views.py, such as display the data in an html page and currently it is set up as followed:
from video.models import Video
def display_video(request):
video_list = Video.objects.all()
context = {'video_list': video_list}
return render(request, 'home/home.html', context)
in my home.html
{% if video_list %}
{% for video in video_list %}
<p>{{ video.name }}</p>
<p>{{ video.description }}</p>
{% endfor %}
{% else %}
<p>no videos to display</p>
{% endif %}
my home.html always returns "no videos to display"
But when i query Video.objects.all() in my video app it finds 2 objects. any help is appreciated.
I decided to delete the project and started over brand new but this time I used class views instead of function views. I'm not exactly sure why it didn't run but using class views it worked like a charm. So the equivalent in class views as simple as possible is.
from video.models import Video
class IndexView(generic.ListView):
template_name = 'home/index.html'
context_object_name = 'top_three'
def get_queryset(self):
return Video.objects.all()[:3]
In settings, check the following is there.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
It worked for me without using class. I just did what we normally do.
from django.shortcuts import render
from AllBlogs.models import Post # getting this post form AllBlogs app
# Create your views here.
def home (request):
# sort posts according to date in descending order
# only a single query is generated and then hit the database that's how this will not affect the performance of database
latest_blogs = Post.objects.all().order_by("-date")[:3]
return render(request,'Home/home.html',{'blog':latest_blogs})
And this is my template
<!--separated it from the home.html because we can use it in AllBlogs.html
and it save our work and time by just including without copying the same data several times-->
{% load static %}
<li>
<!--add field name which we used in models-->
<article class="blog">
<a href="{% url 'blogDetails_page' blog.slug %}"> <!--Different slug for different blog as slug will create a different url-->
<!--dtl filter to add back or url dynamic url creation-->
<image src="{% static 'images/'|add:blog.image_name %}" alt="{{blog.title}}">
<div class="blog__content">
<h3>{{blog.title}}</h3>
<p>{{blog.excerpt}}</P>
</div>
</a>
</article>
</li>
And this is the Post model
# having post data
class Post(models.Model):
title = models.CharField(max_length=150)
date = models.DateField(auto_now=True) # put the date in the field at which time we are saving the data
image_name = models.CharField(max_length=50) # later on we upload files right now we get images from static folder
excerpt = models.CharField(max_length=200)
content = models.TextField(validators=[MinLengthValidator(10)]) # TextFields same like CharField
slug = models.SlugField(unique=True, db_index=True) # set it as unique because we are going to use it as a primary key
author = models.ForeignKey(Author,on_delete=models.SET_NULL,related_name='posts',null=True) # one to many relation
tags = models.ManyToManyField(Tag) # ManyToManyRelation with tag
# represent post entry by it post title
def __str__(self):
return self.title
I have a django app which allows users to submit an image with it. Right now my model looks like
class Posting(models.Model):
title = models.CharField(max_length=150)
images = models.ForeignKey(Image, null=True)
class Image(models.Model):
img = models.ImageField(upload_to="photos/",null=True, blank=True)
and I am trying to display the images in my template however I cannot seem to get it to work. I have gone though countless stack overflow posts and haven't had any luck. In my template I have
{ for post in postings }
<img src"{{ post.image.url }} #and many variations of this
however other seems to display the url. The url seems to always be blank. Any help would be greatly appreciated!
This is how i got it working.
settings.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
MEDIA_ROOT = (
BASE_DIR
)
MEDIA_URL = '/media/'
models.py
...
image = models.ImageField(upload_to='img')
urls.py(project's)
if settings.DEBUG:
urlpatterns = urlpatterns + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
template (.html)
<img src="{{ post.image.url }}" alt="img">
Do something like this. This code is working in my app.
views.py:
def list(request):
images = Image.objects.all()
return render(request, "list.html", {'images': images})
list.html:
{% for i in images %}
<img src="{{ i.image.url }}" width="500px"/>
{% endfor %}
The template tag should be:
<img src="{{ post.images.img.url }}" ... >
You should expect something akin to:
{% for post in postings %}
<img src="{{ post.image.url }}">
{% endfor %}
There are a couple of caveats here --
Images are served as a file, whatever is serving your application (runserver, nginx, apache, etc.) needs to have the ability to route that file.
You must ensure you are building the context for the template engine to use. It will silently fail on values that it cannot find in context.
It looks like you may be trying to follow a video tutorial series by Corey Schaefer. If so, my suggestion won't help, but if not, Corey Schaefer has a video that covers exactly what you're trying to do at
https://youtu.be/FdVuKt_iuSI?list=PL-osiE80TeTtoQCKZ03TU5fNfx2UY6U4p.
You have to set quite a number of settings and override some defaults. The django documentation has two ways of doing it, one for development on localhost and another for production: https://docs.djangoproject.com/en/2.2/howto/static-files/