I'm using Jekyll for my personal blog and I want to have link rel on my article pages that point to the next/*previous* article.
Is that possible with Jekyll?
Something like this should work:
<div id="page-navigation">
<div class="clear"> </div>
<div class="left">
{% if page.previous.url %}
<a href="{{page.previous.url}}" title="Previous Post:
{{page.previous.title}}">« {{page.previous.title}}</a>
{% endif %}
</div>
<div class="right">
{% if page.next.url %}
<a href="{{page.next.url}}" title="next Post:
{{page.next.title}}">{{page.next.title}} » </a>
{% endif %}
</div>
<div class="clear"> </div>
</div>
Related
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
I am facing troubles to auto-generate Jekyll gallery for my portfolio.html file. I have stored portfolio landing pages in _clients folder on site root. The images for these landing pages are stored in {{site.baseurl}}/images/clients folder.
Here is my code for autogenerating portfolio gallery:
<section>
<div class="container">
<ul class="image-grid">
{% for client in site.clients %}
<li>
<a href="{{ site.baseurl }}{{ client.url }}">
<img src="{{ site.baseurl }}/images/clients/{{ client.image_path }}" class="img-responsive" alt="{{ post.alt }}">
<div class="details">
<div class="name">{{ client.name }}</div>
<div class="position">{{ client.subtitle }}</div>
</div>
</a>
</li>
{% endfor %}
<li class="filler"></li>
<li class="filler"></li>
</ul>
</div>
</section>
Now. here is my code for generating landing page when someone clicks on gallery image:
<section>
<div class="container">
{% if portfolio.heading %}
<h2>
{{ portfolio.heading }} /
{{ page.title | capitalize }}
</h2>
{% endif %} {% if page.subtitle %}
<p class="subtext">{{ page.subtitle }}</p>
{% endif %}
</div>
</section>
<section>
<div class="container">
<p>
<img
src="{% include relative-src.html src=page.image_path %}"
class="screenshot"
/>
</p>
<div>
{{ content }}
</div>
<p>
View {{ page.title }} →
</p>
</div>
</section>
Here's how font yml of client.md file looks like:
---
name:
subtitle:
external_url:
image_path:
---
I have a piece of code that loops through some objects. I have another set of objects that I want to loop through too. Is there a way I can use the for loop.counter to increase the image object?
<div class="row">
{% for project in projects.all %}
<div class="col-md-4 col-sm-6">
<div class="news-section-single">
<div class="news-img-main">
<div class="news-img"><img src="{{ images.{{ forloop.counter }}.image.url }}" alt="" data-popupalt-original-title="null" title="">
<div class="news-list">
<ul>
<li><i class="fa fa-clock-o" aria-hidden="true"></i> {{ project.date }}</li>
</ul>
</div>
</div>
</div>
<div class="news-head">
<h3>{{ project.title }}</h3>
</div>
</div>
</div>
{% endfor %}
</div>
Hope that makes sense what I'm trying to do.
I'm sure someone will tell me I'm trying to do the wrong thing so here is my views.py
def projects(request):
projects = Project.objects.all()
images = ProjectImage.objects.all()
return render(request, 'projects.html', {'projects': projects,
'images': images})
And my models.py
class Project(models.Model):
title = models.CharField(max_length=250)
body = models.TextField()
date = models.DateField()
def __str__(self):
return self.title
class ProjectImage(models.Model):
project = models.ForeignKey(Project, related_name='images', on_delete='CASCADE')
image = models.ImageField()
Well, indeed, you don't want to do any of this. You have a relationship between Project and ProjectImage, you should just pass the projects to the template and use that relationship there.
{% for project in projects %}
...
{% for image in project.images.all %}
<div class="news-img">
<img src="{{ image.image.url }}" alt="" data-popupalt-original-title="null" title="">
</div>
{% endfor %}
...
{% endfor %}
This is what i used in the end.
<div class="row">
{% for project in projects.all %}
<div class="col-md-4 col-sm-6">
<div class="news-section-single">
<div class="news-img-main">
<div class="news-img"><img src="{{ project.images.first.image.url }}" alt="" data-popupalt-original-title="null" title="">
<div class="news-list">
<ul>
<li><i class="fa fa-clock-o" aria-hidden="true"></i> {{ project.date }}</li>
</ul>
</div>
</div>
</div>
<div class="news-head">
<h3>{{ project.title }}</h3>
</div>
</div>
</div>
{% endfor %}
</div>
Django with Bootstrap 3
I am working on a dashboard view for an FAQ system. I have set up the articles to be grouped by section. The section names are the headers in a list-group that when clicked will expand another list-group containing all the articles related to that group.
The issue that I am having is that I would like to set up the collapse to work like an accordion. I have followed bootstrap 3’s guide to accomplish this but when I click a new section open none of the prior open sections collapse close. I have exhausted other guides but the code looks correct yet the accordion functionality is not working.
My code:
{% block content %}
<div class="iron-faq">
<div class="container">
<div class="col-md-6">
<h3>Sections</h3>
<div class="list-group" id="accordion" aria-multiselectable="true">
{% regroup articles by section as section_list %}
{% for section in section_list %}
<a href="#section-{{ section.grouper.id }}"
class="list-group-item list-header"
data-toggle="collapse"
data-parent="#accordion"
data-target="#section-{{ section.grouper.id }}"
aria-controls="section-{{ section.grouper.id }}">
<i class="fa fa-bars"></i> {{ section.grouper }}
<span class="badge pull-right">{{ section.grouper.article_count }}</span>
</a>
<div class="panel-collapse collapse" id="section-{{ section.grouper.id }}">
{% for article in section.list %}
<a href="{{ article.get_absolute_url }}" class="list-group-item">
{{ article.title }}
</a>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
<div class="col-md-6">
<h3>Useful Articles</h3>
<div class="list-group">
<div class="favorites">
{% for favorite in favorites %}
<a href="{{ favorite.get_absolute_url }}" class="list-group-item">
<h5 class="list-group-item-heading">{{ favorite.title }}</h5>
<p class="list-group-item-text">{{ favorite.section.name }}</p>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
You have to wrap each section with:
<div class="panel"></div>
So your html would look like the following:
{% block content %}
<div class="iron-faq">
<div class="container">
<div class="col-md-6">
<h3>Sections</h3>
<div class="list-group" id="accordion" aria-multiselectable="true">
{% regroup articles by section as section_list %}
{% for section in section_list %}
<div class="panel">
<a href="#section-{{ section.grouper.id }}"
class="list-group-item list-header"
data-toggle="collapse"
data-parent="#accordion"
data-target="#section-{{ section.grouper.id }}"
aria-controls="section-{{ section.grouper.id }}">
<i class="fa fa-bars"></i> {{ section.grouper }}
<span class="badge pull-right">{{ section.grouper.article_count }}</span>
</a>
<div class="panel-collapse collapse" id="section-{{ section.grouper.id }}">
{% for article in section.list %}
<a href="{{ article.get_absolute_url }}" class="list-group-item">
{{ article.title }}
</a>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-6">
<h3>Useful Articles</h3>
<div class="list-group">
<div class="favorites">
{% for favorite in favorites %}
<a href="{{ favorite.get_absolute_url }}" class="list-group-item">
<h5 class="list-group-item-heading">{{ favorite.title }}</h5>
<p class="list-group-item-text">{{ favorite.section.name }}</p>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
Hope this helps!
I'm having a very hard time trying to solve this. I got a back-end working but problem is html and css. I'm trying to make it like this here;
picture on the far left, user name on top and text below the user name and next to picture which is also the style youtube use. Here's my try.
as you can see when text isn't too long it kinda works but when it gets big it alters the form. Also as for the reply comment, the whole thing is a mess. I moved things around but still won't do the job.
Here's my full code(I'm using django template language here as well) and you can see simplified version here https://jsfiddle.net/n9h7gy54/ (it might be better to see the one here because my full code is very messy)
<table class='table'>
{% for comment in comments %}
<tr>
<td>
<div class="wholeComment" style="width:100%; margin:auto; font-size:14px;">
<div class="profileImage" style="float:left;">
<img src="{{ comment.user.get_mugshot_url }}" height='48' width='48' />
</div>
<div class="comment_header" style="float:left;">
<div class="commentInfo">
{{ comment.user.user }}| <small>{{ comment.timestamp|timesince }} </small>
</div>
<div class="aboutComment">
<span style="margin:5px; word-break: break-all;">
{{ comment.get_comment }}</span>
</div>
<div class="comment_bottom" style="padding:3px;">
{% if user.is_authenticated %}
<div class="make_reply">
<a href='#' class='reply_btn'>reply</a>
<div class='reply_comment'>
<form method="POST" action='{% url "comment_create" %}'>{% csrf_token %}
<input type='hidden' name='post_id' id='post_id' value='{% url "comment_create" %}'/>
<input type='hidden' name='origin_path' id='origin_path' value='{{ comment.get_origin }}'/>
<input type='hidden' name='parent_id' id='parent_id' value='{{ comment.id }}' />
{% crispy comment_form comment_form.helper %}
</form>
</div>
</div>
{% endif %}
<div class="replyInfo">
{% if not comment.is_child %}
<div class="wholeReply">
{% if comment.comment_count %}
<a href='#' class='replies'>
view{{comment.comment_count}}reply</a>
{% endif %}
<div class="got_replies">
<ul style="list-style-type: none;">
{% for child in comment.get_children %}
<hr>
<li>
<div style="float:left;">
<img src="{{ child.user.get_mugshot_url }}" height='48' width='48'/> {{ child.user.user }}
</div>
<div style="word-break: break-all; ">
{{ child.get_comment }}</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
</td></tr>
{% endfor %}
</table>
If I understand you correctly, you're looking for
<div class="row">
<div class="col-xs-1">
<img src="{{ comment.user.get_mugshot_url }}"/>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<p>
{{ comment.user.user }}
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<small>{{ comment.timestamp|timesince }} </small>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span>{{ comment.get_comment }}</span>
</div>
</div>
{% for child in comment.get_children %}
{% include 'commentrow.html' comment=child %}
{% endfor %}
</div>
</div>
You can save this snippet as a template called commentrow.html and it will work recursively for children, including it in your template the same way
{% for comment in comments %}
{% include 'commentrow.html' comment=comment %}
{% endfor %}
JSFiddle
The important part is the col-xs tags, since this will mean the columns don't wrap regardless of screensize.