Returning many objects on html page - Django 2.0 - django

I am returning the "comentarios" objects of the database through a for, but since the display of these objects takes up a lot of space in the html page, I would like to know how to divide the objects into more lists or into a hidden space, since when they pass from seven comments they exceed the size of the body.
template.html
{% extends 'baseR.html' %}
{% load static %}
{% block title %} Comentários - SMILE 3D {% endblock %}
{% block tamanho %} 2000px {% endblock %}
{% load bootstrap %}
{% block main %}
<div class="row b2">
<div class="col-1"></div>
<div class="col-10">
<h3 style="color:royalblue; font-weight:bold;">Pregão: </h3>
<hr>
<h2>{{msg}}</h2>
<br>
<ul style="list-sytle:none;">
<div class="container pregoes">
<li style="list-style:none;">
<p><strong>Dono: </strong>{{pregoe.usuario}}</p>
<p><strong>Tipo do pregão: </strong>{{ pregoe.tipo }}</p>
<p><strong>Dente: </strong>{{ pregoe.dente }}</p>
<p><strong>Cor: </strong>{{ pregoe.cor }}</p>
<p><strong>Escala: </strong>{{ pregoe.escala }}</p>
<p><strong>Material: </strong>{{ pregoe.material }}</p>
<p><strong>Observações: </strong>{{ pregoe.extra }}</p>
<p><strong>Preço inicial: </strong>R${{ pregoe.preco }}</p>
<p><strong>Data de registro: </strong><em>{{ pregoe.data }}</em></p>
<p><strong>Prazo: </strong><em>{{ pregoe.prazo }}</em></p>
</li>
</div>
<br>
<hr>
**<h3>Comentários: </h3>
{% for comentario in comentarios %}
<div class="container" style="background-color:gainsboro; padding-bottom:2px; padding-top:10px;">
<i class="far fa-times-circle" style="float: right;"></i>
<p><strong>{{comentario.user}}</strong> </p>
<p style="float:right;">{{comentario.comentario}}</p>
<div class="circle1">
<img src="../../media/{{comentario.user.foto}}" class="fotoPerfil img-fluid" style="max-width: 80px;">
</div>
</div>
<br>
{% endfor %}**
<br>
{{msg}}
NOVO COMENTÁRIO <i class="far fa-comment"></i>
</ul>
</div>
</div>
{% endblock %}
views.py
#login_required
def listaComentarios(request, id1, id2):
user = get_object_or_404(CustomUser, pk=id2)
pregao = get_object_or_404(Pregao, pk=id1)
comentarios = Comentario.objects.all().filter(pregao=pregao)
if user == pregao.usuario:
return render(request, 'comentarios/lista-comentarios-dono.html', {'comentarios': comentarios, 'pregoe': pregao})
return render(request, 'comentarios/lista-comentarios.html', {'comentarios': comentarios, 'pregoe': pregao})

You need to add pagination and you will receive your queryset by parts.
You can get information on about in official Django docs.
https://docs.djangoproject.com/en/2.1/topics/pagination/#using-paginator-in-a-view

Related

Customize next page in Django (pagination)

