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:
---
Related
Currently I have only been able to get 1 image with this code to be active on the carousel using Django. However I want to display 3 images.
<div class="carousel-inner">
{% for item in page.plant_images.all %}
{% image item.image fill-10000x10000 as img %}
<div class="carousel-item {% if forloop.counter == 1 %}active{% endif %}">
<img src="{{ img.url }}" class="d-block w-100"
alt="{{ img.alt }}">
<div class="imageCounter">
<img src="/media/original_images/camera.png" id="display">
{{ forloop.counter }} of {{ page.plant_images.all.count }}
</div>
</div>
{% endfor %}
</div>
How am I able to manipulate this so i can get the extra images?
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.
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' %}
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>