hello everyone i am new to github,jekyll and ruby and maybe this question is already answered but being a newbie it's hard for me to resolve the problem.
i am trying to put multiple paginations on a single page i.e. say i have two
authors posting their content on the blog so i created a division for each of them and want pagination for each of them individually.So the current code is something like this:
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{% for post in paginator.posts %}
{% if post.author contains "NAME OF AUTHOR 1" %}
<div class="post-preview">
<a href="{{ post.url }}">
<h2 class="post-title">
{{ post.title }}
</h2>
<h3 class="post-subtitle">
{{ post.description }}
</h3>
</a>
<p class="post-meta">Posted by {{ post.author }} {{ post.date | date_to_string }}</p>
</div>
<hr>
{% endif %}
{% endfor %}
<!-- Pager -->
{% if paginator.total_pages > 1 %}
<ul class="pager">
{% if paginator.previous_page %}
<li class="previous">
← Newer Posts
</li>
{% endif %}
{% if paginator.next_page %}
<li class="next">
Older Posts →
</li>
{% endif %}
</ul>
{% endif %}
</div>
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{% for post in paginator.posts %}
{% if post.author contains "NAME OF AUTHOR2" %}
<div class="post-preview">
<a href="{{ post.url | prepend: site.url }}">
<h2 class="post-title">
{{ post.title }}
</h2>
<h3 class="post-subtitle">
{{ post.description }}
</h3>
</a>
<p class="post-meta">Posted by {{ post.author }} {{ post.date | date_to_string }}</p>
</div>
<hr>
{% endif %}
{% endfor %}
<!-- Pager -->
{% if paginator.total_pages > 1 %}
<ul class="pager">
{% if paginator.previous_page %}
<li class="previous">
← Newer Posts
</li>
{% endif %}
{% if paginator.next_page %}
<li class="next">
Older Posts →
</li>
{% endif %}
</ul>
{% endif %}
</div>
Also under _config.yml paginate is set to 3.
I have used jekyll with bootstrap(if am correct not jekyll-bootstrap) and followed a pretty simple tutorial ,also the file structure is also very simple.
thanks for your help i have read many documentation and many posts(always bound to screwup) before posting this so thanks to everyone.
Also,
the blog is hosted at http://neorblog.in and github repositories at https://github.com/neortls007idev/Blog
Also the repo is not currently commited as per the above code.
Pagination is for all posts. You cannot have a pagination for posts where author == NeoR.
You still have the solution to create a generator plugin. And yes, github pages doesn't accept foreign plugin for security reasons.
But, simply pushing to github is not the only workflow available. You can try this.
Related
In the following code, I have a category by the name "ml" defined in my yml file frontmatter. For some reason, the {% unless cat == "ml" %} is not working properly. See this html, and the output image below. Clearly, the category is ml (I have tried to remove any whitespace with the strip filter, which did not work), but it is not working (the unless statement, that is).
Please help!
<div class="posts">
<h1>Recent Posts: </h1>
{% for post in paginator.posts %}
{% assign cat = post.categories %}
{% unless cat == "ml" %}
<div class="post">
<h1 class="post-title">
<a href="{{ post.url }}">
{{ post.title }}: {{ cat }}
</a>
{% if post.image %}
<img src={{post.image}}>
{% endif %}
</h1>
<span class="post-date">{{ post.date | date_to_string }}</span>
</div>
{% endunless %}
{% endfor %}
</div>
I still am not completely sure on the why here, but I found that using contains rather than == solved my issue.
I am new to Jekyll. I know that Jekyll supports to show recent post with the following code:
<div id="recent-posts" class="recent-posts">
{% for this_post in paginator.posts %}
<div class="post">
<a href="{{ this_post.url }}">
<h2 class="post-title">{{ this_post.title }}</h2>
</a>
{% include category_info %}
{% include source_info %}
</div>
{% endfor %}
</div>
But I would like not to show a category of posts, saying the category name is "notshowing". How can I make it?
To avoid showing a specific category you can use the unless filter:
executes a block of code only if a certain condition is not met (that
is, if the result is false).
So for example, inside the for loop, use {% unless post.categories contains "notshowing"%}
In your example, using the site posts site.posts instead of paginator.posts (you can adjust that to fit what you need) it would look like:
<div id="recent-posts" class="recent-posts">
{% for post in site.posts %}
{% unless post.categories contains "notshowing"%}
<div class="post">
<a href="{{ post.url }}">
<h2 class="post-title">{{ post.title }}</h2>
</a>
</div>
{% endunless %}
{% endfor %}
</div>
I'm trying to figure out how to add a horizontal break after 4 products within the Shopify product loop. Is this possible at all? I've looked through their documentation but it doesn't show the possibility of counting or iterating over the loop.
Currently my loop looks as follows:
{% if collection.all_products_count > 0 %}
<div class="w-col w-col-12">
<div class="product-feed w-clearfix">
{% for product in collection.products %}
<a class="product product-collection w-inline-block" href="{{ product.url | within:collection }}">
<div class="reveal">
<img src="{{ product.featured_image | product_img_url: 'original' }}" alt="{{ product.title | escape }}" class="product-photo">
<img src="{{ product.images.last | product_img_url: 'original' }}" alt="{{ product.title | escape }}" class="hidden">
</div>
<h3 class="product-title">{{ product.title }}</h3>
<div class="product-price">{{ product.price | money }}</div>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</a>
{% endfor %}
</div>
{% assign count = paginate.pages %}
{% for part in (1..count) %}
<li {% if paginate.current_page == part %}class="active"{% endif %}>{{ forloop.index }}</li>
{% endfor %}
{% else %}
<p>Sorry, there are no products in this collection</p>
{% endif %}
It's fair explanation that you have not gone through the documentation properly. Refer this: - https://help.shopify.com/themes/liquid/objects/for-loops
Straight forward way to get this to work is add the following line before {% endfor %}
{% cycle '','','','<hr>' %} // or <br> if you prefer
<hr> gets added every time the forloop is iterating the 4th time. More on this - https://help.shopify.com/themes/liquid/tags/iteration-tags#cycle
I'm creating a blog on my Jekyll site. In the feed section, I've got the first post at the top of the page designated to be the featured post. At the bottom, I have a masonry of the rest of the posts below the featured post. (As you can see from the actual web page here). In the latest posts section, I have a separate loop to handle every post that was published before the featured post by offsetting it by 1 in a for loop. Each row in this masonry has a limit of 3 posts per row. Each row is controlled by the inline-flex property.
Here is the code in my for loop for that:
<div class="latest-section">
<h5>Latest Posts</h5>
<div class="latest-section__row">
{% for post in site.posts offset:1 limit:3 %}
{% capture post_row %}
<article class="latest-section__row--post">
<figure class="post--featured-image">
<img src="{{ post.featured_image_path }}" alt="">
</figure>
<h2>{{ post.title }}</h2>
<p>{{ post.excerpt | strip_html }}</p>
<div class="post-byline">
<ul>
<li><i class="fa fa-user"></i>
{% if post.author %}
{{ post.author }}
{% else %}
{{ site.data.settings.author }}
{% endif %}
</li>
<li><i class="fa fa-calendar-o"></i>{{ post.date | date: '%b %d, %Y' }}</li>
<li><i class="fa fa-comment"></i></li>
</ul>
</div>
</article>
{% endcapture %}
{{ post_row }}
{% endfor %}
</div>
<div class="latest-section__row">
{% for post in site.posts offset:4 limit:3 %}
{{ post_row }}
{% endfor %}
</div>
</div>
So I'm basically "capturing" each article in the row into a variable called "post_row" so that I can use it for the next row, as you can see in the block of code below:
<div class="latest-section__row">
{% for post in site.posts offset:4 limit:3 %}
{{ post_row }}
{% endfor %}
</div>
The problem that I'm running into is that this becomes extremely hard to maintain if I have say 90 posts or so in the future. I would have to continue to write this block of code out at least a few dozen times (as you can probably imagine) for every single row. For instance the next block of code would be:
<div class="latest-section__row">
{% for post in site.posts offset:7 limit:3 %}
{{ post_row }}
{% endfor %}
</div>
...and so on and so forth. The offset parameter is incremented by 3 each time so that no duplicate post is posted. Is there a way to make this a little bit more dynamic so I don't have to write this again and again in the future? The only thing that needs to change is that "offset" parameter number and nothing else in order to create a new row. Thanks for the help in advance.
this is what you can do :
blog/index.html
---
layout: default
title: Blog - Jake Tarr
---
<section class="blog-feed">
<div class="ribbon-container">
<div class="ribbon">
<div class="ribbon__content">
<h6>Blog</h6>
</div>
</div>
</div>
{% comment %}------ Template setup ------{% endcomment %}
{% assign numberOfFeaturedPosts = 1 %}
{% assign postsPerRow = 3 %}
<!-- Featured post (latest post) -->
{% include _featured_posts.html %}
{% comment %}--- Calculate the number of 'latest' posts to process {% endcomment %}
{% assign numberOfLatestPosts = site.posts | size | minus: numberOfFeaturedPosts %}
{% comment %}----- Calculate the number of rows -----{% endcomment %}
{% assign numOfRows = numberOfLatestPosts | modulo: postsPerRow | plus: 1 %}
{% comment %}---- Assign first offset -----{% endcomment %}
{% assign offset = numberOfFeaturedPosts %}
<!-- All the other posts added before latest post -->
<div class="latest-section">
<h5>Latest Posts</h5>
{% for row in (1...numOfRows) %}
{% include _latest_posts.html %}
{% comment %}---- Increment offset for next row ----{% endcomment %}
{% assign offset = offset | plus: postsPerRow %}
{% endfor %}
</div>
</section>
In order to have clean and short files, we create two includes :
_includes/_featured_posts.html
<div class="featured-section">
<h5>Featured Post</h5>
{% for post in site.posts limit: numberOfFeaturedPosts %}
<article class="featured-section__post">
<figure class="post--featured-image">
<img src="{{ post.featured_image_path }}" alt="">
</figure>
<h2>{{ post.title }}</h2>
<p>{{ post.excerpt | strip_html }}</p>
<div class="post-byline">
<ul>
<li><i class="fa fa-user"></i>
{% if post.author %}
{{ post.author }}
{% else %}
{{ site.data.settings.author }}
{% endif %}
</li>
<li><i class="fa fa-calendar-o"></i>{{ post.date | date: '%b %d, %Y' }}</li>
<li><i class="fa fa-comment"></i></li>
</ul>
</div>
</article>
{% endfor %}
</div>
_includes/_latest_posts.html
<!-- Latest posts - row {{ row }} -->
<div class="latest-section__row">
{% for post in site.posts offset: offset limit: postsPerRow %}
<article class="latest-section__row--post">
<figure class="post--featured-image">
<img src="{{ post.featured_image_path }}" alt="">
</figure>
<h2>{{ post.title }}</h2>
<p>{{ post.excerpt | strip_html }}</p>
<div class="post-byline">
<ul>
<li><i class="fa fa-user"></i>
{% if post.author %}
{{ post.author }}
{% else %}
{{ site.data.settings.author }}
{% endif %}
</li>
<li><i class="fa fa-calendar-o"></i>{{ post.date | date: '%b %d, %Y' }}</li>
<li><i class="fa fa-comment"></i></li>
</ul>
</div>
</article>
{% endfor %}
</div>
Et voilà !
<section id="article">
<h3>Recent posts</h3>
<ul>
{% for post in site.posts %}
<li>» {{ post.title }}</li>
{% endfor %}
</ul>
</section>
This is my codes for all articles, how can I control the number of posts, and just show 10 posts in the section?
This is the way to do it.
{% for post in site.posts offset: 0 limit: 10 %}
<section id="article">
<h3>Recent posts</h3>
<ul>
{% for post in site.posts limit:10 %}
<li><a href="{{ post.url }}">
{% endfor %}
</ul>
</section>
Try this one. This code show 10 most recent post like recent post widget.
I'd go about it another way.
{% for post in site.posts limit:1 %}
{% if forloop.last %}
<li>
{{ post.title }}
</li>
{% endif %}
{% endfor %}
I've included an if logic tag with a forloop.last so it would only display the last, most recent post. The output would only be one post since I've also included { limit:1 }.