so I'm building a website in Django which have similarities with YouTube. I mean there will be some thumbnails and when you click on one of them it takes you to a page where the video will be played.
Now coming to the code since I don't wanna have to hard-code everything I opted to use the pagination but I have a problem cuz the pagination is doing everything automatically and I can't change the thumbnails for the next page. So either my analysis is wrong or there a way to do it correctly.
Here's the code for the template:
{% load static %}
{% block content %}
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 mb-5">
<div class="col">
<div class="card shadow-sm">
<a href="{% url 'watch1' %}" target="_blank"> <img src="{% static 'thumbnails/hacker.jpeg' %}" height="225"
width="100%"></a>
<div class="card-body">
<p class="card-text">
{% for element in page_obj %}
{% if element.category == 'boxing' %}
{{ element.description|truncatechars:50 }}
{% endif %}
{% endfor %}
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<a href="{% url 'watch2' %}" target="_blank"> <img src="{% static 'thumbnails/hydra.jpg' %}" height="225"
width="100%"></a>
<div class="card-body">
<p class="card-text">
{% for element in page_obj %}
{% if element.category == 'boxing' %}
{{ element.description|truncatechars:50 }}
{% endif %}
{% endfor %}
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
<a href="{% url 'watch3' %}" target="_blank"> <img src="{% static 'thumbnails/darkweb.jpg' %}" height="225"
width="100%"></a>
<div class="card-body">
<p class="card-text">
{% for element in page_obj %}
{% if element.category == 'boxing' %}
{{ element.description|truncatechars:50 }}
{% endif %}
{% endfor %}
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
<div class="pagination">
<span class="step-links">
{% if page_obj.has_previous %}
« first
previous
{% endif %}
<span class="current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
</span>
{% if page_obj.has_next %}
next
last »
{% endif %}
</span>
</div>
{% endblock%}
the function in the view
def boxing(request):
videos = Video.objects.all()
paginator = Paginator(videos, 3) # shows 3 videos per page
pageNumber = request.GET.get('page')
try:
page_obj = paginator.get_page(pageNumber)
except:
page_obj = paginator.get_page(1)
return render(request, 'boxing.html', {'page_obj': page_obj})
And my loop is also displaying the same thing for everything. I could just use an if statement to pick exactly which video I want but with the pagination happening it'll do the same thing on the next page as well.

why when I click a different user returns me back to the current request user?

