All of my user's have the option to link a profile picture. There are several templates that need to load this profile picture. If the user has not uploaded a picture, we use a default. When I want to display this profile picture, my code looks like this
<img src="{% if user.profile_picture.search_thumbnail.url %}{{ user.profile_picture.search_thumbnail.url }}{% else %}{% static "alternate.jpg" %}{% endif %}">
This is way too verbose for me, especially considering I need to repeat it out in multiple templates. I could use {% with %} blocks to store user.profile_picture.search_thumbnail.url, but that won't help me too much.
My solution was to write a function attached to the user model that returns the url of the static file. Unfortunately, the {% static %} is a template function. {% url %} has an equivalent function on the server called django.core.urlresolvers.reverse(). Does the alternative thing exist for the {% static %} tag?
In case anyone asks, I want to use the static function because my static files are stored in different places depending on the environment. My dev machine serves files locally, while my PRD machine serves static files from s3.
Thank you,
Nick
why not write a filter so you can do this.
<img src="{{ user.profile_picture.search_thumbnail.url|custom_filter }}">
and in the custom_filter you read from the settings.STATIC_URL to return the correct URL the user one is not set.
you could make the filter even shorter like this
<img src="{{ user|user_pic_url }}">
and in the filter pull out the .profile_picture.search_thumbnail.url /checks
This is what the static templatetag does underneath, and you can use it just fine in your own code:
from django.contrib.staticfiles.storage import staticfiles_storage
def static(path):
return staticfiles_storage.url(path)
Related
As per a tutorial I have a model with:
class Project(models.Model):
...
image = models.FilePathField(path="/img")
The files are rendered in the template with:
{% extends "base.html" %}
{% load static %}
...
<img class="card-img-top" src="{% static project.image %}">
...
{% endblock %}
In the tutorial, the image files were entered manually and it all worked because they were stored in app_name/static/img. But when I try to enter a new Project via the admin it cannot find the /img directory. But if I change the path= to an absolute address such as /home/me/project_name/app__name/static/img as apparently necessary, or even /static/img, which seems to be accepted, the template adds an extra 'static'in front of the address.
I could remove the 'load static' from the template, but I wonder whether there is a better way.
Also I am not sure how all this fits into the use of 'collectstatic' later on for production servers.
I've been working on a simple Django project for myself and I came into a little problem.
When first developing the blog, I didn't make templates, I just made sure things were working properly, but now, I dived into making the templates and everything is working besides my header background-image.
Before the templates, I was doing it like this:
<header class="masthead" style="background-image: url({% static 'img/home-tech-bg.jpg' %})">
This was working just fine, but now that I'm trying to do the same as a template it doesn't work. It doesn't return me any errors, but the image doesn't display.
What I did was the following:
template base.html
<header class="masthead" style="background-image: url({% block headerimage %} {% endblock %})">
blog.html
{% load static %}
{% block headerimage %}
{% static 'image/image.jpg' %}
{% endblock %}
What is a better way to do this?
Well first off move your static directory to your root directory and write the path in the template like this:
{% load static %}
<img src="{% static 'img/home-tech-bg.jpg' %}" alt="/">
Also make sure your settings.py file is properly configured to serve static files, add this line if you havent yet:
STATIC_URL = '/static/'
I have three SurveyWizardViews all of which use the same standard wizard_form.html which is located at templates/formtools/wizard/wizard_form.html as per the documentation
I have added some basic logic to this template which is designed to detect which page of the form the user is on so that I can include a non standard page/step, this is an image with a JS slider bar underneath. This all works perfectly.
{% if wizard.steps.current == '6' %}
<img src="{% static "survey/images/pathtwo/" %}{{display_image}}"/>
<section>
<span class="tooltip"></span>
<div id="slider"></div>
<span class="volume"></span>
</section>
{% endif %}
However I now want to have a slightly different experience for the user depending on which View/URL they are coming from.
Question Is it possible to detect which URL the view is currently using to look at the page? e.g.
{% if URL.current == 'www.mywebsite.com/experiment/surveyone/' %}
do X
{% if URL.current == 'www.mywebsite.com/experiment/surveytwo/' %}
do y
I have done some searching but Im not even sure what I'm searching for to be honest. Any help would be much appreciated.
You can use the request context variable. Something like:
{% if 'experiment/surveyone' in request.path %}
do this
{% endif %}
I prefer using in instead of == to ignore trailing and leading slashes. If you want the whole thing try the build_absolute_uri method. Also check what options does request offer to you (https://docs.djangoproject.com/en/dev/ref/request-response/#httprequest-objects).
Finally, don't forget to add django.core.context_processors.request to your TEMPLATE_CONTEXT_PROCESSORS (I think it is added by default).
I am using sorl-thumbnail to create thumbnails for my project. I am implementing it only in templates and not in the models or the view. And each of the thumbnail are linked with their original image, which are used by a lightbox. As a newbie, I wanted to know, some of its functionality:
Whether implementing it only in the template is the same, as using it in the models or the view and creating a new thumbnail for each one?
How to configure different thumbnails for different image, as it can be done in easy_thumbnail?
How to override the default values, eg: override the value of Quality, etc.
And lastly, is it a correct way of implementing it? Any advice or suggestion will be much appreciated. Thank you.
html:
{% for photo in photos %}
<div class="thumbnail_container">
<a href="{{MEDIA_URL}}{{photo.image}}" class="gallery" title="{{photo.title}}">
{% thumbnail photo.image "200x200" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="thumbnail">
{% endthumbnail %}
</a>
</div>
{% endfor %}
Edit:
How to achive something like this for the sorl-thumbnails, which can be done in easy-thumbnails:
settings.py
THUMBNAIL_ALIASES = {
'': {
'avatar': {'size': (100,100), 'crop': True},
'forum': {'size': (203,103), 'crop':False},
},
}
And then in the templates I can just chose from the aliases I have defined in the settings.py:
<img src="/static/{{forum.image |thumbnail_url:'forum' }}">
or
<img src="/static/{{forum.image |thumbnail_url:'avatar' }}">
Like many things in django sorl-thumbnail is implemented both simply and elegantly, and the way you are using it is correct.
Each time sorl-thumbnail is asked for a new thumbnail, it checks to see if one exists in its cache:
If one exists, this one is returned.
If it doesn't, a new one is generated and stored, then returned.
Thus, a cache of thumbnails are generated as required. The key,value store is a means of storing the thumbnails that makes them quick to look up and retrieve. Using the steps above the thumbnails will be generated and stored as they are requested by your users.
Thumbnail generation 'on demand' process works well, as images are added gradually to your website, the thumbnails for the new images will be created as required, and thumbnails for older images retrieved from the store.
To store the thumbnails Sorl-thumbnail uses a combination of a database and memory cache. The database ensures that all the thumbnails are saved should the app and or web server are restarted. The thumbnails will then be loaded into the memory cache (you guessed it) on demand, and thus ensure fast loading times for the user.
To answer your questions:
Whether implementing it only in the template is the same, as using it in the models or the view and creating a new thumbnail for each one?
It is not possible to generate the thumbnails in the models or views, as they are generated on demand, as the user requests them. This is very efficient. I guess you could write a script to request all the thumbnails, which was run on a nightly basis to ensure all the thumbnails are generated, although this is probably not required.
How to configure different thumbnails for different image, as it can be done in easy_thumbnail?
All configuration is done in the {% thumbnail %} tag, if different thumbnails for the same image are generated, these will be stored in the key, value store separately.
How to override the default values, eg: override the value of Quality, etc
There are a list of settings here: http://sorl-thumbnail.readthedocs.org/en/latest/reference/settings.html, these should all be set in the settings.py file. The Quality is set to 95 by default, which is pretty high.
Edit - set jpeg quality in settings.py
...
THUMBNAIL_QUALITY = 60
THUMBNAIL_PROGRESSIVE = False
...
These two additions, anywhere in the settings.py file for your project, will reduce the jpeg quality for the thumbnails to 60, and switch off the creation of progressive jpegs.
Edit - thumbnail aliases
There is no inbuilt support for thumbnail aliases in sorl-thumbnail. Probably the easiest way to implement them is as small sub templates, which can then be loaded into your main templates.
So a page template, might looks somthing like:
....
{% load thumbnail %}
....
<h3>Recent image uploads:</h3>
{% for item in recentUploads %}
{% include "bigThumbnail.html" %}
{% endfor %}
<h3>Older image uploads</h3>
{% for item in oldUploads %}
{% include "smallThumbnail.html" %}
{% endfor %}
....
The templates for the thumbnails would be stored as separate files in your template directory and could look something like:
bigThumbnail.html
{% thumbnail item.image "100x100" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
smallThumbnail.html
{% thumbnail item.image "40x40" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
In each of the sub templates, all the settings for your 'aliases' can be made. Alternatively, it would be possible to create an additional template tag to read these attributes from settings.py, this is what easy_thumbnail does, although would require a lot of programming to achieve the results of the 2 small templates above.
If you have further questions about sorl-thumbnail, I would be happy to help you with them.
I'm trying to include a static html page from a django template.
I tried using {% include the_static.html %} but this doesn't work for some unknown reason.
the_static.html page is a data page that will be modified often with an html editor.
and my_model has a url to this html and include it. But django refuses to find it although I'm sure I've setup the path correctly.
You can write your custom template tag to do this.
Create a file named includestatic.py under appname/templatetags/. Also, remember to create appname/templatetags/__init__.py, to include the app in settings and to restart the server.
includestatic.py should have this code:
from django import template
from django.contrib.staticfiles import finders
from django.utils.html import escape
register = template.Library()
#register.simple_tag
def includestatic(path, encoding='UTF-8'):
file_path = finders.find(path)
with open(file_path, "r", encoding=encoding) as f:
string = f.read()
return escape(string)
To use it in your template, put {% load includestatic %} at the top of your template, and then use the tag like {% includestatic "app/file.txt" %}.
I am not sure I understand everything yet...
You've an HTML page served by Django on a given url, let's suppose it to be http://mydjangodomain/get_the_static/. This URL is set in the urls.py of your model. Ok, that's normal.
You have a django template for this model. Let's suppose it's defined in a template directory mytemplates/mymodeltemplates/ and it's called myfrontpage.html (since in Django templates are html files).
I guess you've an URL defined in your urls.py to server that front page ? Let's suppose it's http://mydjangodomain/get_the_front_page/
Now I don't understand how your front page use your static html. Do your final front page html need the static's URL for a "src" attribute or something like it, or do you need to include the static's html into the front page's html ?
In the 1st case, you already have the URL, it's http://mydjangodomain/get_the_static/ so just use it as if.
In the 2nd case, you don't need the previous URL, get ride of it. Furthermore, put the_static.html in mytemplates/mymodeltemplates/. Then you need the {% include "/mymodeltemplates/the_static.html" %} tag. If this doesn't work, make sure you've the following in your settings:
TEMPLATE_LOADERS = (
'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
)
APPLI_ROOT_PATH = "<absolute_path_to_the_application_root_on_your_server>"
TEMPLATE_DIRS = (
'%s/mytemplates' % APPLI_ROOT_PATH,
)
Sort of resurrecting the dead, but at least with django 1.10, there's a very clean answer here:
http://www.effectivedjango.com/tutorial/static.html
an excerpt from that page:
Simple Template Inclusion We want to add the Boostrap CSS to all of
our templates, but we’d like to avoid repeating ourself: if we add it
to each template individually, when we want to make changes (for
example, to add another stylesheet) we have to make them to all the
files. To solve this, we’ll create a base template that the others
will inherit from.
Let’s create base.html in the templates directory of our contacts app.
{% load staticfiles %}
<html>
<head>
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}"
rel="stylesheet" media="screen">
</head>
<body>
{% block content %}
{% endblock %}
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
base.html defines the common structure for our pages, and includes a
block tag, which other templates can fill in.
We’ll update contact_list.html to extend from base.html and fill in
the content block.
{% extends "base.html" %}
{% block content %}
<h1>Contacts</h1>
<ul>
{% for contact in object_list %}
<li class="contact">{{ contact }}</li>
{% endfor %}
</ul>
add contact
{% endblock %}
Having followed this exactly, I now have a base.html that includes all my style references and the navigation bars/etc, so the html in the block content is merely the central contents of each (varying) page.
Do you mean that you want to EXTENDS the parent template the_static.html?
If yes, you should add below code at the first line of your children template:
{% extends "the_static.html" %}
Details documentation can be found here