I want to create a "list" of tags from data in my post front matter to use with a lightbox plugin.
So, lets say that i have in my post front matter the following:
gallery: true
images:
- name: image-1.jpg
alt: image-1
- name: image-2.jpg
alt: image-2
- name: image-3.jpg
alt: image-3
I want to loop through that data and create the following html:
<img id="thumb01" class="thumbnail" src="/assets/images/image-1.jpg" data-src="/assets/images/image-1.jpg" data-prev="thumb03" data-next="thumb02" alt="image-1">
<img id="thumb02" class="thumbnail" src="/assets/images/image-2.jpg" data-src="/assets/images/image-2.jpg" data-prev="thumb01" data-next="thumb03" alt="image-2">
<img id="thumb03" class="thumbnail" src="/assets/images/image-3.jpg" data-src="/assets/images/image-3.jpg" data-prev="thumb02" data-next="thumb01" alt="image-3">
I was thinking of inserting in the post layout the following:
{% if page.gallery %}
some type of loop
{% endif %}
But i haven't got the slightest of clues on how to achieve that,
please help!
thanks!
Try this :
{% if page.gallery == true %}
{%- for img in page.images -%}
{% comment %}
If we have more than one image,
we calculate next and prev index
{% endcomment %}
{% if forloop.length > 1 %}
{% if forloop.first %}
{% assign prev = forloop.length %}
{% else %}
{% assign prev = forloop.index | minus: 1 %}
{% endif %}
{% if forloop.last %}
{% assign next = 1 %}
{% else %}
{% assign next = forloop.index | plus: 1 %}
{% endif %}
{% endif %}
<img id="thumb{{ forloop.index }}" class="thumbnail"
src="{{ site.basurl }}/assets/images/{{ img.name }}"
data-src="{{ site.basurl }}/assets/images/{{ img.name }}"
{% comment %} only necessary if we have more than one image {% endcomment %}
{%- if forloop.length > 1 -%}
data-prev="thumb{{ prev }}"
data-next="thumb{{ next }}"
{%- endif %}
alt="{{ img.alt }}" >
{%- endfor -%}
{% endif %}
Related
I am working on a Shopify store, and I want to display multiple product images depending on what options are selected. This is the code I am using, which works perfectly on desktop, but messed up the way pictures are displayed on slider in mobile:
{% assign wanted_alts = product.selected_or_first_available_variant.options %}
<ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}" data-slider-container>
{% if enable_thumbnail_slides == true %}
<div class="product-single__thumbnails-slider-track" data-slider-track>
{% endif %}
{% for media in product.media %}
{% if wanted_alts contains media.alt or media.alt == "All" %}
<li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} {% if enable_thumbnail_slides == true %} product-single__thumbnails-item-slide{% endif %} js"{% if enable_thumbnail_slides == true %} data-slider-slide-index="{{ forloop.index0 }}" data-slider-item{% endif %}>
<a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ section.id }}-{{ media.id }}"
{% if enable_thumbnail_slides == true %} data-slider-item-link{% endif %}
{% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
{%- capture thumbnailAlt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}
<img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
{%- if media.media_type == 'video' or media.media_type =='external_video' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-video-badge-full-color' %}
</div>
{%- endif -%}
{%- if media.media_type == 'model' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-3d-badge-full-color' %}
</div>
{%- endif -%}
</a>
</li>
{% endif %}
{% endfor %}
{% if enable_thumbnail_slides == true %}
</div>
{% endif %}
</ul>
The only things I changed are:
Included {% assign wanted_alts = product.selected_or_first_available_variant.options %} before the images list to find out what options I want to display.
Wrap each <li> item in a if statement that tests if I want to show that image or not (based on the alt_text):
{% for media in product.media %}
{% if wanted_alts contains media.alt or media.alt == "All" %} //Line I added
<li>
...
</li>
{% endif %}//Line I added
{% endfor %}
This is my website.
Now my thumbnails are messed up on mobile, but they look exactly like I wanted on desktop.
Can someone help me to figure this out?
This is how it looks on mobile now:
This is how it looked before I changed the code (and the way I want it to be):
I wanted to modify the answer found here but it doesn't seem to be working for me as it just results in duplicate statements of "there are no related posts".
Originally, when there are no related posts, nothing is displayed and I wanted to change that. Again, at the moment, with the else statement I added, it just displays "there are no related posts" 3 times and I cant seem to figure out why.
Any help would be appreciated.
{% assign maxRelated = 0 %}
{% assign minCommonTags = 3 %}
{% assign maxRelatedCounter = 0 %}
{% for post in site.posts %}
{% assign sameTagCount = 0 %}
{% assign commonTags = '' %}
{% for tag in post.tags limit:1 %}
{% if post.url != page.url %}
{% if page.tags contains tag %}
{% assign sameTagCount = sameTagCount | plus: 1 %}
{{ post.title }}
<p>{{ post.excerpt | strip_html | truncatewords:80 }}</p>
{% assign commonTags = commonTags | append: tagmarkup %}
{% else %}
There are no related posts.
{% endif %}
{% endif %}
{% endfor %}
{% if sameTagCount >= minCommonTags %}
{% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
{% if maxRelatedCounter >= maxRelated %}
{% break %}
{% endif %}
{% endif %}
{% endfor %}
In the linked answer there is no else block and no out put, it just generates commonTags.
{% for tag in post.tags %}
{% comment %}---> Only compare if post is
not same as current page {% endcomment %}
{% if post.url != page.url %}
{% if page.tags contains tag %}
{% assign sameTagCount = sameTagCount | plus: 1 %}
{% capture tagmarkup %} <span class="label label-default">{{ tag }}</span> {% endcapture %}
{% assign commonTags = commonTags | append: tagmarkup %}
{% endif %}
{% endif %}
{% endfor %}
Then it outputs a link as h5 in case sameTagCount is greater or equal minCommonTags.
{% if sameTagCount >= minCommonTags %}
<div>
<h5>{{ post.title }}{{ commonTags }}</h5>
</div>
...
In your case ìt outputs 'There are no related posts.' if the condition {% if page.tags contains tag %} is not true, which apparently happens three times.
I am trying to add tags to my blog based on jekyll hyde.
This is what I have in place right now.
_includes/filter_by_tag.html
<div class="message">
Filter by tag:
{% assign all_tags = site.data.tags %}
{% for tag in all_tags %}#{{ tag[1].name }}
{% endfor %}
</div>
_includes/tags_for_page.html
{% assign post = page %}
{% if post.tags.size > 0 %}
{% capture tags_content %}{% if post.tags.size == 1 %}<i class="fa fa-tag"></i>{% else %}<i class="fa fa-tags"></i>{% endif %} {% endcapture %}
{% for post_tag in post.tags %}
{% assign tag = site.data.tags[post_tag] %}
{% if tag %}
{% capture tags_content_temp %}{{ tags_content }}#{{ tag.name }} {% if forloop.last == false %}<!--comma-->{% endif %}{% endcapture %}
{% assign tags_content = tags_content_temp %}
{% endif %}
{% endfor %}
{% else %}
{% assign tags_content = '' %}
{% endif %}
_layouts/blog_by_tag.html
---
layout: default
---
{% assign tag = site.data.tags[page.tag] %}
<div class="page">
<h1 class="page-title">Articles by tag: #{{ tag.name }}</h1>
<div class="message">
All tags:
{% assign all_tags = site.data.tags %}
{% for tag in all_tags %}#{{ tag[1].name }}
{% endfor %}
</div>
<div>
{% if site.tags[page.tag] %}
{% for post in site.tags[page.tag] %}
{{ post.date | date_to_string }} » {{ post.title }}<br>
{% endfor %}
{% else %}
<p>There are no posts for this tag.</p>
{% endif %}
</div>
</div>
_layouts/post.html
comments: true
---
{% include tags_for_page.html %}
<div class="post">
<h1 class="post-title">{{ page.title }}</h1>
<span class="post-date">{{ page.date | date_to_string }} {{ tags_content }}</span>
{% if page.cover_image %}
<img src="{{ page.cover_image }}" alt="{{ page.title }}">
{% endif %}
{{ content }}
</div>
archive.md
title: Blog Archives
{% include filter_by_tag.html %}
{% for post in site.posts %}{{ post.date | date_to_string }} » [ {{ post.title }} ]({{ post.url }})
{% endfor %}
I am not sure where am I going wrong here, I tried following the content from this blog post here, tried replicating the same for my blog but I can't see the tags being generated and displayed.
Not sure where am I going wrong.
Link to my blogs github repo where I am trying to add tags
link to the blog where you can see the blog.
Commit hash where I tried adding the tags
I had missed out the file
_data/tags.yml
whose contents would be like
ansible:
name: ansible
apache:
name: apache
and so on
I have several blog posts that fall under one umbrella blog post. For example, I have several posts about SQL Zoo tutorials, but I want to be able to link them all up to one "umbrella" post so that I only have one SQL Zoo post on the index page of my blog. I got this idea from: https://codeasashu.github.io/implement-series-post-jekyll-part-2/ and tried to follow the instructions, but now my series post does not show up on my index page. I have the following code in a file called post-series.html located in my _includes folder:
{% assign seriesarray = '|' | split : '|' %}
{% assign seriestitle = '' %}
{% assign serieslabel = '' %}
{% assign sortedposts = (site.posts | sort: 'date') %}
{% for post in sortedposts %}
{% if post.series and page.series_slug != nil and post.series == page.series_slug %}
{% capture postitem %} <li> {{ post.title }} </li> {% endcapture %}
{% assign seriesarray = seriesarray | push: postitem %}
{% assign seriestitle = 'Posts in this series' %}
{% assign serieslabel = 'Series Post' %}
{% elsif post.series != nil and page.series != nil and page.series == post.series %}
{% assign pageurl = page.url | split:'/' | last %}
{% assign posturl = post.url | split:'/' | last %}
{% if pageurl != posturl %}
{% capture postitem %} <li> {{ post.title }} </li> {% endcapture %}
{% else %}
{% capture postitem %} <li> {{ post.title }} </li> {% endcapture %}
{% endif %}
{% assign seriesarray = seriesarray | push: postitem %}
{% endif %}
{% if post.series_slug != nil and page.series != nil and page.series == post.series_slug %}
{% capture series_title %} {{ post.title }} {% endcapture %}
{% assign seriestitle = 'This posts is part of series - ' | append: series_title %}
{% assign serieslabel = 'This posts is part of series - ' | append: series_title %}
{% endif %}
{% endfor %}
{% capture serieslayout %}
{% if seriesarray.size > 0 %}
<hr />
<div class="panel">
<div class="panel-body">
<h4> {{ seriestitle }} </h4>
<ul id="post-series-list">
{% endif %}
{% for post in seriesarray %} {{ post }} {% endfor %}
{% if seriesarray.size > 0 %} </ul> </div> </div> {% endif %}
{% endcapture %}
and the following code from my index.html file in the root of my directory:
---
layout: index
---
<div id="home">
<h1>{{ site.title }}</h1>
<hr />
<ol class="posts">
{% for post in paginator.posts %}
{% assign seriesPost = nil %}
{% if post.series == nil %}
{% if post.series_slug != nil %} {% assign seriesPost = '(Series)' %} {% endif %}
<li class="post-listing">
<img class="post__image" src="/static/img/{{ post.cover_image}}" alt="{{ post.cover_alt }}" />
<div class="post__text">
<a class="post__title" href="{{ post.url }}">{{ post.title }}</a><br>
<span>
{{ post.date | date_to_string }} •
{% assign words = post.content | number_of_words %}
{% if words < 360 %}
1 min read
{% else %}
{{ words | divided_by:180 }} min read
{% endif %}
</span>
{{ post.excerpt }}
</div>
</li>
{% endif %}
{% endfor %}
</ol>
<!-- <div class="sidebar-right sidebar"></div> -->
<!-- <ul>
{% for post in paginator.posts %}
<li>
{{ post.title }}
{{ post.excerpt }}
</li>
{% endfor %}
</ul> -->
<!-- Pagination links -->
{% if paginator.total_pages > 1 %}
<ul class="pagination pagination-sm">
{% if paginator.previous_page %}
<li>«</li>
{% else %}
<li class="disabled"><span aria-hidden="true">«</span></li>
{% endif %}
<li>First</li>
{% for page in (1..paginator.total_pages) %}
{% if page == paginator.page %}
<li class="active"><a>{{ page }}<span class="sr-only">(current)</span></a></li>
{% elsif page == 1 %}
<li>{{ page }}</li>
{% else %}
<li>{{ page }}</li>
{% endif %}
{% endfor %}
<li>Last</li>
{% if paginator.next_page %}
<li>»</li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
{% endif %}
</div><!-- end #home -->
My full repo can be found here: https://github.com/thedatasleuth/thedatasleuth.github.io
In your index.html, {% if post.series == nil %} simply bares posts containing a series: someserie front matter variable to be printed.
For the second problem (note that on SO, you are supposed to ask one question at a time) :
Umbrella post always have series_slug: "My serie slug" in front
matter.
Serie's posts always have series: "My serie slug" in front
matter, and this must be strictly equal to umbrella page series_slug. (eg : you have a post with published: false and series: "SQL Zoology" that will not appear in SQL Zoo serie if you publish it.)
In _layouts/post.html remove {% include series.html %}.
In _includes/post-series.html replace all your code by the following :
{% comment %} #### On an umbrella page {% endcomment %}
{% if page.series_slug != nil %}
{% assign key = page.series_slug %}
{% assign title = page.title %}
{% assign url = page.url %}
{% assign sentence = "All posts in this serie :" %}
{% endif %}
{% comment %} #### On a serie page {% endcomment %}
{% if page.series != nil %}
{% assign key = page.series %}
{% assign umbrella_page = site.posts | where: 'series_slug', key | first %}
{% assign title = umbrella_page.title %}
{% assign url = umbrella_page.url %}
{% assign series_posts = site.posts | where: "series", key %}
{% for post in series_posts %}
{% if post.url == page.url %}
{% assign idx = forloop.index %}
{% endif %}
{% endfor %}
{% capture sentence %}
This article is <strong>Part {{ idx }}</strong> in a <strong>{{ series_posts.size }}-Part</strong> in {{ title }} serie
{% endcapture %}
{% endif %}
{% if page.series_slug != nil or page.series != nil %}
{% assign series_posts = site.posts | where: "series", key %}
<hr />
<div class="panel">
<div class="panel-body">
{% if page.series_slug != nil %}
{% assign key = page.series_slug %}
{% assign title = page.title %}
{% assign url = page.url %}
{% endif %}
<h4>{{ sentence }}</h4>
<ul id="post-series-list">
{% for post in series_posts %}
<li>
{% if page.url == post.url %}
This post : {{ post.title }} - part {{ forloop.index }}
{% else %}
{{ post.title }} - part {{ forloop.index }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
The problem you are facing
You forgot to add the series and series_slug YML variables. That is why it is not working in your case. You seem to not fully understand how the code works, probably due to the complexity of the solution. Therefore, I added another (much simpler) solution, that might fit your needs equally well.
A better/simpler solution
Simply add a YML variable called group: groupname to each post you want in a group. Do NOT skip any of the posts during pagination. Next, list the posts with the same group on the footer of each post (in your page/post layout) with the code below. Finally, add 'part 1', 'part 2', etc. to the post names in the series.
{% if post.group != nil %}
<ul>
{% for post in site.posts %}
{% if post.group == page.group %}
<li>{{ post.title }}</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
PS. If you really want to skip some posts in the pagination, I would create an universal solution. Add a skip_pagination boolean to the Front Matter (YML) and see if it is true in the pagination loop. This enables you to skip any post in the paginator.
I would like to change the layout of a page of collections, right now it's just one column. I would like to make it at least 3 per row.
Here is the existing layout
to something like this
1:
Here's the code
<div id="content" class="col-md-12 center-column content-with-background">
<div class="row">
<div class="col-sm-12">
{{page.content}}
</div>
</div>
</div>
{% comment %}
Collections are listed here.
{% endcomment %}
{% capture uses_minimal_framework %}{% include 'product-loop' %}{% endcapture %}
{% if uses_minimal_framework contains 'Liquid error' %}
{% assign uses_minimal_framework = false %}
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half large--col-3 medium--col-4 small--col-6' %}
{% else %}
{% assign uses_minimal_framework = true %}
{% assign grid_item_width = 'span3' %}
{% endif %}
{% assign image_size = 'medium' %}
{% if linklists[page.handle].links.size > 0 %}
{% assign number_of_links = 0 %}
<div class="grid-uniform{% if uses_minimal_framework %} row{% endif %} clearfix">
{% for link in linklists[page.handle].links %}
{% if link.type == 'collection_link' %}
{% comment %}
If we have a collection link.
{% endcomment %}
{% assign collection = link.object %}
{% assign number_of_links = number_of_links | plus: 1 %}
<div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center">
<div class="grid__image product-grid-image">
<a href="{{ link.url }}" class="grid-image--centered">
{% comment %}
Bring in the featured image of the first product in the collection if no collection
image has been uploaded for it.
{% endcomment %}
{% if collection.image %}
<img src="{{ collection | img_url: image_size }}" alt="{{ link.title | escape }}">
{% else %}
{% assign product = collection.products.first %}
<img src="{{ product | img_url: image_size }}" alt="{{ link.title | escape }}">
{% endif %}
</a>
</div>
<p class="collection-grid__item-title">
{{ link.title }}
</p>
</div>
{% if uses_minimal_framework %}
{% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
{% endif %}
{% elsif link.type == 'page_link' %}
I don't know where to edit the code so i copied the part i think it is in. Thank you so much.
Try changing the 3rd line
<div class="col-sm-12">
to this
<div class="col-md-12">
That should resize it to fit more items on the screen.