sorry, I had to take some screenshots to explains what is going on with me. now, I have much profile that has many different users and when I log in with one of it I'll assume the username is: medoabdin like you find on the screenshot now (medoabdin) and the name of it is (Origin) for me is a current user request. so, now I have also many different questions created by the different users, and when I want to enter any other profile let's suppose the user is (abdelhamedabdin) by current request user it returns me back to the current request (medoabdin) and not returns me back to abdelhamedabdin.
however, when I check the link URL I find the link is correct and when I log in with (abdelhamedabdin) user I see the same thing occurs to me against (medoabdin) so, can anyone tell me what is going on guys?
these are screenshots:
current request (medoabdin),
several questions,
show the link url for different users,
accounts/profile.html
{% extends 'base.html' %}
{% block title %} {{ user.first_name }} {{ user.last_name }} Profile {% endblock %}
{% block body %}
<!-- User Profile Section -->
{% if user.is_authenticated %}
<div class="profile">
<div class="container-fluid">
<div class="col-md-1">
<div class="thumbnail">
<div class="row">
<div class="col-xs-12">
<!-- Profile View Section -->
<div class="logo-image text-center">
{% if user.userprofile.logo %}
<div class="my-image">
{% if request.user.username == user.userprofile.slug %}
<a href="{% url 'accounts:user_image' user.userprofile.slug %}">
<img class="img-responsive" src="{{ user.userprofile.logo.url }}">
</a>
<span>
<a href="{% url 'accounts:add_avatar' user.userprofile.slug %}" class="fa fa-camera fa-1x text-center">
<p>Upload Image</p>
</a>
</span>
{% endif %}
</div>
{% else %}
{% load static %}
<div class="my-image">
<img class="img-responsive img-thumbnail" src="{% static 'index/images/default-logo.jpg' %}">
<span>
<a href="{% url 'accounts:add_avatar' user.userprofile.slug %}" class="fa fa-camera fa-1x text-center">
<p>Upload Image</p>
</a>
</span>
</div>
{% endif %}
{% if user.first_name != '' and user.last_name != '' %}
<h4>{{ user.first_name }} {{ user.last_name }}</h4>
{% else %}
<h4>User Profile</h4>
{% endif %}
</div>
</div>
<div class="col-xs-12">
<div class="caption">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">Overview</li>
<li role="presentation" class="">Personal Information</li>
<li role="presentation" class="">Skills</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Information Sections -->
<div class="col-md-8 col-md-offset-3 information">
<div class="overview show" id="overview">
<h2 class="line">Overview</h2>
<p class="lead">{{ user.userprofile.overview }}</p>
<a data-placement="bottom" title="update overview" class="fa fa-edit" data-toggle="modal" data-tooltip="tooltip" data-target=".overview_info"></a>
</div>
<div class="personal-info" id="personal-information">
<h2 class="line">Personal Information</h2>
<p class="lead">City: {{ user.userprofile.city }}</p>
<p class="lead">Phone Number: 0{{ user.userprofile.phone }}</p>
<p class="lead">Sex: {{ user.userprofile.sex }}</p>
<a data-placement="bottom" title="update personal information" class="fa fa-edit" data-toggle="modal" data-tooltip="tooltip" data-target=".personal_info"></a>
</div>
<div class="skill" id="my-skills">
<h2 class="line">Skills:</h2>
<p class="lead">{{ user.userprofile.skill }}</p>
<a data-placement="bottom" title="update skills" class="fa fa-edit" data-toggle="modal" data-tooltip="tooltip" data-target=".skills"></a>
</div>
</div>
<!-- get all questions -->
{% if user_prof.userasking_set.all %}
<div class="col-md-8 col-md-offset-3 user_questions">
<h2 class="line">All Questions You Asked</h2>
{% for questions in user_prof.userasking_set.all %}
<p>{{ questions.title }}</p>
{% endfor %}
</div>
{% endif %}
<!-- get favourites -->
{% if get_favourite %}
<div class="col-md-8 col-md-offset-3 user_questions">
<h2 class="line">Favourites</h2>
{% for fav in get_favourite %}
<p>{{ fav.title }}</p>
{% endfor %}
</div>
{% endif %}
</div>
{% include 'accounts/information_form.html' %}
</div>
{% include 'base_footer.html' %}
{% endif %}
{% endblock %}
accounts/views.py
#method_decorator(login_required, name='dispatch')
# view profile page
class ViewProfile(UpdateView):
queryset = UserProfile.objects.all()
template_name = 'accounts/profile.html'
form_class = UpdateInfoForm
slug_field = 'slug'
slug_url_kwarg = 'user_slug'
def get_success_url(self):
return reverse_lazy('accounts:view_profile', kwargs={'user_slug': self.request.user.userprofile.slug})
def get_context_data(self, **kwargs):
self.request.session['switch_comment'] = False
context = super().get_context_data(**kwargs)
user_prof = UserProfile.objects.get(user=self.request.user)
context['user_prof'] = user_prof
context['get_favourite'] = User.objects.get(username=self.request.user.username).favorite.all()
return context
def form_valid(self, form):
form.instance.user_slug = self.request.user.userprofile.slug
self.object = form.save()
return super().form_valid(form)
community/views.py
# List all questions + search
class UserQuestions(ListView):
template_name = 'community/user_questions.html'
context_object_name = 'all_objects'
queryset = UserAsking
def get_context_data(self, object_list=queryset, **kwargs):
context = super().get_context_data(**kwargs)
# paginator
context['all_objects'] = UserAsking.objects.all()
paginator = Paginator(context['all_objects'], 5)
page_number = self.request.GET.get('page_number')
context['all_objects'] = paginator.get_page(page_number)
# search
context['query'] = self.request.GET.get("query", '')
if context['query']:
all_objects = UserAsking.objects.all().order_by('-date')
context['all_objects'] = all_objects.filter(
Q(title__contains=self.request.GET['query']) |
Q(question__contains=self.request.GET['query']) |
Q(field__contains=self.request.GET['query'])
)
return context
community/user_questions.py
{% extends 'base.html' %}
{% block title %} All Questions That People Asked {% endblock %}
{% block body %}
{% if request.user.is_authenticated %}
<div class="all-questions">
<div class="container">
<div class="fl-left hidden-sm hidden-xs">
<h2>All Questions</h2>
</div>
<div class="fl-right hidden-sm hidden-xs">
Ask Question
</div>
<div class="clear"></div>
<div class="row">
<div class="add-q">
<div class="col-sm-12 visible-sm-block visible-xs-block">
<h2>All Questions</h2>
</div>
<div class="col-sm-12 visible-sm-block visible-xs-block">
Ask Question
</div>
</div>
{% if all_objects %}
<div class="col-sm-12">
<div class="questions">
{% for post in all_objects %}
<div class="q_section">
<a class="text-primary title" href="{% url 'community:question_view' post.ask_slug %}">{{ post.title }}</a>
<p class="field">{{ post.field }}</p>
<div class="info fl-right">
<span class="time">{{ post.date }}</span> |
<a href="{% url 'accounts:view_profile' post.userprofile.slug %}" style="font-size:14px">
{% if post.userprofile.user.first_name != '' %}
{{ post.userprofile.user.first_name }}
{% else %}
User
{% endif %}
<img class="logo-image" style="width:25px;height: 25px" src="
{% if request.user.userprofile.logo %}
{{ request.user.userprofile.logo.url }}
{% else %}
{% load static %}
{% static 'index/images/default-logo.jpg' %}
{% endif %}
">
</a>
</div>
<div class="">
<!--a class="btn btn-primary btn-lg" href="{# {% url 'community:delete_post' post.id %} #}">
<i class="fa fa-trash x2"></i>
</a-->
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
<h2 class="text-center text-info">No Questions</h2>
{% endif %}
</div>
<!-- Pagination -->
{% if all_objects %}
<div class="pagination">
<span class="step-links">
{% if all_objects.has_previous %}
« first
previous
{% endif %}
<span class="current">
Page {{ all_objects.number }} of {{ all_objects.paginator.num_pages }}.
</span>
{% if all_objects.has_next %}
next
last »
{% endif %}
</span>
</div>
{% endif %}
</div>
</div>
{% include 'base_footer.html' %}
{% endif %}
{% endblock %}

