I've added the following model's objects to my view using the get_context_data() method.
models.py:
class Icon(models.Model):
icon_name = models.CharField(max_length=100, default='iconset')
icon = models.ImageField(upload_to='machine_icon/', null=True, blank=True)
def __str__(self):
return str(self.icon_name)
views.py
class MachineSorter(DetailView):
model = MachineCount
template_name = 'brands/machines.html'
def get_context_data(self, **kwargs):
context = super(MachineSorter, self).get_context_data(**kwargs)
context['icon'] = Icon.objects.all()
return context
I can loop through the icons easily and display them like this:
{% for obj in icon %}
<img src="{{ obj.icon.url }}">
{% endfor %}
But I DO NOT want to loop through them, I just want to access an individual icon image where needed, such as:
<img src="{{ icon.name.url }}">
...or something to that effect. When it comes to using additional context in views, the examples I see all use loops. What am I missing here? Any help would be appreciated.
did you tried to retrieve just what you need with a query?
https://docs.djangoproject.com/en/2.2/topics/db/queries/#retrieving-objects
Related
I am creating a blog site using the Wagtail CMS. I would like to display the Author avatar image whenever a new post is published. I am trying to render the image from this /admin/account/change_avatar/ location. I can see the image uploaded here is under the wagtailusers_userprofile -> col name: avatar table, but not sure how to render it in the template.
This image isn't a typical Wagtail Image (one that comes from wagtailimages.Image), this looks like a regular models.ImageField.
Here's what's in the UserProfile model for the avatar:
class UserProfile(models.Model):
user = models.OneToOneField(
settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name='wagtail_userprofile'
)
avatar = models.ImageField(
verbose_name=_('profile picture'),
upload_to=upload_avatar_to,
blank=True,
)
Because this is a regular image field, you can get the url by appending .url in your template.
Here's some example template code:
{% if request.user.is_authenticated %}
{% if request.user.wagtail_userprofile.avatar %}
<img src="{{ request.user.wagtail_userprofile.avatar.url }}" alt="{{ request.user.get_full_name }}">
{% else %}
{# No image #}
{% endif %}
{% endif %}
The above code will check to see if the user is authenticated in the template. If you don't need it, ditch it.
THen there's the if statement to checks of the request.user.wagtail_userprofile.avatar exists. The wagtail_userprofile comes from the user field on the UserProfile model. It's using a related_name, so we use that in the template.
I also sprinkled in a {{ request.user.get_full_name }} for the alt tag, because the image alt should probably be the users name in this case, rather than the file name.
If you need the height or width, those are both available through the {{ request.user.wagtail_userprofile.avatar.height }} and {{ request.user.wagtail_userprofile.avatar.width }}.
I want to get selected value by radio button and pass it to the update view but I couldn't find a way. Both views are class based.
Exception Value:
Reverse for 'update-author' with no arguments not found. 1 pattern(s) tried:
ListView :
class Dashboard(ListView):
model = Author
template_name='catalog/dashboard.html'
def get_context_data(self, **kwargs):
context = super(EditDashboard, self).get_context_data(**kwargs)
context["authors"] =Author.objects.all()
context["publishers"] =Publisher.objects.all()
context["genres"] =Genre.objects.all()
return context
UpdateView:
class UpdateAuthor(UpdateView):
model = Author
fields = '__all__'
template_name='catalog/updateauthor.html'
context_object_name = 'author'
Model:
class Author(models.Model):
first_name = models.CharField(max_length=200, blank=False)
last_name = models.CharField(max_length=200, blank=False)
date_of_birth = models.DateField(null=True, blank =True)
date_of_death = models.DateField(null=True, blank =True)
class Meta:
ordering = ['first_name', 'last_name']
def __str__(self):
return f' {self.first_name} {self.last_name}'
Form in template :
<form action="{% url 'update-author' ????? %}" method="post">
{% csrf_token %}
{% for author in authors %}
<input type="radio" name="choice" id="{{ author.id }}" value="{{ author.id }}">
<label for="author">{{ author.first_name}} {{ author.last_name}}</label><br>
{% endfor %}
<input type="submit" value="Update">
</form>
So if I understand you have a listView with all the authors publishers and genres, and you want to call the updateView with the author selected.
One way is to use javascript:
give an id to the form tag :
map an event on click to the submit button
get the selected radiobox element and value
change the form action value with the value you get
call the submit event
Here is some sample of Jquery you can use to do that:
$(document).ready(function(){
$('#myformid').submit(function(event) {
//prevent the form submition on click
event.preventDefault();
//get the selected value
var selected_author_id =$('input[name="choice"]:checked').val();
console.log(selected_author_id);
//add this value to our form action attribute
$(this).attr('action', 'update-author/'+String(selected_author_id));
//finaly submit the form
$(this).unbind('submit').submit();
});
});
Don't forget to import jquery as well
I have an application that creates several "bokeh" plots. Those plots all belong to the same document, so that i can use linked panning / zooming. The plots are served by a "bokeh" server. All plots appear in one website but there is some html content between the plots. All of that is part of a django app. Using bokeh-0.12.1
#view.py
plots = []
plot1 = figure()
plot1.line([1,2,3],[5,4,2])
plot2 = figure()
plot3.line([1,2,3],[5,4,2])
script_tags = []
bokeh_document = curdoc()
session = push_session(bokeh_document)
script.tags.append(autoload_server(model=plot1, session_id=session.id))
script.tags.append(autoload_server(model=plot2, session_id=session.id))
Then in the template would look as follows:
template.html
<h1>These are the embedded server plots</h1>
{% for script in script_tags %}
<pre>{{ subgroup_plot.script }}</pre>
<h1>Here comes a plot</h1>
some Text
<div>
{{script | safe }}
</div>
{% endfor %}
But then the page gets rendered imporperly... The plots appear over each other and over the page content. The documentation does not mention how to embedd it in html. So how does it have to be done so that the css works correctly?
It looks like there are missing some CSS classes, namely bk-root and plotdiv. Try the following:
<h1>These are the embedded server plots</h1>
{% for script in script_tags %}
<pre>{{ subgroup_plot.script }}</pre>
<h1>Here comes a plot</h1>
some Text
<div class=“bk-root">
<div class=“plotdiv">
{{script | safe }}
</div>
</div>
{% endfor %}
Also refer to the CSS file to see the correct order/nesting of classes.
autoload_server had an issue in 0.12.1 that prevented the correct enclosing <div class="bk-root"> from appearing. This issue was fixed in 0.12.2, you can either upgrade, or put them in by hand as the other issue demonstrates.
I have a requirement, where in I have 4 different drop down on shopify home page. The First drop-down, let's name it city-drop-down, will show list of city. Based on the city selected in city-drop-down, the second drop down, lets name it category-drop-down, will show list of categories available for particular city. Similarly the third drop down should show the value based on the 2nd drop down and 4th drop down should show the value based on 3rd drop down.
Basically, I need to store list of categories available for each city. Similarly I have to store values available for each categories. How can I store this value, so that the moment a value is selected on webpage, I can use a AJAX call to get the available data for next drop down.
Edited *****
Do let me know, if I am doing it totally wrong.
Included the scripts. Please note, initially I uploaded the files under "Files". However I moved it to Assets folder as it was easier to edit the file in Assets folder.
function readcityfile(){
var xmlhttp = new XMLHttpRequest();
var url = "/assets/city_type.txt";
alert("hi");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
try{
var myArr = JSON.parse(xmlhttp.responseText);
alert(myArr);
//myFunction(myArr);
}
catch(err) {
alert(err.message);
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function myFunction(arr) {
var i;
for(i = 0; i < arr.length; i++) {
alert(arr[i].city);
}
}
And the JSON file is -
[{"city": "Jamshedpur","types": "Sweets#Savories#Cake"},{"city": "Ranchi","types": "Sweets#Savories#Cake"}]
One simple way if the data size isn't too large would be to generate your data as a JSON file and simply store it as a file and then edit your theme to include the file's url. A file that is too large might be 100k. Smaller is better but if you don't have a back end to handle the AJAX calls the static file certainly provides a low cost proof of concept.
There are two ways to do this.Either as an asset or a file. Assets are part of your theme so even though you'll be altering your templates to manage this I'd tend to go with a file. (Assets are just files located under the theme but the are dealt with slightly differently)
go to your Shopify Admin control panel
Click Settings
Click Files
Click "Upload Files"
After upload you'll have a file. The next step uses the file's name not its URL.
Go to your theme editor:
Shopify Admin control panel
Online Store
Themes
click Customize Theme
drop-down Theme Options and select HTML/CSS
I'm guessing you are going to select the template product.liquid to edit.
do that and decide where you want to introduce your javascript file. If your script file was named cities_etc.js you'd import it as below:
{{ 'cities_etc.js' | file_url | script_tag}}
This method seems a bit slow if all that you are trying to do is create a tiered menu. Using Ajax requests will mean there are several round trips and it will be visually slow for the user waiting for the ajax request to complete.
You can create a linklist
I know you have already found your method but I would strongly urge you to give this a go. Here is an example of some liquid markup that will created a tiered menu. The parent linklists handle is main-menu then you need to create a linklist for each of the children where the handle matches the title in the main-menu. For example if you have an 'About Us' link in the main menu create a linklist also with the handle 'about-us'. Then just use some simple css or javascript to hide and show the menus on hover.
{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<li class="dropdown" aria-haspopup="true" data-id="{{ child_list_handle}}">
<a href="{{ link.url }}" class="nav-link {% if link.active %} active{% endif %}">
{{ link.title }}
</a>
<ul class="dropdown_menu hidden" id="{{ child_list_handle }}">
{% for childlink in linklists[child_list_handle].links %}
<li>
{{ childlink.title | escape }}
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li>
{{ link.title }}
</li>
{% endif %}
{% endfor %}
I have a UpgradeView with the same possibility for saving like in the django admin. I can save, save and continue editing or save and create a new object.
Each leading to a different view:
DetailView, UpdateView and the CreateView.
After saving I want to give a message out, on every view or template its leading to.
For example "Successfully saved" or "Object could not be saved."
When writing custom template tags it's getting really hard for me, because after I created the tag, I don't know how, where and when to pass the message to the other views.
This is the UpdateView where i come from.
class TopicEditView(UpdateView):
fields = ['title','description',]
model = Topic
...
def get_success_url(self):
if self.request.POST.get('save'):
return reverse('topic_detail', kwargs={'pk':self.object.pk})
elif self.request.POST.get('save_and_continue'):
return reverse('topic_edit', kwargs={'pk':self.object.pk})
elif self.request.POST.get('save_and_create_new'):
return reverse('topic_create')
else:
return reverse('fallback_success_url')
My custom template tag is still empty, because the only examples i saw are pretty hard to understand for me.
#register.inclusion_tag('msg.html', takes_context=True)
def get_msg(context):
return None
Inside 'msg.html' i only have the string saying "Successfully saved", this did lead to nothing and i forgot why i did that.
And this is in my template (nothing):
{% load msg_handler %}
{% get_msg %}
How and where can I pass the message to these views using the session?
Try the Django messages framework instead:
http://docs.djangoproject.com/en/1.8/ref/contrib/messages
I got this faster done than I ever thought.
This is my custom template tag:
#register.simple_tag(takes_context=True)
def get_msg(context):
try:
return context.request.session.pop('msg')
except KeyError:
return ''
And this is my view, passing the message:
class TopicEditView(UpdateView):
...
def get_success_url(self):
self.request.session['msg']='Successfully saved!'
...
Nothing have changed in my template.
If there is a more elegant/useful way, i would appreciate it.
EDIT :
Thanks to Lorenzo Peña's comment, i tried using the messages framework which was really easy to use!
First i went to my views.py again and imported messages
from django.contrib import messages
and changed this line
self.request.session['msg']='Successfully saved!'
To this:
messages.add_message(self.request, messages.SUCCESS, 'Successfully saved!')
Then i made a new template called msg_loader.html containing this:
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
And changed in my other templates this
{% load msg_handler %}
{% get_msg %}
to this
{% include "msg_loader.html" %}