I have been trying to adopt a single set of column styles that are used across my website, but the Liquid assign tag isn't working properly.
I only have one template so far, called default.html:
---
---
<!DOCTYPE html>
<html>
{% include header.html %}
<body>
{% include navbar.html %}
<div class="container">
<div class="row">
{% assign __align__col = col-sm-6 col-sm-offset-2 col-md-4 col-md-offset-4 %}
<p>Using align {{ __align__col }}</p>
<div class="{{ __align__col }}">
<div class="panel panel-default">
{% if page.title %}
<div class="panel-heading">
<h3 class="panel-title">{{ page.title }}</h3>
</div>
{% endif %}
<div class="panel-body">
{{ content }}
</div>
</div>
</div>
</div>
<div class="row">
<div class="{{ __align__col }}">
{% include footer.html %}
</div>
</div>
</div>
</body>
</html>
The problem resides in the {% assign __align__col = col-sm-6 col-sm-offset-2 col-md-4 col-md-offset-4 %} line, it doesn't seem to set the __align__col variable. I looked at the source, and it doesn't show up in the class attribute or in the <p> tag.
I have Bootstrap running to do the UI stuff, and it's hosted over here at GitHub Pages. Actual website is here.
I think I misunderstood the assign tag. It probably needs to be a string in there, like {% assign __align__col = "col-sm-6 col-sm-offset-2 col-md-4 col-md-offset-4" %}. I'm not using this anyways, so this is probably the best answer I have for this.
Related
I'd like to list the cards as down below:
This is the code so far. My cards are listed one by one vertically. How can I achieve this?
{% extends 'base_content.html' %}
{% block content %}
{% for item in CATEGORY_CHOICES %}
<div class="row" style="justify-content: center;">
<div class="col-sm-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ item.1 }}</h5>
</div>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
The loop currently creates a new row for each item, which is why every card is stacking. It should only loop col, not row.
col-sm-3 means "use 3/12 space per column at sm and above" which means 4 columns (not 3) at the sm breakpoint and above. Use col-sm-4 to display 3 cards per row at sm and above, or just col-4 if you want 3 cards per row at all times.
{% extends 'base_content.html' %}
{% block content %}
<!-- don't loop here -->
<div class="row justify-content-center">
<!-- only loop the columns -->
{% for item in CATEGORY_CHOICES %}
<div class="col-sm-4"> <!-- not "col-sm-3" -->
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ item.1 }}</h5>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
I am working on a Django blog application and I have run into a problem with image alignment using Bootstrap 5. I am new at CSS and none of the solutions I see in SO are helping. My problem is I want the text under my images to always line up regardless of the height of the image itself. Here is a partial screen shot:
Here is the HTML code I developed:
{% extends 'base.html' %}
{% load static %}
{% block title %}Post List{% endblock title %}
{% block content %}
<div class="container">
<div class="row">
<!-- Latest Posts -->
<main class="posts-listing col-lg-8">
{% if page_obj %}
<div class="container">
<div class="row">
<!-- posts -->
{% for post in page_obj %}
<div class="post col-xl-6">
<div class="card">
<a href="{{post.get_absolute_url}}">
<img src="{{post.thumbnail.url}}" alt="..." class="img-fluid"></a>
</div>
<div class="card-body">
<div class="post-meta d-flex justify-content-between">
{% comment "" %}<div class="date meta-last"></div>{% endcomment %}
<div class="category">
{% for cat in post.categories.all %}
{{cat.title}}
{% endfor %}
</div>
</div>
<a href={{post.get_absolute_url}}>
<h3 class="h4">{{post.title}}</h3>
</a>
<p class="text-muted">{{post.content|safe | truncatechars:256 }}</p>
<footer class="post-footer d-flex align-items-center">
<a href="{% url 'show-user-profile' post.author.user.id %}" class="profile d-flex align-items-center flex-wrap">
<div class="avatar"><img src="{{post.author.profile_picture.url}}" alt="..." class="img-fluid"></div>
<div class="title"><span>{{post.author.user.username}}</span></div>
</a>
<div class="date"><i class="icon-clock"></i>{{post.timestamp | timesince}} ago</div>
<div class="comments meta-last"><i class="icon-comment"></i>{{post.comment_count}}</div>
</footer>
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
<p class="text-big">No Posts in this category</p>
{% endif %}
</main>
{% include 'sidebar.html' with most_recent=most_recent category_count=category_count %}
</div>
</div>
{% endblock content %}
The comments I am getting make it seem like what I am trying to do is impossible, and perhaps it is. Here is a screenshot from Adobe Lightroom that shows the concept - all the photos are placed in identically sized boxes regardless of aspect ratio. No distortion, just different size margins to fill in unused space. Now Lightroom isn't HTML but can't this be done? As I mentioned, all of the sample galleries I see use photos with the same aspect ratio, but that should not be a requirement of a gallery.
I would appreciate some help. Thanks
In one of the HTML files of my Django project, I have a div that contains a col-6 for an image and a col-6 for a text.
{% if automotives %}
{% for automotive in automotives %}
<div class="row">
<div class="col-6 mb-4 mb-md-0 my-5 pl-5">
<h3 class="font-weight-bold">{{ automotive.title }}</h3>
<p class="text-muted">{{ automotive.description|safe }}</p>
</div>
<div class="col-6 mb-4 mb-md-0 my-5 pr-5">
<div class=" overlay z-depth-1-half">
<img src="{{ automotive.cover.url }}" class="img-fluid" alt="cover">
</div>
</div>
</div>
{% endfor %}
{% endif %}
I read title and description and cover from the database.
I want to periodically change the order of image and text in each row.
I have no idea how to do it. and I don't know much about js or jquery.
any help is appreciated.
You can achieve this with flex, but I see that your question is django/jinja2 related so, this is how I would approach this problem:
Build a partial template like this
{% if image_right %}
<div class="row">
<div class="col-6 mb-4 mb-md-0 my-5 pl-5">
<h3 class="font-weight-bold">{{ automotive.title }}</h3>
<p class="text-muted">{{ automotive.description|safe }}</p>
</div>
<div class="col-6 mb-4 mb-md-0 my-5 pr-5">
<div class=" overlay z-depth-1-half">
<img src="{{ automotive.cover.url }}" class="img-fluid" alt="cover">
</div>
</div>
</div>
{% else %}
<div class="row">
<div class="col-6 mb-4 mb-md-0 my-5 pr-5">
<div class=" overlay z-depth-1-half">
<img src="{{ automotive.cover.url }}" class="img-fluid" alt="cover">
</div>
</div>
<div class="col-6 mb-4 mb-md-0 my-5 pl-5">
<h3 class="font-weight-bold">{{ automotive.title }}</h3>
<p class="text-muted">{{ automotive.description|safe }}</p>
</div>
</div>
{% endif %}
You can name this something like image_text.html.
This template contains a bit of duplicate code, but it is simple to understand.
If image_right variable is True (or set to any non null value), it will show the row with the image on the right.
If image_right variable is False, (or 0 or any other null value), it will show the image left (so, image on the left is the the default behavior in this case).
Then, in your main template, you can use this partial template you just built (image_text.html) like this, for example, if you want to switch image on left and right on each row:
{% if automotives %}
{% for automotive in automotives %}
{% include 'image_text.html' with automotive=automotive image_right=forloop.counter|divisibleby:2 %}
{% endfor %}
{% endif %}
forloop.counter is the index of your for loop (it starts from 1, user forloop.counter0 if you want a counter that starts from 0).
When forloop.counter is even, image_right in your partial template will be True, so it will show image on the right.
When forloop.counter is odd, image_right in your partial template will be False, so it will show image on the left.
Hope it helps. This may need some tweaks though.
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.
In one of my of my pages I have a few tables. These tables have the same structure but differ in colors and in the data displayed.
An example table might look like this:
<div class="container reusable-table">
<h4 class="table_title">{{ table_title }}</h4>
{% for item in items %}
<div class="container row">
<div class="container col">
<h4>{{ item.date }}</h4>
</div>
<div class="container col">
<h4>{{ item.time }}</h4>
</div>
<div class="container col">
<h4>{{ item.title }}</h4>
</div>
<div class="container col">
<h4>{{ item.description }}</h4>
</div>
<div class="container col">
<h4>{{ item.price }}</h4>
</div>
</div>
{% endfor %}
</div>
One of my options is to repeat the html and css code for the table each time. This way I risk errors and alot of duplicated code.
From my perspective, I need to find a way to substitute:
html elements, like table_title
data related elements, like {% for item in items %}
colors
Based on the comments and the answers below, also on Assign variables to child template in {% include %} tag Django, you can replace html elements and data with the following:
{% include "new_table.html" with table_title="A Title" and items=new_items %}
That leaves the color aspect, or in better terms the css aspect.
I am searching for a way to make this more efficient.
you can create one HTML File for the table, include the HTML table wherever you want with {% include %}
{% include "mytable.html" with items=<your_items> %}
try this...
You can make your table an html snippet template that you can include in other templates to make this kind of thing manageable. See the docs on include.
Suppose you have item_table.html.
<div class="container reusable-table">
<h4 class="table_title">{{ table_title }}</h4>
{% for item in items %}
<div class="container row">
<div class="container col">
<h4>{{ item.date }}</h4>
</div>
<div class="container col">
<h4>{{ item.time }}</h4>
</div>
<div class="container col">
<h4>{{ item.title }}</h4>
</div>
<div class="container col">
<h4>{{ item.description }}</h4>
</div>
<div class="container col">
<h4>{{ item.price }}</h4>
</div>
</div>
{% endfor %}
</div>
Suppose you have a view that provides a list of items to a template like
# ...
return render('some_template.html', context=dict(some_items=something))
In your some_template.html you can include item_table.html and pass it appropriate values. For example, the list of items some_items can become the items variable in the included template.
{% include "item_table.html" with table_title="My Title" items=some_items %}