Image ids apparently not being created

I have created a template for displaying a photo gallery and giving users the ability to add photos to that gallery:
{% extends 'nowandthen/base.html' %}
{% block body_block %}
<br>
<br>
{% if pictures %}
<ul>
{% for p in pictures %}
<div class="container">
<div class="row">
<div class="col-md-8 card mb-4 mt-3 ">
<!-- Card -->
<!-- Card content -->
<div class="card-body d-flex flex-row">
<!-- Content -->
<div>
<!-- Title -->
<h4 class="card-title font-weight-bold mb-2">{{ p.title }}</h4>
<!-- Subtitle -->
<p class="card-text"><i class="far fa-clock pr-2"></i>{{ p.when_added }}</p>
</div>
</div>
<!-- Card image -->
<div class="view overlay">
<img class="card-img-top rounded-0" src="{{ p.image.url }}" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body">
<div class="collapse-content">
<!-- Text -->
<p class="card-text collapse" id="collapseContent">{{ p.description }}</p>
<!-- Button -->
<a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse" href="#collapseContent" aria-expanded="false" aria-controls="collapseContent">Click for description</a>
<i class="fas fa-share-alt text-muted float-right p-1 my-1" data-toggle="tooltip" data-placement="top" title="Share this post"></i>
<i class="fas fa-heart text-muted float-right p-1 my-1 mr-3" data-toggle="tooltip" data-placement="top" title="I like it"></i>
</div>
</div>
<div class="card-body">
<!-- comments -->
<h2>comments</h2>
{% if not p.comments %}
No comments
{% endif %}
{% for x in p.comment %}
<div class="comments" style="padding: 10px;">
<p class="font-weight-bold">
<h4>Comment by</h4> {{ x.user }}
<span class=" text-muted font-weight-normal">
{{ x.created_on }}
</span>
</p>
{{ x.body | linebreaks }}
</div>
{% endfor %}
</div>
<div class="card-body">
{% if new_comment %}
<h2>Your comment has been posted.</h2>
{% else %}
<h3>Leave a comment</h3>
<form action="{% url 'nowandthen:add_comment' p.image_id %}" method="POST">
{{ comment_form.as_p }}
{% csrf_token %}
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
{% endif %}
</div>
</div>
</div>
</div>
<!-- Card -->
{% endfor %}
</ul>
{% else %}
<li><strong>There are no photographs present.</strong></li>
{% endif %}
{% endblock %}
The idea is that there is an image associated with each comment - there is a for loop of {% for p in pictures %} at the start of the page, and I use variations of p. (e.g. p.image_id) to associate particular pictures with particular comments.
In addition, the urls.py contains the following:
path('add_comment/<int:p.image_id>', views.add_comment, name='add_comment')
However, when I run the code, I get an error message that suggests that image ids aren't being created (even though image is a field in he Pictures model I created):
Reverse for 'add_comment' with arguments '('',)' not found. 1 pattern(s) tried: ['add_comment/$']
What do you suggest, please?
EDIT: This is my view:
#login_required
def add_comment(request, image_id):
new_comment = None
template_name = 'add_comment.html'
image = get_object_or_404(Picture, id=image_id)
comment = image.comments.filter(active=True)
new_comment = None
# Comment posted
if request.method == 'POST':
comment_form = CommentForm(data=request.POST)
if comment_form.is_valid():
# Create Comment object and don't save to database yet
new_comment = comment_form.save(commit=False)
# Assign the current post to the comment
new_comment.post = post
# Save the comment to the database
new_comment.save()
else:
comment_form = CommentForm()
context = {'image': image,'comment': comment, 'new_comment': new_comment,'comment_form': comment_form}
return render(request, template_name, context)
And this is my add_comment.html template:
{% extends 'nowandthen/base.html' %}
{% load staticfiles %}
{% block title_block %}
Add self
{% endblock %}
{% block body_block %}
<h1>Add a Comment</h1>
<div>
<form id="comment_form" method="post" action="{% url 'nowandthen:add_comment' comment_id%}" enctype="multipart/form-data" >
{% csrf_token %}
{{ form.as_p }}
<input type="submit" name="submit" value="Add Comment" />
</form>
</div>
{% endblock %}
Since you pictures variable is a Queryset, when you loop through it in your template, to access its ID, you just need to do it that way. instance.id
Based on your case, you will have:
{% url 'nowandthen:add_comment' p.id %}
And you will be able to access the id in your view with image_id

