I'm looking for a way to do something like this:
<ul>
<li class="post"></li>
<li class="ad"></li>
<li class="post"></li>
<li class="post"></li>
<li class="post"></li>
</ul>
Generating the list of posts isn't a problem for me, it's injecting the li.ad into that list of posts.
Currently, I've got the basic for loop returning all of my posts:
{% for post in site.posts %}
<li class="post">
<h1>{{ post.title }}</h1>
<p>{{ post.summary }}</p>
</li>
{% endfor %}
This turned out to work perfectly - big thanks to Dave Rupert for his help.
{% for post in site.posts %}
<li class="post">
<!-- post stuff -->
</li>
{% if forloop.first %}
<li class="ad">
<!-- ad stuff -->
</li>
{% endif %}
{% endfor %}
for loops have a forloop variable that can track the index, so you can do something like this:
{% for post in site.posts %}
{% if forloop.index == 2 %}<li class="ad"><!-- ad stuff --></li>{% endif %}
<li class="post"><!-- post stuff --></li>
{% endfor %}
Related
As you can see it gives a very annoying effect when the submenu is larger than it's parent. I'd like to keep the main-menu in the original height, but I really can't find the part that's responsible for this behaviour. It's a theme that's not built by me, so that makes it even harder to find a solution.
This is the live url: https://testing.sceneryworkshop.com
I'm almost on a mental breakdown here :D So IF anyone could help me out, it would be much appreciated!
As requested some code (I don't think this ads much extra to my post, but it may be). It's Lightspeed HQ which uses Twigg as far as I know. I guessed you'd like to have a Live url to inspect with inspector to see it in action.
<div class="nav-main">
<ul>
<li><a>{{ 'Menu' | t }}</a>
<ul>
{% for category in shop.categories | limit(10) %}
<li><a href="{{ category.url | url }}">
{% if theme.show_category_images %}<span class="img"><img src="{{ category.image | url_image('64x44x2', category.title) }}" alt="{{ category.title }}" width="32" height="22"></span>{% endif %}{{ category.title }}</a>
{% if category.subs %}
<ul>
<li class="strong">{{ category.title }}</li>
{% for category in category.subs %}
<li>{{ category.title }}
{% if category.subs %}
<ul>
<li class="strong">{{ category.title }}</li>
{% for category in category.subs %}
<li>{{ category.title }}
{% if category.subs %}
<ul>
<li class="strong">{{ category.title }}</li>
{% for category in category.subs %}
<li>{{ category.title }}</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% if shop.categories | length > 10 %}
<li>{{ 'All categories' | t }}</li>
{% endif %}
</ul>
</li>
</ul>
</div>
Thanks #Elad! Without you I never found this! You made my day!
Commenting out that part solved the problem!
$(this).find('li.sub').on('mouseenter', function() {
$(this).delay(250).queue(function() {
// $(this).parents('ul').css('min-height', $(this).children('ul').outerHeight());
$(this).parents('ul:first').addClass('has-hover');
$(this).dequeue();
});
}).on('mouseleave', function() {
$(this).parents('ul').removeAttr('style');
$(this).parents('ul:first').removeClass('has-hover');
});
} ```
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.
I have a dropdown menu for categories and posts within them. Need to check if category is active - the opened post to use active class for menu category.
Posts can have new categories, they are not predefined.
Front matter is standard:
---
layout: post
title: "Some post title"
date: 2016-04-06 13:41:07 +0300
category: Events
---
In order to show class for open post in menu, I use a common technique
{% if page.url == post.url %}
<li class="active">{{post.title}}</li>
{% else %}
<li>{{post.title}}</li>
{% endif %}
How to apply class for a dropdown category in which open post is present?
Here's full code of categories with nested post titles for output, I currently have:
<ul class="nav navbar-nav">
Categories
<li class="dropdown active">
{% for category in site.categories %}
<li>{{ category | first }}
<ul class="dropdown-menu">
{% for posts in category %}
{% for post in posts %}
{% if page.url == post.url %}
<li class="active">{{post.title}}</li>
{% else %}
<li>{{post.title}}</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</li>
{% endfor %}
</li>
</ul>
You can try this :
{% for category in site.categories %}
{% assign categoryName = category | first %}
<li>
<a href="#"
class="dropdown-toggle {% if page.category == categoryName %} active{% endif %}"
data-toggle="dropdown"
name="{{ categoryName }}">{{ categoryName }}</a>
...
I try to do things like this in my post:
<ul class="articles-list">
{% for post in site.posts | where:'group', post.group %}
<div data-scroll-reveal="enter ease 0">
{% include article-snippet.html %}
</div>
{% endfor %}
</ul>
but it loops through all my collection instead the only loops posts with special group.
You cannot use where filter in a loop.
But you can do :
{% assign posts = site.posts | where:'group', post.group %}
<ul class="articles-list">
{% for post in posts %}
<div data-scroll-reveal="enter ease 0">
{% include article-snippet.html %}
</div>
{% endfor %}
</ul>
According to liquid documentation about filters they should be used inside output tags {{ and }}.
You can maybe try an if statement:
{% for post in site.posts %}
{% if post.group == 'group' %}
<div data-scroll-reveal="enter ease 0">
{% include article-snippet.html %}
</div>
{% endif %}
{% endfor %}
Also you should use the where filter a bit differently. Something like this:
{{ site.members | where:"graduation_year","2014" }}
This says select site members whose graduation_year is 2014. You don't need to specify that it should filter members, the first part implicitly states that.
<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 }.