I am building a website about movies, actors etc... And I need your advices in order to factorize my templates.
Currently I have 5 templates :
base.html : containing header menu, footer [located in the master templates folder]
actors : display all the actors (extends base.html) [located in the templates folder from the application 'movie-library']
actor : display one actor and all tbe movies he played in (extends base.html) [located in the templates folder from the application 'movie-library']
movies : display all the movies (extends base.html) [located in the templates folder from the application 'movie-library']
movie : display one movie (extends base.html) [located in the templates folder from the application 'movie-library']
So, in actor.html and movies.html it's the same HTML code to display one movie.
And in actors.html and movies.html I have the same HTML to display a pagination bar.
For example here is the code used to display a movie :
<div class="col s3 module">
<div class="card movie-card">
<div class="card-image">
<img src="{{ MEDIA_URL }}{{ movie.photoshoot.folder }}/1.jpg" alt="{{ movie.title }} thumbnail">
</div>
<div class="card-content">
<span class="card-title grey-text text-darken-4">
{{ movie.title }}
</span>
<p>
<i class="material-icons blue-text accent-2-text">hd</i>
{% if movie.movie is not None %}
<i class="material-icons blue-text accent-2-text">local_movies</i>
{% endif %}
{% if movie.photos is not None %}
<i class="material-icons blue-text accent-2-text">image</i>
{% endif %}
<span class="grey-text darken-1-text right">{{ movie.movie.duration }}</span>
</p>
</div>
</div>
</div>
How could I factorize those to piece of code ?
Thank you.
You can use include tag for movies and custom tag for pagination
Related
I have a project in Laravel and Livewire.
This is my view displaying a list of projects submitted.
#forelse ($projects as $index => $project)
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<a href="#" wire:click="showProjectDetails({{ $project->slug }})"
class="block p-6 bg-white border border-gray-200 rounded-sm shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-blue-500 dark:text-white">
{{ $project->title }}
</h5>
<p class="my-5">Bugdet Ghc500 - Ghc 700</p>
<p class="font-normal text-gray-700 dark:text-gray-400">{{ $project->description }}</p>
<ul class="flex gap-4 text-blue-600 mt-5">
<li>PHP</li>|
<li>Mobile App Development</li>|
<li>Database Management</li>|
<li>C++</li>
</ul>
</a>
</div>
#empty
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<p class="text-4xl">No Projects found</p>
</div>
#endforelse
When I click on a single project, a new view called show-project should display the details of the particular project that has been clicked.
My Livewire controller
public function showProjectDetails($slug)
{
return redirect()->route('show-project.details', $slug);
}
<a href="{{ route('show.project_details', ['slug' => $project->slug]) }}">
and web.php route can be either Controller or Livewire page.
In a Django v3.x app I would like to display a list of uploaded file names (e.g. images) in the left hand side of the screen. When a user clicks on one of those, I'd like to display the actual file/image on the right hand side of the screen. I am still new to Django and have used both ListView and DetailView separately, but not in such a combination. I'm not sure how this can be achieved.
Using a little Bootstrap magic, I can create a split screen easily. Hence, my template would look somehow like this:
<div class="row">
<div class="col-md-5 left">
{% for image in images %}
<div class="card">
<h4>{{ image.url }}</h4>
View
</div>
{% endfor %}
</div>
<div class="col-md-5 right">
{# TODO: When the user clicks on the View url above, then I'd
like to load the actual image here on the right hand side of the
screen inside this div-tag. #}
</div>
</div>
Question 1: How can I achieve loading a selected image from a list? Can I still use ListView and DetailView, or do I need to write my own View logic?
Question 2: Ideally, I'd like to NOT re-send the whole page from the server to the client, because the list of images in the lefthand-side could potentially be long and require pagination. So, when the user clicks View, then, ideally, I'd like to load only the document from the server. Is this somehow feasible?
Well I have made a sample code and you can refer to it and get some idea.
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails"
data-ride="carousel">
<!--Slides-->
<div class="row">
<div class="col-lg-8">
<div class="carousel-inner" role="listbox">
{% for latest in latest_course %}
<div class="carousel-item {% if forloop.counter0 == 0 %}active{% endif %}">
<img class="d-block w-100" src="{{latest.poster.url}}" alt="First slide">
</div>
{% endfor %}
</div>
</div>
<!--/.Slides-->
<div class="col-lg-4">
<ol class="slider_list">
{% for latest in latest_course %}
<li data-target="#carousel-thumb" data-slide-to="{{forloop.counter0}}"
class="active"> <img class="img-thumbnail" width="100px" height=100px src="
{{latest.poster.url}}"
class="img-fluid"></li>
{% endfor %}
</ol>
</div>
and the output looks like this
Here, you can see the list on the right side and when you select an item the selected item loads in the left side. This way you can style your template the way you want.
basically you want to show the selected item from the list on the other side like a slideshow
Trying to set variable in django template, and make a simple rule to update it after iteration. Here is my template:
{% for adv in advs %}
<div class="media-item big" style="top: 18%;left:{% cycle '304' '1078' %}px;">
<div class="media-item__tags">
{{ adv.year }}
{{ adv.payer}}
</div>
<div class="media-item__content">
<div class="media-item__background">
<div class="media-item__canvas">
<div class="media-item__canvas-background" style="background-image: url({{adv.image.url}})"></div>
</div>
<h2 class="topic white upcase fixed-size">{{ adv.name }}</h2>
Смотреть проект
</div>
</div>
</div>
In first div i need to make different 'left:' value. I want to make rule: after every iteration, value changes from base=304 to base+774 px. I tryed to do it somehow with {% cycle %} but it doesnt work for me, also tryed to set variables with {% with %} tag, but didnt find any information about how to update them.
You can set the style by multiplying the current counter from 0...n with 774 and add base value 304. For this, you'll need a custom template tag.
Create a templatetags directory in your app. Add an empty __init__.py and multiply_add.py.
multiply_add.py
from django import template
register = template.Library()
#register.simple_tag
def mul_add(a, b, base_value):
return (a * b) + base_value
template.html
{% load multiply_add %}
{% for adv in advs %}
<div class="media-item big" style="top: 18%;left:{% multiply_add forloop.counter0 774 304 %}px;">
<div class="media-item__tags">
{{ adv.year }}
{{ adv.payer}}
</div>
<div class="media-item__content">
<div class="media-item__background">
<div class="media-item__canvas">
<div class="media-item__canvas-background" style="background-image: url({{adv.image.url}})"></div>
</div>
<h2 class="topic white upcase fixed-size">{{ adv.name }}</h2>
Смотреть проект
</div>
</div>
</div>
I have an issue, I do not know why it is happening and how to solve it;
My app ask a user to create a project and is redirect directly to the project detail page. On that detail page if a team_id is empty I ask the user to create a team and when the team is created the user is redirected again to the project detail page to now be able to populate his team.
I used the code {% if Project.team_id == None %} when the user is redirected after creating his team but it is not working .. could you please help ? It is like before the redirection the new team is not saved in the Db ..
my html:
{% extends 'base.html' %}
{% block body %}
<div class="container">
<div class="jumbotron">
<h2>Welcome to your Project {{ project.name }} Detail page</h2>
</div>
{% if Project.team_id == None %}
<div class="invite-team">
<div class="jumbotron">
<div class="jumbo-text">
<h3>It is time to link a team to your project now create a new team and add team members</h3>
</div>
<div class="jumbo-button">
<span class="glyphicon glyphicon-plus"></span> Create a new team
</div>
</div>
{% else %}
<div class="invite-teammembers">
<div class="jumbotron">
<div class="jumbo-text">
<h3>The team {{ project.team_id }} has beed created, we now need to add TeamMembers</h3>
</div>
<div class="jumbo-button">
<span class="glyphicon glyphicon-plus"></span> Create a new team
</div>
</div>
</div>
{% endif %}
</div>
</div>
{% endblock%}
Looking at your surrounding code, you are using project as the container of your project. However, in your statement you are using Project (first character uppercase). Changing Project to project might help.
Your comment question:
what do you mean "Looking at your surrounding code, you are using project as the container of your project". my model Project is with a capital letter why now it is without ?
With looking at the surrounding code I mean that I literally looked at your code how you are using the variables in the other parts of your code. I am not sure if you are using CBV (class based views) or FBV (function based views).
With CBV the object is added to the context with the name defined in:
DetailView:81
or ListView:104
You can override the context object name by using the context_object_name in the View class
If you are using FBV, you have added it to the context manually as something like:
return render(request, 'myapp/template.html', {
'project': <project_query_or_variable>,
})
I'm trying to get information of a users avatar based in an extended profile model. I usually call the information via get_profile(). However on this occasion the call is within a for loop in the template and I get errors if one of the users are the same.
How would I go about avoiding this error?
{% for fevent in fevents %}
<!-- EVENT ><! -->
<div class="event">
<div class="pic">
{{ fevent.getPublishedPredictionsCount }}
<img src="{% thumbnail fevent.artwork.get_absolute_url 100x98 crop,upscale %}" alt="" width="100" height="98" />
<div class="overlay">
</div>
</div>
<h1>{{ fevent.title|trunchar:30 }}</h1>
{% autoescape off %}
{{ fevent.getEventPredictionScore|makestars }}
{% endautoescape %}
<ul class="details">
<li class="cat">
Category: {{ fevent.catagory }}
</li>
<li class="location">
{{ fevent.location }}
</li>
<li class="date">
{{ fevent.date_and_time }}
</li>
<li class="time">
7:00pm - 8:00pm
</li>
</ul>
<!-- CLEAR ><! --><div class="clear"></div>
<div class="hype">
<div class="avatar">
<img src="{% thumbnail fevent.owner.get_profile.avatar.get_absolute_url 120x120 crop,upscale %}" alt="" width="120" height="120" />
</div>
<p>{{ fevent.description|trunchar:200 }}… Read More</p>
</div>
<!-- CLEAR ><! --><div class="clear"></div>
</div>
<!-- END OF EVENT ><! -->
{% endfor %}
The problem is here:
{% thumbnail fevent.owner.get_profile.avatar.get_absolute_url 120x120 crop,upscale %}
Error Message returned:
Caught MultipleObjectsReturned while rendering: get() returned more than one UserProfile -- it returned 2! Lookup parameters were {'user__id__exact': 4L}
To expand on what Matt said, while using get_or_create is a good idea, you should definitely define your profile model's User link with a OneToOneField, instead of a ForeignKey.
user = models.OneToOneField(User, verbose_name=_(u'user'))
Now, if you forget to use get_or_create(), or somehow accidentally try to create a duplicate profile for the same user, the database will raise an IntegrityError.
That error means there are two UserProfile objects in the database matching the query used by get_profile, not that get_profile was called twice. You need to remove one of those profile objects from the database and make sure there aren't multiples created again. You should be able to use the get_profile method multiple times without issue. Maybe you have a get_or_create call in that function without checking the proper values.