Django page navigation- home list not visible

I am super new to Dango; pardon me for a rookie question :)
I am learning Django by creating a "Note taking app". This is how the application home page looks.
When I click on any of the notes from the note list, it opens the details on the right-side page. But the problem is it wipes-out the left-hand side note list. To reload the list I need to click on the Home link again. The expected behavior is, it should retain the note-list on the left side as well as show the details on the right frame.
urls.py
from django.urls import path
from .views import NoteListView, NoteDetailView, NoteCreateView, NoteUpdateView, NoteDeleteView
from . import views
urlpatterns = [
path('', NoteListView.as_view(), name='lekha-home'),
path('note/<int:pk>/', NoteDetailView.as_view(), name='note-detail'),
path('note/new/', NoteCreateView.as_view(), name='note-create'),
path('note/<int:pk>/update', NoteUpdateView.as_view(), name='note-update'),
path('note/<int:pk>/delete', NoteDeleteView.as_view(), name='note-delete'),
path('about/', views.about, name='lekha-about'),
]
enter code here
views.py
class NoteListView(ListView):
model = Note
template_name = 'lekha/home.html'
context_object_name = 'notes'
ordering = ['-date_created']
class NoteDetailView(DetailView):
model = Note
# success_url = 'lekha/note_detail.html'
class NoteCreateView(LoginRequiredMixin, CreateView):
model = Note
fields = ['title', 'content']
def form_valid(self, form):
form.instance.author = self.request.user
return super().form_valid(form)
home.html
{% extends "lekha/base.html" %}
{% block content %}
{% for note in notes %}
<div class="list-group">
{{ note.title }}
</div>
{% endfor %}
{% endblock content %}
note_detail.html
{% extends "lekha/base.html" %}
{% block content2 %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-8" href="#">{{ object.author }}</a>
<small class="text-muted">{{ object.date_created|date:"F d, Y" }}</small>
{% if object.author == user %}
<a class="btn float-right btn-secondary ml-1 btn-sm" href="{% url 'note-update' object.id %} ">Update</a>
<a class="btn float-right btn-danger ml-1 btn-sm" href="{% url 'note-delete' object.id %} ">Delete</a>
{% endif %}
</div>
<h4 class="article-title">{{ object.title }}</h4>
<hr>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
{% endblock content2 %}
And this is how I am calling it in base.html
<main role="main" class="container-fluid px-2">
<div class="row">
<div class="col-md-3">
<div class="content-section">
<h4>Notes</h4>
{% block content %}{% endblock %}
</div>
</div>
<div class="col-md-8">
{% block content2 %}{% endblock %}
</div>
</div>
</main>
Sorry for the detailed post. I would appreciate any pointers. Thanks!
Welcome to Django!
Your template note_detail.html extends base.html, which doesn't contain the HTML for the list of notes, and note_detail.html doesn't add the list, so that's why it's not showing up - you haven't added it!
To do this, you need the same {% block content %} from home.html in note_detail.html, and you also need to manually pass a notes context variable to the template. You get that for free with the ListView class.
First, the change to the template:
note_detail.html
{% extends "lekha/base.html" %}
{% block content %}
{% for note in notes %}
<div class="list-group">
{{ note.title }}
</div>
{% endfor %}
{% endblock content %}
{% block content2 %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-8" href="#">{{ object.author }}</a>
<small class="text-muted">{{ object.date_created|date:"F d, Y" }}</small>
{% if object.author == user %}
<a class="btn float-right btn-secondary ml-1 btn-sm" href="{% url 'note-update' object.id %} ">Update</a>
<a class="btn float-right btn-danger ml-1 btn-sm" href="{% url 'note-delete' object.id %} ">Delete</a>
{% endif %}
</div>
<h4 class="article-title">{{ object.title }}</h4>
<hr>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
{% endblock content2 %}
And the change to the view:
views.py
class NoteListView(ListView):
model = Note
template_name = 'lekha/home.html'
context_object_name = 'notes'
ordering = ['-date_created']
class NoteDetailView(DetailView):
model = Note
def get_context_data(self):
data = super().get_context_data
data['notes'] = Note.objects.all().order_by('-date_created')
One last tip: to keep your HTML templates "DRY," you should really extract the list of notes into a separate html template (often called a partial) that you can plug into multiple other templates. Your template setup would look like this:
partials/all_notes.html
{% for note in notes %}
<div class="list-group">
{{ note.title }}
</div>
{% endfor %}
home.html
{% extends "lekha/base.html" %}
{% block content %}
{% include 'lekha/partials/all_notes.html' %}
{% endblock content %}
note_detail.html
{% extends "lekha/base.html" %}
{% block content %}
{% include 'lekha/partials/all_notes.html' %}
{% endblock content %}
{% block content2 %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-8" href="#">{{ object.author }}</a>
<small class="text-muted">{{ object.date_created|date:"F d, Y" }}</small>
{% if object.author == user %}
<a class="btn float-right btn-secondary ml-1 btn-sm" href="{% url 'note-update' object.id %} ">Update</a>
<a class="btn float-right btn-danger ml-1 btn-sm" href="{% url 'note-delete' object.id %} ">Delete</a>
{% endif %}
</div>
<h4 class="article-title">{{ object.title }}</h4>
<hr>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
{% endblock content2 %}
base.html
<main role="main" class="container-fluid px-2">
<div class="row">
<div class="col-md-3">
<div class="content-section">
<h4>Notes</h4>
{% block content %}{% endblock %}
</div>
</div>
<div class="col-md-8">
{% block content2 %}{% endblock %}
</div>
</div>
</main>

Django fontsize tinymce

I am trying to use django tinymce in my project but the font is too small. I have googled it and learned I am meant to use content_css but without proper step by step approaches as to how exactly this should be done.
I am wondering if there was another way and if there isn't, could someone give me a simple step by step approach to solving it using the content_css.
Below is the forms.py
class PostForm(forms.ModelForm):
text = forms.CharField(help_text='Enter your Post here', widget=TinyMCE(attrs={'cols': 80, 'rows': 10}))
name = forms.CharField(widget=forms.HiddenInput(), initial='User')
created_on = forms.DateTimeField(widget=forms.HiddenInput(), initial=timezone.now())
class Meta:
model = Post
fields = ('title', 'text',)
{% extends 'blog/base.html' %}
{% load staticfiles %}
{% block body_block %}
<!-- <h1>TinyMCE Quick Start Guide</h1>
<form method='post'>
<textarea id = 'mytextarea'>Hello, World!</textarea>
</form> -->
{% if post %}
<div class="single">
<div class="container">
<div class="col-md-8 single-main">
<div class="single-grid">
<h4>{{ post.title|safe }}</h4>
<img src="{% static 'images/post1.jpg' %}" alt=""/>
<p>{{ post.text|safe }}</p>
</div>
<div class="comments">
<h2><u>Comments</u></h2>
{% if comments %}
{% for comment in comments %}
<h3>~{{ comment.commenter.first_name|title}} {{comment.commenter.last_name|title }}</h3>
<ul>
<li>
{{ comment.text|safe }}
</</li><br>
</ul>
<span class="hidden-xs"style="margin-left:70%;, font-family:Arial">Published: {{ comment.created_on }}</span >
{% if comment.commenter == request.user or user.is_superuser %}
<button style="margin-left:90%;,line-height: .9;color: red;, font-family:Arial;" type="button" name="button">Delete</button>
{% endif %}
{% endfor %}
{% else %}
No comments available
{% endif %}
</div>
<div class="content-form">
<h3>Leave a comment</h3>
{% if user.is_authenticated %}
<form id="comment_form" action="{% url 'blog:detail' post.slug %}" method="post">
{% csrf_token %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% for field in form.visible_fields %}
{{ field.errors }}
{{ field }}<br/><br/>
{% endfor %}
<input class="btn btn-primary" type="submit" name="submit" value="submit">
</form>
{% else %}
You must be logged in to comment
{% endif %}
</div>
<ul class="comment-list " >
<h5 class="post-author_head">Written by {{ post.author.first_name|title }} {{ post.author.last_name|title }}</h5>
<li><img src="{% static 'images/avatar.png' %}" class="img-responsive" alt="">
<div class="desc">
<p>View all posts by: {{ post.author.first_name|title }} {{ post.author.last_name|title }}</p>
</div>
<div class="clearfix"></div>
</li>
</ul>
</div>
<div class="col-md-4 side-content">
<div class="recent">
<h3>RECENT POSTS</h3>
{% if recent_posts %}
<ul>
{% for post in recent_posts %}
<li>{{post.title|title }}</li>
{% endfor %}
</ul>
{% else %}
<li>No post has been posted</li>
{% endif %}
</div>
<div class="comments">
<h3>RECENT COMMENTS</h3>
{% if recent_comments %}
<ul>
{% for comment in recent_comments %}
<li>{{comment.commenter|title}} on {{comment.post|title}}</li>
{% endfor %}
</ul>
{% else %}
<li>No comments at the moment</li>
{% endif %}
</div>
<div class="clearfix"></div>
<div class="archives">
<h3>ARCHIVES</h3>
<ul>
<li>October 2013</li>
<li>September 2013</li>
<li>August 2013</li>
<li>July 2013</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
{% if comment.commenter == request.user or user.is_superuser %}
<button style="margin-left:90%;,line-height: .9;color: red;, font-family:Arial;" type="button" name="button">Delete Post</button>
<button style="margin-left:90%;,line-height: .9;color: red;, font-family:Arial;" type="button" name="button">Edit Post</button>
{% endif %}
{% else %}
asadsh
{% endif %}
{% endblock %}
To add content css files to tinymce, you have to change the tinymce.init object value to include your content_css.
Search for the initialization call in your script and add a line to your object like in this example:
tinymce.init({
...
content_css: [
'//example.com/js/your-css-here.css'
],
...
});
If a content_css part is already present, just add the URL to the array, i.e.
['url 1 here', 'url 2 here', 'your new url here']
In your custom css file, you can now set your desired font size, i.e.
body { font-size: 14px; }