How to change blog filter module to show custom tags in filter dropdown instead of the default tags

SOLVE
uzma
Participant | Partner

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:

Screenshot 2021-07-30 at 12.23.33 AM.png

 

 

 

 

 

 

 

 

 

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

0 Upvotes
3 Accepted solutions

Accepted Solutions
Teun
Solution
Top Contributor | Diamond Partner

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>

Did my answer solve your issue? Help the community by marking it as the solution.

View solution in original post

Teun
Solution
Top Contributor | Diamond Partner

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>

Did my answer solve your issue? Help the community by marking it as the solution.

View solution in original post

0 Upvotes
Teun
Solution
Top Contributor | Diamond Partner

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>
Did my answer solve your issue? Help the community by marking it as the solution.

View solution in original post

17 Replies 17
Teun
Solution
Top Contributor | Diamond Partner

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>

Did my answer solve your issue? Help the community by marking it as the solution.

View solution in original post

uzma
Participant | Partner

Awesome! you are a life saver. Thank you very much 😊

uzma
Participant | Partner

Hi @Teun can you please help me with one more thing to add in the code you advised?

 want the blog tags to have a particular order, like the following.
 
Tag names and their order:
 
Food Focus
Nutrient Focus
Spring
Summer
Fall
Winter
0 Upvotes
uzma
Participant | Partner

on front end the order is not being displayed the same.

 

Screenshot 2021-08-24 at 8.59.16 PM.png

0 Upvotes
Teun
Top Contributor | Diamond Partner

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.

Did my answer solve your issue? Help the community by marking it as the solution.
0 Upvotes
uzma
Participant | Partner

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>

0 Upvotes
Teun
Solution
Top Contributor | Diamond Partner

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>

Did my answer solve your issue? Help the community by marking it as the solution.

View solution in original post

0 Upvotes
uzma
Participant | Partner

Perfect, Thank you very much @Teun You are amazing. 🙂

Teun
Top Contributor | Diamond Partner

No problem @uzma ! Happy to help.

Did my answer solve your issue? Help the community by marking it as the solution.
uzma
Participant | Partner

Hi,

 

Can you please also advise how I can make the images in the feed clickable?

https://blog.eatforlifebymarsha.com/articles

0 Upvotes
Teun
Top Contributor | Diamond Partner

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 %}

 

Did my answer solve your issue? Help the community by marking it as the solution.
0 Upvotes
uzma
Participant | Partner

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>

0 Upvotes
Teun
Solution
Top Contributor | Diamond Partner

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>
Did my answer solve your issue? Help the community by marking it as the solution.

View solution in original post

uzma
Participant | Partner

Perfect, Thank you very much again. 🙂

uzma
Participant | Partner

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

Screenshot 2021-09-09 at 12.44.09 AM.png

0 Upvotes
Teun
Top Contributor | Diamond Partner

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.

Did my answer solve your issue? Help the community by marking it as the solution.
0 Upvotes
uzma
Participant | Partner

Sure, let me try this. 🙂

0 Upvotes