Change code to expand blog entry on Shopify Couture theme (Django?) - blogs

Hi does anyone know how to update the code below so that blog 'excerpts' are fully expanded with full text and image/video removing the need to click through?
Thanks,
David
div id="blog" class="clearfix">
{% paginate blog.articles by settings.pagination_limit %}
<div class="more-info clearfix">
<span class="upper">{{ blog.title }}</span>
<span class="lower">{{ blog.articles_count }} {{ blog.articles_count | pluralize: 'Article', 'Articles' }}</span>
</div>
{% for article in blog.articles %}
<div class="article clearfix">
<div class="content">
<h4>{{ article.title }}</h4>
{{ article.content | strip_html | truncatewords:70 }}
</div>
</div> <!-- /.article -->
{% endfor %}
</div> <!-- /.main -->
{% include 'sidebar' %}
</div> <!-- /.articles -->
{% include 'pagination' %}
{% endpaginate %}
</div> <!-- /#blog -->
{% include 'featured-products' %}

Aha! It’s written with Liquid (http://liquidmarkup.org/). The truncatewords method takes the article’s content and shortens it to a maximum of 70 words. Removing that method call should fix the problem. There’s also a strip_html method that seems to remove any HTML from an article’s content. If there’s any HTML in the blog post that displays images or videos, this method may be to blame for removing them. This may fix your problem:
<div id="blog" class="clearfix">
{% paginate blog.articles by settings.pagination_limit %}
<div class="more-info clearfix">
<span class="upper">{{ blog.title }}</span>
<span class="lower">{{ blog.articles_count }} {{ blog.articles_count | pluralize: 'Article', 'Articles' }}</span>
</div>
{% for article in blog.articles %}
<div class="article clearfix">
<div class="content">
<h4>{{ article.title }}</h4>
{{ article.content }}
</div>
</div> <!-- /.article -->
{% endfor %}
</div> <!-- /.main -->
{% include 'sidebar' %}
</div> <!-- /.articles -->
{% include 'pagination' %}
{% endpaginate %}
</div> <!-- /#blog -->
{% include 'featured-products' %}

Related

Receiving 'invalid form: crispy' error when trying to use crispy forms filter on a form in Django, but only in one django app and not the other?

When trying to use the crispy filter I receive an error:
django.template.exceptions.TemplateSyntaxError: Invalid filter:
'crispy'
I believe this is because Django can for some reason not locate the crispy filter, since when I put in the name of a filter that did not exist I received the same error.
I have used {% load crispy_forms_tags %} at the top of the html document and use {{ form|crispy }} to apply the filter. I have also added the 'crispy forms' app to the settings.py file, and installed the django-crispy-forms package with pip, which I can clearly see using pip freeze.
PLEASE NOTE that the crispy forms filter does work in a different django app for my website, even though I don't think I altered anything in that app's directory (but I could be wrong it's been awhile since I worked in that directory). I can't figure out what's different. I read something about filters attaching to the first app directory it can and that's it, but that info was vague, and when I removed the {% load crispy_forms_tags %} line from the template that used it, the crispy filter still wouldn't work in the new app.
This is the template.
{% extends "breed_identifier/base.html" %}
(% load crispy_forms_tags %)
{% block content %}
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Join Today</legend>
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Sign Up</button>
</div>
</form>
<div class="border-top pt-3">
<small class="text-muted">
Already Have An Account? <a class="ml-2" href="#">Sign In</a>
</small>
</div>
</div>
{% endblock content %}
This is in my settings.py file.
INSTALLED_APPS = [
'users.apps.UsersConfig',
'django.contrib.admin',
'breed_identifier.apps.BreedIdentifierConfig',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'crispy_forms',
]
I had the same problem but was resolved after loading crispy {% load crispy_forms_tags %} form at the top of my templates
{% extends 'base.html' %} {% block content %}
{% load crispy_forms_tags %}
<div class="container">
<div class="row">
<div class="col-md-8 card mb-4 mt-3 left top">
<div class="card-body">
<h1>{% block title %} {{ post.title }} {% endblock title %}</h1>
<p class=" text-muted">{{ post.author }} | {{ post.created_on }}</p>
<p class="card-text ">{{ post.content | safe }}</p>
</div>
</div>
{% block sidebar %} {% include 'sidebar.html' %} {% endblock sidebar %}
<div class="col-md-8 card mb-4 mt-3 ">
<div class="card-body">
<!-- comments -->
<h2>{{ comments.count }} comments</h2>
{% for comment in comments %}
<div class="comments" style="padding: 10px;">
<p class="font-weight-bold">
{{ comment.name }}
<span class=" text-muted font-weight-normal">
{{ comment.created_on }}
</span>
</p>
{{ comment.body | linebreaks }}
</div>
{% endfor %}
</div>
</div>
<div class="col-md-8 card mb-4 mt-3 ">
<div class="card-body">
{% if new_comment %}
<div class="alert alert-success" role="alert">
Your comment is awaiting moderation
</div>
{% else %}
<h3>Leave a comment</h3>
<form method="post" style="margin-top: 1.3em;">
{{ comment_form | crispy }}
{% csrf_token %}
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</form>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock content %}
please make shour that you include the {% load crispy_forms_tags %} inside the partials like :
{% extends 'posts/bases/base.html' %}
{% load crispy_forms_tags %}
{% block title%}
<title>Register</title>
{% endblock %}
{% block content%}
<h1>Register</h1>
<form action="" method="post">
{% csrf_token %}
{{ form|crispy }}
<button type="submit">Register</button>
</form>
{% endblock %}
if you load it in the base.html will not work
Django==3.1.4
django-crispy-forms==1.10.0
I have the same error...You'are using (), like that:
(% load crispy_forms_tags %)
and not {}, like:
{% load crispy_forms_tags %}

Include disqus.html only if post.category == 'textual' not working

Using Jekyll, I'm trying to only include the disqus.html in posts with the 'textual' category:
<div class="container-fluid">
<div class="row">
<!-- Menú lateral -->
{%include menu-lateral.html%}
<div class="col-sm-10" id="main-content-post">
<div class="row">
<div class="col-sm-10">
<h2>{{ post.title }}</h2>
{{content}}
{% if post.category == "textual" %}
{% include disqus.html %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
Though, it doesn't works :~)
I solved it by changing post.category for page.category.

how to set the whole back ground of col-sm-1 to #F7F7F7

my website uses bootstrap grid system of col-sm-1/col-sm-9/col-sm-2. And I want to the whole background of col-sm-1 to be #F7F7F7. Thing is I want it to be like the far left side of reddit
but when I tried to manipulate my web, I see only the div that has content on col-sm-1 changes its color.
<div class="col-sm-1">
<div class="row-fluid">
<h5 class="tag-name"></h>
</div>
{% if user.is_authenticated %}
{% if following %}
<h5 class="tag-named"><em>follow</em></h5>
<div class="tagging">
<div class="tab-pane{% if active_tab == 'connections' %} active{% endif %}" id="connections">
{% for a in following %}
<li style="padding:0.01em; list-style-type: square;"><a id="following-link" href="{{ a.get_absolute_url }}">{{ a }}</a></li>
<br />
{% endfor %}
</div>
</div>
{% else %}
<p class="tag-named" style="font-size:12px; text-align:left;"><em>enter followingcommunity <i class="fa fa-folder-open"></i>
hello</em></p>
{% endif %}
{% else %}
<p class="tag-named" style="font-size:12px; text-align:left;"><em>now login</em>
</p>
{% endif %}
</div>
please ignore django template language {{}}, as this needs to be done with awesome css.

How do I switch div's without messing it up?

I would like to put the Categories sections above the Recent Posts section without screwing it up but I'm having trouble. Any suggestions?
<div align="center">
<h3>Recent Articles</h3> </div>
<ul id="posts">
{% for article in blog.articles %}
<li>{{ article.title }}
<p>{{ article.published_at | date: "%b %d %Y" }}</p>
{{ article.excerpt_or_content }}
<p>{{ article.content | strip_html | truncate: 100 }}</p>
</li>
{% endfor %}
<div align="center">
<h3 style="margin: 20px 0">Categories</h3> </div>
{% for tag in blog.all_tags %}
<li class="tags">
{{ tag }}
</li>
{% endfor %}
</ul>
</div>
Given the tags {% %} which are most likely for a Shopify website -- they must be moved with the html blocks. The following code will work:
<div align="center"><h3>Categories</h3></div>
<ul id="posts">
{% for tag in blog.all_tags %}
<li class="tags">
{{ tag }}
</li>
{% endfor %}
<div align="center"><h3 style="margin: 20px 0">Recent Articles</h3></div>
{% for article in blog.articles %}
<li>{{ article.title }}
<p>{{ article.published_at | date: "%b %d %Y" }}</p>
{{ article.excerpt_or_content }}
<p>{{ article.content | strip_html | truncate: 100 }}</p>
</li>
{% endfor %}
</ul>
Your code given also had an extra </div> tag at the end, which is not needed in this context so I removed it.

Split HTML in Twig conditional

I would like to do this inside a for loop
{% if count % 2 == 0 %}
<div class="col-md-6"><!--start block-->
<div class="item-small gutter-bottom">
<img src="{{ item.image_url }}"/>
<div class="item-title">{{ item.name }}</div>
</div>
{% else %}
<div class="item-small gutter-bottom">
<img src="{{ item.image_url }}"/>
<div class="course-title">{{ item.name }}</div>
</div>
</div><!--end block-->
{% endif %}
where I put an additional div wrapping every two items. However, when rendered in HTML, the closing tags went all wrong and the output is not pleasant.
You should use twig's batch method instead.
{% for row in items|batch(2) %}
<div class="col-md-6"><!--start block-->
{% for item in row %}
<div class="item-small gutter-bottom">
<img src="{{ item.image_url }}"/>
<div class="item-title">{{ item.name }}</div>
</div>
{% endfor %}
</div><!--end block-->
{% endfor %}
I'd do this in this way (I put an own example for the loop):
{% for i in 0..9 %}
{% if loop.index0 % 2 == 0 %}
<div class="col-md-6"><!--start block-->
<div class="item-small gutter-bottom">
<img src="{{ item.image_url }}"/>
<div class="item-title">{{ item.name }}</div>
</div>
{% else %}
<div class="item-small gutter-bottom">
<img src="{{ item.image_url }}"/>
<div class="course-title">{{ item.name }}</div>
</div>
</div><!--end block-->
{% endif %}
{% endfor %}
You need to take care about the indexes of the loop, because if the 'if' code is not rendered first, your rendered html wouldn't be good, and the same occurs if in the last iteration the 'else' code is not rendered.