I'm using Wagtail for a blog site with auto-populating blog links on a listing page.
However, when I click the link for the blog page, it adds a '#' to the address bar.
So, for example, I am working on localhost with the blog address of http://127.0.0.1:8000/blog/ and once I click on the blog link, with slug blog-slug, I get http://127.0.0.1:8000/blog/#/blog-slug. I am not sure why it is adding the hash tag at a location even behind the parent page 'blog'.
This is the code I have on the blog listing template:
{% for post in all_posts %}
<figure class="item standard" data-groups='["all"{% for tag in post.tags.all %},"{{tag}}"{% endfor %}]'>
<div class="portfolio-item-img">
{% image post.blog_image max-350x200 as img %}
<img src="{{img.url}}" alt="{{img.alt}}" title="">
<!-- Blog slug -->
<br>
<i class="{{post.icon}}"></i>
<p>{{post.gallery_text|safe|truncatewords:30}}</p>
</div>
<h4 class="name">
{{post.title}}
</h4>
<div class="post-info">
<div class="post-date">
<strong>Tags:</strong>
{% for tag in post.tags.all %}| {{tag}} |{% endfor %}
</div>
<div class="post-date">{{post.published_date}}</div>
</div>
</figure>
{% endfor %}
Any ideas what could be going wrong?
You likely have some Javascript that does that to links that have the (rather telltale named) ajax-page-load class.
Related
Based on an answer to my previous question here , I learned about pagination in Django and I can go to next pages after clicking on Next .
Views:
def All( request ):
p=product.objects.all()
pa=Paginator(p,20)
page=request.GET.get('page')
pro=pa.get_page(page)
return render(request,'home.html',{'pro':pro})
Template:
<div class="grid">
{%for p in pro%}
<div class='card'>
<img src="{{p.image}}"></img>
<p id="id">{{p.description}}</p>
<a href="{{p.buy}}" target='_blank' rel='noopener noreferrer'>
<button ><span class="price"> ${{p.price}}</span> buy</button>
</a>
</div>
{%endfor%}
{% if pro.has_next %}
Next
{% endif %}
</div>
This code wants to show me the next pages:
{% if pro.has_next %}
Next
{% endif %}
Is there a way to achieve what that code wants to do with scrolling down instead of clicking on Next?
I am using django-ckeditor as a WYSIWYG text editor when creating posts. It captures and saves the content and the correct HTML tags without any problem. However, my template renders the variable surrounded by <p> tags, which ruins the RichTextField because <p> tags cannot be nested. As a result, it was showing all of the text (with tags) as a paragraph with no formatting. I realized that this was happening, so I changed the surrounding tags in my template to <div> tags, but when the template is loaded on the browser, it replaces the div tags with paragraph tags again. How can I get rid of the <p> tags so that my text is rendered with the correct formatting?
Here is my template:
{% extends 'bandwagon/base.html' %}
{% block content %}
<article class="media content-section">
<img src="{{ post.author.profile.image.url }}" alt="profile photo" class="rounded-circle article-img">
<div class="media-body">
<img src="{{ post.image.url }}" class="post-img">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' object.author.username %}">{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted | date:'F d, Y'}}</small>
{% if object.author == user %}
<div>
Edit
Delete
</div>
{% endif %}
</div>
<h2 class='article-title-detail'>{{ object.title }}</h2>
<div class="article-content">{{ object.content | safe }}</div>
</div>
</article>
{% endblock content %}
However, in the browser, the response is this:
<p class="article-content"><h3>Fake Content</h3>
<h3><span style="font-size:13px">Fake Content</span></h3></p>
By default CKEditor RichTextField adds <p> tags around the content of the field.
If that's the reason you keep seeing <p> around your content, you can customizing your CKEditor editor, so it will not add the <p> like this:
#base.py
CKEDITOR_CONFIGS = {
'default': {
'autoParagraph': False
},
}
You can also create a specific configuration and set specific fields to use it.
read more about it here: https://django-ckeditor.readthedocs.io/en/latest/#optional-customizing-ckeditor-editor
I'm learning Django by making a news / blog web app. On my home page i would like to list my articles so i made a simple template with this :
{% for article in last_articles %}
<div class="article">
<h3>{{ article.title }}</h3>
<p>{{ article.content | truncatewords_html:80 | safe }}</p>
<p>Read More </p>
</div>
<br/>
<hr/>
{% empty %}
<p>Nothing for the moment</p>
{% endfor %}
The problem is that I have some pictures on my article.content so my question is : Is there a way to remove them like truncatewords but for picture. I didn't find solutions on official doc.
Thanks
I've a list of "nanas" (babysitters) that I render correctly. Now I need that when someone clicks on one of them , a detail page (for only the clicked nana opens).
I think my problem is on my template for all the Nanas, in the href:
<a href="{% url 'app-administrador:nana' nana.id %}">
Or in the Urls.
All Nanas page:
This is listing nanas View:
class NanasView(View):
def get(self, request):
nanas = Nana.objects.all()
context = {'nanas': nanas}
return render(request, 'app_administrador/nanas-registradas.html', context)
It's URL:
url(r'^referencias_de_nanas', views.NanasReferenciasView.as_view(), name='referencias_de_nanas'),
All Nanas templates:
{% extends 'app_administrador/templates/base.html' %}
{% load staticfiles %}
{% block content %}
<!-- Member Entries -->
{% for nana in nanas %}
<!-- Single Member -->
<div class="member-entry">
<a href="extra-timeline.html" class="member-img">
<i class="entypo-forward"></i>
</a>
<div class="member-details">
<a href="{% url 'app-administrador:nana' nana.id %}">
<h4>
<p href="extra-timeline.html">{{ nana.nombre }} {{ nana.apellido_paterno }} {{ nana.apellido_materno }}</p>
{% if nana.foto %}
<img src="{{ nana.foto.url }}" class="img-rounded" width="160px"/>
{% endif %}
</h4>
<!-- Details with Icons -->
<div class="row info-list">
<div class="col-sm-4">
<i class="entypo-briefcase"></i>
<a href={{ nana.antecedentes_policiales }}>Antecedentes policiales</a>
</div>
<div class="col-sm-4">
<i class="entypo-twitter"></i>
#johnnie
</div>
<div class="col-sm-4">
<i class="entypo-facebook"></i>
fb.me/johnnie
</div>
<div class="clear"></div>
<div class="col-sm-4">
<i class="entypo-location"></i>
{{ nana.direccion }}
</div>
<div class="col-sm-4">
<i class="entypo-mail"></i>
{{ nana.correo }}
</div>
<div class="col-sm-4">
<i class="entypo-linkedin"></i>
johnkennedy
</div>
</div>
</a>
</div>
</div>
{% endfor %}
{% endblock %}
Nana's detail page:
My try on showing the detail page for clicked nana:
class NanasValidarReferenciasView(View):
def get(self, request, nana_id):
# nana_id_is = nana_id
nana = Nana.objects.get(id=nana_id)
context = {'nana': nana}
return render(request, 'app_administrador/validar-referencias-nana.html', context)
It's URL:
url(r'^nana', views.NanasValidarReferenciasView.as_view(), name='nana'),
You see your href looks like this: <a href="{% url 'app-administrador:nana' nana.id %}"> which is totally fine. This means that the url link adds the two string together into one address. I don't know exactly how your urls are set up so it could look something like this:
root_url/2
Where root_url is whatever you have and 2 is the nana.id. To pass that to the url-view, it needs to accept any integer variable. Something like this:
urls.py
url(r'^nana/(?P<nana_id>\d+)/$', views.nanas_specific, name='nana'),
The P stands for Parameter, and it uses Regex logic if you want to look that up.
Then in your views, you can have a function ready to accept the parameter:
views.py
def nanas_specific(request, nana_id):
Where nana_id contains the result from the urls parsing.
I mostly work with function based views, but I'm assuming the same logic applies to classbased views. The id is not part of the URL and hence is not passed on. Change the url to
url(r'^nana/(?P<nana_id>\d+)/$', views.NanasValidarReferenciasView.as_view(), name='nana'),
I am using django-endless-pagination with twitter style pagination and twitter bootstrap on my website.
Now, with django-endless-pagination, when the first page is displayed, system is using the below style.
.row-fluid .offset1:first-child {
margin-left: 8.547008547008547%;
}
But from the second page onwards, the style used for the first element is as below.
.row-fluid .offset1 {
margin-left: 11.11111111111111%;
}
As the margin-left is different for both pages first element, the rows are not aligned between page 1 and page 2. How do i change this, so that second page first element also uses first-child style and it is aligned.
Edit :-
My code looks like below in the template
<div class="offset1 span10">
<div class="span4">
{% lazy_paginate column_1_items_list %}
{% if column_1_items_list %}
{% for column_1_item in column_1_items_list %}
<div class="row-fluid image_div" style="padding-top:20px">
<h4 class="text-center">name_of_item</h4>
<a target="_blank" href="link_for_item">
<img class="item-size" src="photo.url" alt="name_of_item "/>
</a>
<p> quick_summary|safe </p>
<div class="row-fluid bottom">
<span class="price"><b>£ price</b></span>
</div>
</div>
{% endfor %}
{% endif %}
{% show_more " " %}
</div>
</div>
Thanks
Sreekanth
You could probably just use forloop.first and add a class to your css.
{% for column_1_item in column_1_items_list %}
<div class="row-fluid image_div{% if forloop.first %} first_child{% endif %}" style="padding-top:20px">
...
{% endfor %}