Jul 29, 2021 3:32 PM
I have a blog filter option on my blog and here are option I want to keep and remove on the blog please check screenshot:
And here is the code used for the blog filter:
{% set my_tags = blog_tags('default', 250) %}
{% set currentURL = content.absolute_url|regex_replace('^(http|https):', '') %}
<div class="blog-tag-filter">
<select class="blog-tag-filter__drop-down">
<option {% if currentURL == group.absolute_url|regex_replace('^(http|https):', '') %}selected="selected"{% endif %} value="{{ group.absolute_url }}">{{ module.default_filter_text }}</option>
{% for item in my_tags %}
<option {% if currentURL == blog_tag_url(group.id, item.slug) %}selected="selected"{% endif %} value="{{ blog_tag_url(group.id, item.slug)|regex_replace('^(http|https):', '') }}">{{ item }}</option>
{% endfor %}
</select>
</div>
Please help me change it to filter the blogs using custom tags. I want 3 options only in the filter dropdown:
Grain Free
Keto/Paleo
Main Dishes
Solved! Go to Solution.
Jul 29, 2021 4:14 PM - edited Jul 29, 2021 4:18 PM
Quickest solution is an if statement.
{% set my_tags = blog_tags('default', 250) %}
{% set currentURL = content.absolute_url|regex_replace('^(http|https):', '') %}
<div class="blog-tag-filter">
<select class="blog-tag-filter__drop-down">
<option {% if currentURL == group.absolute_url|regex_replace('^(http|https):', '') %}selected="selected"{% endif %} value="{{ group.absolute_url }}">{{ module.default_filter_text }}</option>
{% for item in my_tags %}
{% if item == 'Grain Free' || item == 'Keto/Paleo' || item == 'Main Dishes' %}
<option {% if currentURL == blog_tag_url(group.id, item.slug) %}selected="selected"{% endif %} value="{{ blog_tag_url(group.id, item.slug)|regex_replace('^(http|https):', '') }}">{{ item }}</option>
{% endif %}
{% endfor %}
</select>
</div>
Aug 25, 2021 2:59 PM
Sure! So instead of looping through the tags, you cloud do something like this:
{% set currentURL = content.absolute_url|regex_replace('^(http|https):', '') %}
<div class="blog-tag-filter">
<select class="blog-tag-filter__drop-down">
<option {% if currentURL == group.absolute_url|regex_replace('^(http|https):', '') %} selected="selected" {% endif %} value="{{ group.absolute_url }}">{{ module.default_filter_text }}</option>
<option {% if currentURL == blog_tag_url(group.id, 'food-focus') %} selected="selected" {% endif %} value="{{ blog_tag_url(group.id, 'food-focus')|regex_replace('^(http|https):', '') }}">Food Focus</option>
<option {% if currentURL == blog_tag_url(group.id, 'nutrient-focus') %} selected="selected" {% endif %} value="{{ blog_tag_url(group.id, 'nutrient-focus')|regex_replace('^(http|https):', '') }}">Nutrient Focus</option>
<option {% if currentURL == blog_tag_url(group.id, 'spring') %} selected="selected" {% endif %} value="{{ blog_tag_url(group.id, 'spring')|regex_replace('^(http|https):', '') }}">Spring</option>
<option {% if currentURL == blog_tag_url(group.id, 'summer') %} selected="selected" {% endif %} value="{{ blog_tag_url(group.id, 'summer')|regex_replace('^(http|https):', '') }}">Summer</option>
<option {% if currentURL == blog_tag_url(group.id, 'fall') %} selected="selected" {% endif %} value="{{ blog_tag_url(group.id, 'fall')|regex_replace('^(http|https):', '') }}">Fall</option>
<option {% if currentURL == blog_tag_url(group.id, 'winter') %} selected="selected" {% endif %} value="{{ blog_tag_url(group.id, 'winter')|regex_replace('^(http|https):', '') }}">Winter</option>
</select>
</div>
But it is not a great solution, as you need to manually add new tags when they are created to show up in the filter. That said, you would also need to update the if statement in the previous solution, so I guess you could work with this.
Please check if I have the 'tag slug' correct for eacht <option>
Sep 8, 2021 3:39 PM
Hi @uzma ,
Try this:
{# Set layout style #}
{% if module.layout_style == 'card' %}
{% set list_type = 'card' %}
{% elif module.layout_style == 'list' %}
{% set list_type = 'list' %}
{% endif %}
<section class="blog-index">
{# Blog author/tag header #}
{% if blog_author || tag %}
<div class="blog-subheader">
{% if blog_author %}
<p>Posts by</p>
<h2>{{ blog_author.display_name }}</h2>
{% if blog_author.has_social_profiles %}
<div class="blog-subheader__author-links">
{% if blog_author.website %}
<a href="{{ blog_author.website }}" target="_blank" rel="noopener">
{% icon
name='link',
purpose='semantic',
style='SOLID',
title='Follow me on my website',
width='10'
%}
</a>
{% endif %}
{% if blog_author.facebook %}
<a href="{{ blog_author.facebook }}" target="_blank" rel="noopener">
{% icon
name='facebook-f',
purpose='semantic',
style='SOLID',
title='Follow me on Facebook',
width='10'
%}
</a>
{% endif %}
{% if blog_author.linkedin %}
<a href="{{ blog_author.linkedin }}" target="_blank" rel="noopener">
{% icon
name='linkedin-in',
purpose='semantic',
style='SOLID',
title='Follow me on LinkedIn',
width='18'
%}
</a>
{% endif %}
{% if blog_author.twitter %}
<a href="{{ blog_author.twitter }}" target="_blank" rel="noopener">
{% icon
name='twitter',
purpose='semantic',
style='SOLID',
title='Follow me on Twitter',
width='18'
%}
</a>
{% endif %}
</div>
{% endif %}
<p>{{ blog_author.bio }}</p>
{% elif tag %}
<p>Posts about:</p>
<h2>{{ page_meta.html_title|split(' | ')|last }}</h2>
{% endif %}
</div>
{% endif %}
{# End blog author/tag header #}
{% for content in contents %}
{# Blog listing article #}
<article class="blog-index__post blog-index__post--{{ list_type }}">
{# Featured image #}
{# This checks to see if a user is opted into the blog listing editing experience. If they are it uses the
conditional from the module. If they are not it uses the conditional from blog settings #}
{% if blog.listing_page_id %}
{% if content.featured_image and module.featured_image %}
<a href="{{content.absolute_url}}"
class="blog-index__post-image-wrapper blog-index__post-image-wrapper--{{ list_type }}">
<img class="blog-index__post-image blog-index__post-image--{{ list_type }}" src="{{ content.featured_image }}"
loading="lazy" alt="{{ content.featured_image_alt_text }}">
</a>
{% endif %}
{% else %}
{% if content.featured_image and group.use_featured_image_in_summary %}
<a href="{{content.absolute_url}}"
class="blog-index__post-image-wrapper blog-index__post-image-wrapper--{{ list_type }}">
<img class="blog-index__post-image blog-index__post-image--{{ list_type }}" src="{{ content.featured_image }}"
loading="lazy" alt="{{ content.featured_image_alt_text }}">
</a>
{% endif %}
{% endif %}
{# End featured image #}
{# Article body #}
<section
class="blog-index__post-content blog-index__post-content--{{ list_type }} {% if !content.featured_image or !group.use_featured_image_in_summary or !module.featured_image %}blog-index__post-content--full-width{% endif %}">
{# Title #}
{% if module.post_title %}
<h3 class="blog-index__post-title blog-index__post-title--{{ list_type }}"><a href="{{ content.absolute_url }}">{{
content.name }}</a></h3>
{% endif %}
{# End title #}
{# Date #}
{% if module.publish_date %}
<time class="blog-index__post-date blog-index__post-date--{{ list_type }}"
datetime="{{ content.publish_date }}">{{ content.publish_date_localized }}</time>
{% endif %}
{# End date #}
{# Summary #}
{# This checks to see if a user is opted into the blog listing editing experience. If they are it uses the
conditional from the module. If they are not it uses the conditional from blog settings #}
{% if blog.listing_page_id %}
{% if module.description %}
<div class="blog-index__post-post-summary blog-index__post-post-summary--{{ list_type }}">
{% if content.post_body is string_containing "
<!--more-->" %}
{{ content.post_list_content }}
{% else %}
{{ content.post_list_content|truncatehtml(170) }}
{% endif %}
</div>
{% endif %}
{% else %}
{% if content_group.show_summary_in_listing %}
<div class="blog-index__post-post-summary blog-index__post-post-summary--{{ list_type }}">
{% if content.post_body is string_containing "
<!--more-->" %}
{{ content.post_list_content }}
{% else %}
{{ content.post_list_content|truncatehtml(170) }}
{% endif %}
</div>
{% endif %}
{% endif %}
{# End summary #}
{# Author #}
{% if module.author %}
<div class="blog-index__post-author blog-index__post-author--{{ list_type }}">
{% if content.blog_author.avatar %}
<div class="blog-index__post-author-image-wrapper blog-index__post-author-image-wrapper--{{ list_type }}">
<img class="blog-index__post-author-image blog-index__post-author-image--{{ list_type }}"
src="{{ content.blog_author.avatar }}" width="45" loading="eager"
alt="{{ content.blog_post_author.display_name }}">
</div>
{% endif %}
<a class="blog-index__post-author-name blog-index__post-author-name--{{ list_type }}"
href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{
content.blog_post_author.display_name }}</a>
</div>
{% endif %}
{# End author #}
{# Read more button #}
{% if module.read_more %}
<a class="blog-index__post-button blog-index__post-button--{{ list_type }} button"
href="{{ content.absolute_url }}">{{ module.read_more_text }}</a>
{% endif %}
{# End read more button #}
{# Tags #}
{% if content.tag_list %}
<div class="blog-post__tags">
{% for tag in content.tag_list %}
<a class="blog-post__tag-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>
{% endfor %}
</div>
{% endif %}
<!-- {% if module.tags and content.tag_list %}
<div class="blog-index__post-tags blog-index__post-tags--{{ list_type }}">
<span>Tags: </span>
{% for tag in content.tag_list %}
<a class="blog-index__post-tag-link blog-index__post-tag-link--{{ list_type }}" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}{% if !loop.last%},{% endif %}</a>
{% endfor %}
</div>
{% endif %} -->
{# End tags #}
</section>
{# End article body #}
</article>
{# End blog listing article #}
{% endfor %}
</section>
Sep 8, 2021 4:24 PM
Sure, let me try this. 🙂
Sep 8, 2021 3:44 PM
There is one last thing please 🙂
I am unable to make this search form in center and a little bit downward so that it doesn't cover the heading "Articles" on the banner.
https://blog.eatforlifebymarsha.com/articles
Sep 8, 2021 3:56 PM
Your search form seems to be in a column that is set to half width (50%), make sure it covers the whole width of the header.
If you have done that, you should be able to achieve what you want with the following styling:
.blog-search {
background-color: transparent;
border: 0;
margin: 2rem auto 0 auto; // Change this to match the correct height.
max-width: 300px;
padding: 0;
}
Or play with the background-position of your background-image.
Sep 8, 2021 3:39 PM
Hi @uzma ,
Try this:
{# Set layout style #}
{% if module.layout_style == 'card' %}
{% set list_type = 'card' %}
{% elif module.layout_style == 'list' %}
{% set list_type = 'list' %}
{% endif %}
<section class="blog-index">
{# Blog author/tag header #}
{% if blog_author || tag %}
<div class="blog-subheader">
{% if blog_author %}
<p>Posts by</p>
<h2>{{ blog_author.display_name }}</h2>
{% if blog_author.has_social_profiles %}
<div class="blog-subheader__author-links">
{% if blog_author.website %}
<a href="{{ blog_author.website }}" target="_blank" rel="noopener">
{% icon
name='link',
purpose='semantic',
style='SOLID',
title='Follow me on my website',
width='10'
%}
</a>
{% endif %}
{% if blog_author.facebook %}
<a href="{{ blog_author.facebook }}" target="_blank" rel="noopener">
{% icon
name='facebook-f',
purpose='semantic',
style='SOLID',
title='Follow me on Facebook',
width='10'
%}
</a>
{% endif %}
{% if blog_author.linkedin %}
<a href="{{ blog_author.linkedin }}" target="_blank" rel="noopener">
{% icon
name='linkedin-in',
purpose='semantic',
style='SOLID',
title='Follow me on LinkedIn',
width='18'
%}
</a>
{% endif %}
{% if blog_author.twitter %}
<a href="{{ blog_author.twitter }}" target="_blank" rel="noopener">
{% icon
name='twitter',
purpose='semantic',
style='SOLID',
title='Follow me on Twitter',
width='18'
%}
</a>
{% endif %}
</div>
{% endif %}
<p>{{ blog_author.bio }}</p>
{% elif tag %}
<p>Posts about:</p>
<h2>{{ page_meta.html_title|split(' | ')|last }}</h2>
{% endif %}
</div>
{% endif %}
{# End blog author/tag header #}
{% for content in contents %}
{# Blog listing article #}
<article class="blog-index__post blog-index__post--{{ list_type }}">
{# Featured image #}
{# This checks to see if a user is opted into the blog listing editing experience. If they are it uses the
conditional from the module. If they are not it uses the conditional from blog settings #}
{% if blog.listing_page_id %}
{% if content.featured_image and module.featured_image %}
<a href="{{content.absolute_url}}"
class="blog-index__post-image-wrapper blog-index__post-image-wrapper--{{ list_type }}">
<img class="blog-index__post-image blog-index__post-image--{{ list_type }}" src="{{ content.featured_image }}"
loading="lazy" alt="{{ content.featured_image_alt_text }}">
</a>
{% endif %}
{% else %}
{% if content.featured_image and group.use_featured_image_in_summary %}
<a href="{{content.absolute_url}}"
class="blog-index__post-image-wrapper blog-index__post-image-wrapper--{{ list_type }}">
<img class="blog-index__post-image blog-index__post-image--{{ list_type }}" src="{{ content.featured_image }}"
loading="lazy" alt="{{ content.featured_image_alt_text }}">
</a>
{% endif %}
{% endif %}
{# End featured image #}
{# Article body #}
<section
class="blog-index__post-content blog-index__post-content--{{ list_type }} {% if !content.featured_image or !group.use_featured_image_in_summary or !module.featured_image %}blog-index__post-content--full-width{% endif %}">
{# Title #}
{% if module.post_title %}
<h3 class="blog-index__post-title blog-index__post-title--{{ list_type }}"><a href="{{ content.absolute_url }}">{{
content.name }}</a></h3>
{% endif %}
{# End title #}
{# Date #}
{% if module.publish_date %}
<time class="blog-index__post-date blog-index__post-date--{{ list_type }}"
datetime="{{ content.publish_date }}">{{ content.publish_date_localized }}</time>
{% endif %}
{# End date #}
{# Summary #}
{# This checks to see if a user is opted into the blog listing editing experience. If they are it uses the
conditional from the module. If they are not it uses the conditional from blog settings #}
{% if blog.listing_page_id %}
{% if module.description %}
<div class="blog-index__post-post-summary blog-index__post-post-summary--{{ list_type }}">
{% if content.post_body is string_containing "
<!--more-->" %}
{{ content.post_list_content }}
{% else %}
{{ content.post_list_content|truncatehtml(170) }}
{% endif %}
</div>
{% endif %}
{% else %}
{% if content_group.show_summary_in_listing %}
<div class="blog-index__post-post-summary blog-index__post-post-summary--{{ list_type }}">
{% if content.post_body is string_containing "
<!--more-->" %}
{{ content.post_list_content }}
{% else %}
{{ content.post_list_content|truncatehtml(170) }}
{% endif %}
</div>
{% endif %}
{% endif %}
{# End summary #}
{# Author #}
{% if module.author %}
<div class="blog-index__post-author blog-index__post-author--{{ list_type }}">
{% if content.blog_author.avatar %}
<div class="blog-index__post-author-image-wrapper blog-index__post-author-image-wrapper--{{ list_type }}">
<img class="blog-index__post-author-image blog-index__post-author-image--{{ list_type }}"
src="{{ content.blog_author.avatar }}" width="45" loading="eager"
alt="{{ content.blog_post_author.display_name }}">
</div>
{% endif %}
<a class="blog-index__post-author-name blog-index__post-author-name--{{ list_type }}"
href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{
content.blog_post_author.display_name }}</a>
</div>
{% endif %}
{# End author #}
{# Read more button #}
{% if module.read_more %}
<a class="blog-index__post-button blog-index__post-button--{{ list_type }} button"
href="{{ content.absolute_url }}">{{ module.read_more_text }}</a>
{% endif %}
{# End read more button #}
{# Tags #}
{% if content.tag_list %}
<div class="blog-post__tags">
{% for tag in content.tag_list %}
<a class="blog-post__tag-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>
{% endfor %}
</div>
{% endif %}
<!-- {% if module.tags and content.tag_list %}
<div class="blog-index__post-tags blog-index__post-tags--{{ list_type }}">
<span>Tags: </span>
{% for tag in content.tag_list %}
<a class="blog-index__post-tag-link blog-index__post-tag-link--{{ list_type }}" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}{% if !loop.last%},{% endif %}</a>
{% endfor %}
</div>
{% endif %} -->
{# End tags #}
</section>
{# End article body #}
</article>
{# End blog listing article #}
{% endfor %}
</section>
Sep 8, 2021 3:42 PM
Perfect, Thank you very much again. 🙂
Sep 8, 2021 3:11 PM
Hi @uzma,
Ofcourse! Could you share the code of your blog listing? I could make the right changes so you can update your code.
It's quite simple actually, you just need to change the div with the class blog-index__post-image-wrapper to an <a> tag and at the right href which can be achieved with {{post.absolute_url}} if your loop looks something like this:
{% for post in contents %}
<article class="blog-index__post blog-index__post--list">
<a href="{{post.absolute_url}}" class="blog-index__post-image-wrapper blog-index__post-image-wrapper--list">
<img class="blog-index__post-image blog-index__post-image--list" src="{{post.post_list_summary_featured_image}}" loading="lazy" alt="{{post.featured_image_alt_text|escape}}">
</a>
</article>
{% endfor %}
Sep 8, 2021 3:36 PM
Yes sure, here is the code of blog listing, I can't figure where exactly I should add or change the code please advise.
{# Set layout style #}
{% if module.layout_style == 'card' %}
{% set list_type = 'card' %}
{% elif module.layout_style == 'list' %}
{% set list_type = 'list' %}
{% endif %}
<section class="blog-index">
{# Blog author/tag header #}
{% if blog_author || tag %}
<div class="blog-subheader">
{% if blog_author %}
<p>Posts by</p>
<h2>{{ blog_author.display_name }}</h2>
{% if blog_author.has_social_profiles %}
<div class="blog-subheader__author-links">
{% if blog_author.website %}
<a href="{{ blog_author.website }}" target="_blank" rel="noopener">
{% icon
name='link',
purpose='semantic',
style='SOLID',
title='Follow me on my website',
width='10'
%}
</a>
{% endif %}
{% if blog_author.facebook %}
<a href="{{ blog_author.facebook }}" target="_blank" rel="noopener">
{% icon
name='facebook-f',
purpose='semantic',
style='SOLID',
title='Follow me on Facebook',
width='10'
%}
</a>
{% endif %}
{% if blog_author.linkedin %}
<a href="{{ blog_author.linkedin }}" target="_blank" rel="noopener">
{% icon
name='linkedin-in',
purpose='semantic',
style='SOLID',
title='Follow me on LinkedIn',
width='18'
%}
</a>
{% endif %}
{% if blog_author.twitter %}
<a href="{{ blog_author.twitter }}" target="_blank" rel="noopener">
{% icon
name='twitter',
purpose='semantic',
style='SOLID',
title='Follow me on Twitter',
width='18'
%}
</a>
{% endif %}
</div>
{% endif %}
<p>{{ blog_author.bio }}</p>
{% elif tag %}
<p>Posts about:</p>
<h2>{{ page_meta.html_title|split(' | ')|last }}</h2>
{% endif %}
</div>
{% endif %}
{# End blog author/tag header #}
{% for content in contents %}
{# Blog listing article #}
<article class="blog-index__post blog-index__post--{{ list_type }}">
{# Featured image #}
{# This checks to see if a user is opted into the blog listing editing experience. If they are it uses the conditional from the module. If they are not it uses the conditional from blog settings #}
{% if blog.listing_page_id %}
{% if content.featured_image and module.featured_image %}
<div class="blog-index__post-image-wrapper blog-index__post-image-wrapper--{{ list_type }}">
<img class="blog-index__post-image blog-index__post-image--{{ list_type }}" src="{{ content.featured_image }}" loading="lazy" alt="{{ content.featured_image_alt_text }}">
</div>
{% endif %}
{% else %}
{% if content.featured_image and group.use_featured_image_in_summary %}
<div class="blog-index__post-image-wrapper blog-index__post-image-wrapper--{{ list_type }}">
<img class="blog-index__post-image blog-index__post-image--{{ list_type }}" src="{{ content.featured_image }}" loading="lazy" alt="{{ content.featured_image_alt_text }}">
</div>
{% endif %}
{% endif %}
{# End featured image #}
{# Article body #}
<section class="blog-index__post-content blog-index__post-content--{{ list_type }} {% if !content.featured_image or !group.use_featured_image_in_summary or !module.featured_image %}blog-index__post-content--full-width{% endif %}">
{# Title #}
{% if module.post_title %}
<h3 class="blog-index__post-title blog-index__post-title--{{ list_type }}"><a href="{{ content.absolute_url }}">{{ content.name }}</a></h3>
{% endif %}
{# End title #}
{# Date #}
{% if module.publish_date %}
<time class="blog-index__post-date blog-index__post-date--{{ list_type }}" datetime="{{ content.publish_date }}">{{ content.publish_date_localized }}</time>
{% endif %}
{# End date #}
{# Summary #}
{# This checks to see if a user is opted into the blog listing editing experience. If they are it uses the conditional from the module. If they are not it uses the conditional from blog settings #}
{% if blog.listing_page_id %}
{% if module.description %}
<div class="blog-index__post-post-summary blog-index__post-post-summary--{{ list_type }}">
{% if content.post_body is string_containing "<!--more-->" %}
{{ content.post_list_content }}
{% else %}
{{ content.post_list_content|truncatehtml(170) }}
{% endif %}
</div>
{% endif %}
{% else %}
{% if content_group.show_summary_in_listing %}
<div class="blog-index__post-post-summary blog-index__post-post-summary--{{ list_type }}">
{% if content.post_body is string_containing "<!--more-->" %}
{{ content.post_list_content }}
{% else %}
{{ content.post_list_content|truncatehtml(170) }}
{% endif %}
</div>
{% endif %}
{% endif %}
{# End summary #}
{# Author #}
{% if module.author %}
<div class="blog-index__post-author blog-index__post-author--{{ list_type }}">
{% if content.blog_author.avatar %}
<div class="blog-index__post-author-image-wrapper blog-index__post-author-image-wrapper--{{ list_type }}">
<img class="blog-index__post-author-image blog-index__post-author-image--{{ list_type }}" src="{{ content.blog_author.avatar }}" width="45" loading="eager" alt="{{ content.blog_post_author.display_name }}">
</div>
{% endif %}
<a class="blog-index__post-author-name blog-index__post-author-name--{{ list_type }}" href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a>
</div>
{% endif %}
{# End author #}
{# Read more button #}
{% if module.read_more %}
<a class="blog-index__post-button blog-index__post-button--{{ list_type }} button" href="{{ content.absolute_url }}">{{ module.read_more_text }}</a>
{% endif %}
{# End read more button #}
{# Tags #}
{% if content.tag_list %}
<div class="blog-post__tags">
{% for tag in content.tag_list %}
<a class="blog-post__tag-link" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>
{% endfor %}
</div>
{% endif %}
<!-- {% if module.tags and content.tag_list %}
<div class="blog-index__post-tags blog-index__post-tags--{{ list_type }}">
<span>Tags: </span>
{% for tag in content.tag_list %}
<a class="blog-index__post-tag-link blog-index__post-tag-link--{{ list_type }}" href="{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}{% if !loop.last%},{% endif %}</a>
{% endfor %}
</div>
{% endif %} -->
{# End tags #}
</section>
{# End article body #}
</article>
{# End blog listing article #}
{% endfor %}
</section>
Sep 8, 2021 3:03 PM
Hi,
Can you please also advise how I can make the images in the feed clickable?
Aug 25, 2021 3:07 PM
Aug 25, 2021 3:03 PM
Perfect, Thank you very much @Teun You are amazing. 🙂
Aug 25, 2021 2:59 PM
Sure! So instead of looping through the tags, you cloud do something like this:
{% set currentURL = content.absolute_url|regex_replace('^(http|https):', '') %}
<div class="blog-tag-filter">
<select class="blog-tag-filter__drop-down">
<option {% if currentURL == group.absolute_url|regex_replace('^(http|https):', '') %} selected="selected" {% endif %} value="{{ group.absolute_url }}">{{ module.default_filter_text }}</option>
<option {% if currentURL == blog_tag_url(group.id, 'food-focus') %} selected="selected" {% endif %} value="{{ blog_tag_url(group.id, 'food-focus')|regex_replace('^(http|https):', '') }}">Food Focus</option>
<option {% if currentURL == blog_tag_url(group.id, 'nutrient-focus') %} selected="selected" {% endif %} value="{{ blog_tag_url(group.id, 'nutrient-focus')|regex_replace('^(http|https):', '') }}">Nutrient Focus</option>
<option {% if currentURL == blog_tag_url(group.id, 'spring') %} selected="selected" {% endif %} value="{{ blog_tag_url(group.id, 'spring')|regex_replace('^(http|https):', '') }}">Spring</option>
<option {% if currentURL == blog_tag_url(group.id, 'summer') %} selected="selected" {% endif %} value="{{ blog_tag_url(group.id, 'summer')|regex_replace('^(http|https):', '') }}">Summer</option>
<option {% if currentURL == blog_tag_url(group.id, 'fall') %} selected="selected" {% endif %} value="{{ blog_tag_url(group.id, 'fall')|regex_replace('^(http|https):', '') }}">Fall</option>
<option {% if currentURL == blog_tag_url(group.id, 'winter') %} selected="selected" {% endif %} value="{{ blog_tag_url(group.id, 'winter')|regex_replace('^(http|https):', '') }}">Winter</option>
</select>
</div>
But it is not a great solution, as you need to manually add new tags when they are created to show up in the filter. That said, you would also need to update the if statement in the previous solution, so I guess you could work with this.
Please check if I have the 'tag slug' correct for eacht <option>
Aug 25, 2021 2:46 PM
Can you please update this code according to your suggested solution and paste the updated one here? how I can remove the loop and output the options one by one?
{% set my_tags = blog_tags('default', 250) %}
{% set currentURL = content.absolute_url|regex_replace('^(http|https):', '') %}
<div class="blog-tag-filter">
<select class="blog-tag-filter__drop-down">
<option {% if currentURL == group.absolute_url|regex_replace('^(http|https):', '') %}selected="selected"{% endif %} value="{{ group.absolute_url }}">{{ module.default_filter_text }}</option>
{% for item in my_tags %}
{% if item == 'Food Focus' || item == 'Nutrient Focus' || item == 'Spring' || item == 'Summer' || item == 'Fall' || item == 'Winter' %}
<option {% if currentURL == blog_tag_url(group.id, item.slug) %}selected="selected"{% endif %} value="{{ blog_tag_url(group.id, item.slug)|regex_replace('^(http|https):', '') }}">{{ item }}</option>
{% endif %}
{% endfor %}
</select>
</div>
Aug 25, 2021 2:17 PM
Hi @uzma ,
The blog_tags function does not has an parameter for order. So this might need some custom work. In this case, you might be better of skipping the loop as you want to exclude certain tags and determin the order. You could just output the options one by one in the order that you want them. Is that something you could work with? If you want to show new tags as soon as they get added, then keep the current code.
Aug 24, 2021 11:59 AM
on front end the order is not being displayed the same.
Aug 24, 2021 11:58 AM
Hi @Teun can you please help me with one more thing to add in the code you advised?
Jul 29, 2021 5:09 PM
Awesome! you are a life saver. Thank you very much 😊
Jul 29, 2021 4:14 PM - edited Jul 29, 2021 4:18 PM
Quickest solution is an if statement.
{% set my_tags = blog_tags('default', 250) %}
{% set currentURL = content.absolute_url|regex_replace('^(http|https):', '') %}
<div class="blog-tag-filter">
<select class="blog-tag-filter__drop-down">
<option {% if currentURL == group.absolute_url|regex_replace('^(http|https):', '') %}selected="selected"{% endif %} value="{{ group.absolute_url }}">{{ module.default_filter_text }}</option>
{% for item in my_tags %}
{% if item == 'Grain Free' || item == 'Keto/Paleo' || item == 'Main Dishes' %}
<option {% if currentURL == blog_tag_url(group.id, item.slug) %}selected="selected"{% endif %} value="{{ blog_tag_url(group.id, item.slug)|regex_replace('^(http|https):', '') }}">{{ item }}</option>
{% endif %}
{% endfor %}
</select>
</div>