Display Blog Posts As Carousel Slider On Desktop

Hello!

Thanks to the amazing @LitExtension I was able to change my edit my Flickity slider to showcase collections instead of products (FYI- Here is the thread link if anyone needs it!)

I now would like to be able to use the same slider format but this time to showcase my blog posts.

I imagine this means adding a section (blog_post_sllider.liquid) and then editing the below code to pull the blog posts cards instead of the collections cards… I just don’t know what to edit in the code… any suggestions?


{% comment %}
* Make sure you have the Flickity plugin installed and the proper license for this to function on your store
* Plugin, licensing and documentation at https://flickity.metafizzy.co/
{% endcomment %}

{% assign cell_align = section.settings.cell_align %}
{% assign wrap_around = section.settings.wrap_around %}
{% assign img_width = section.settings.img_width | append: 'x' %}

{{ section.settings.title }}

{% for product in collection_main.products limit: collection_limit %}

{% endfor %}
{%- for block in section.blocks -%}
  
    {% render 'card-collection', card_collection: block.settings.collection , media_aspect_ratio: section.settings.image_ratio, columns: 1 %}
  

{%- endfor -%}

{% schema %}
{
"name": "Collection Slider",
"settings": [
{
"type": "color",
"id": "bg",
"label": "Background Color"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Featured Collection Slider"
},
{
  "type": "select",
  "id": "image_ratio",
  "options": [
    {
      "value": "adapt",
      "label": "t:sections.collection-list.settings.image_ratio.options__1.label"
    },
    {
      "value": "portrait",
      "label": "t:sections.collection-list.settings.image_ratio.options__2.label"
    },
    {
      "value": "square",
      "label": "t:sections.collection-list.settings.image_ratio.options__3.label"
    }
  ],
  "default": "square",
  "label": "t:sections.collection-list.settings.image_ratio.label",
  "info": "t:sections.collection-list.settings.image_ratio.info"
},
{
"type": "select",
"id": "cell_align",
"label": "Slide Alignment",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
],
"default": "center"
},
{
"type": "range",
"id": "title_mb",
"min": 30,
"max": 120,
"step": 1,
"unit": "px",
"label": "Title Margin Bottom",
"default": 48
},
{
"type": "select",
"id": "cell_width",
"label": "Choose number of slides to show on start",
"options": [
{
"value": "25%",
"label": "Four"
},
{
"value": "20%",
"label": "Five"
},
{
"value": "16.6666667%",
"label": "Six"
},
{
"value": "12.5%",
"label": "Eight"
}
],
"default": "25%"
},
{
"type": "radio",
"id": "wrap_around",
"label": "Enable Wrap Around (endless scrolling)",
"options": [
{
"value": "true",
"label": "True"
},
{
"value": "false",
"label": "False"
}
],
"default": "true"
},
{
"type": "range",
"id": "mr",
"min": 0,
"max": 48,
"step": 1,
"unit": "px",
"label": "Cell Margin Right",
"default": 16,
"info": "Save page to see changes."
}
],
"blocks": [
  {
    "type": "collection",
    "name": "Collection",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Select collection"
      }
    ]
  }
],
"presets": [
{
"name": "Collection Slider",
"category": "Slider"
}
]
}
{% endschema %}

Thanks in Advance!

SITE: https://ebony-design.myshopify.com/

Password: dawlaw

Hi @Bird_on_a_Wire ,

Please send me the code of featured-blog.liquid file, I will change it for you

@LitExtension Thank you- please see below!

featured-blog.liquid


{{ 'section-featured-blog.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign posts_displayed = section.settings.blog.articles_count
  if section.settings.post_limit <= section.settings.blog.articles_count
    assign posts_exceed_limit = true
    assign posts_displayed = section.settings.post_limit
  endif
-%}

  

    {%- unless section.settings.heading == blank -%}
      

        ## {{ section.settings.heading | escape }}

        {%- if section.settings.blog != blank and section.settings.show_view_all and section.settings.post_limit < section.settings.blog.articles_count -%}
          
            {{ 'sections.featured_blog.view_all' | t }}
          
        {%- endif -%}
      

    {%- endunless -%}
    {%- if section.settings.blog != blank and section.settings.blog.articles_count > 0 -%}
      

      {%- if section.settings.show_view_all and section.settings.post_limit < section.settings.blog.articles_count -%}
        

          
            {{ 'sections.featured_blog.view_all' | t }}
          
        

      {%- endif -%}
    {%- else -%}
      
        

          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        

        
          ## 
            {{ 'sections.featured_blog.onboarding_title' | t }}
          
          

            {{ 'sections.featured_blog.onboarding_content' | t }}
          

        

      

    {%- endif -%}
  

{% schema %}
{
  "name": "t:sections.featured-blog.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Blog posts",
      "label": "t:sections.featured-blog.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "blog",
      "id": "blog",
      "label": "t:sections.featured-blog.settings.blog.label"
    },
    {
      "type": "range",
      "id": "post_limit",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.post_limit.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.columns_desktop.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info"
    },
    {
      "type": "checkbox",
      "id": "show_image",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_image.label",
      "info": "t:sections.featured-blog.settings.show_image.info"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_date.label"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": false,
      "label": "t:sections.featured-blog.settings.show_author.label"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_view_all.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-blog.presets.name",
      "settings": {
        "blog": "News"
      }
    }
  ]
}
{% endschema %}

[email removed]

Hi @Bird_on_a_Wire ,

Please change all code:


{% comment %}
* Make sure you have the Flickity plugin installed and the proper license for this to function on your store
* Plugin, licensing and documentation at https://flickity.metafizzy.co/
{% endcomment %}

{% assign cell_align = section.settings.cell_align %}
{% assign wrap_around = section.settings.wrap_around %}
{% assign img_width = section.settings.img_width | append: 'x' %}

{{ section.settings.title }}

{%- for block in section.blocks -%}
  

    

      {% render 'article-card', blog: section.settings.blog, article: article, media_aspect_ratio: 1.66, show_image: section.settings.show_image, show_date: section.settings.show_date, show_author: section.settings.show_author %}
    

  

{%- endfor -%}

{% schema %}
{
"name": "Blog Slider",
"settings": [
  {
      "type": "text",
      "id": "title",
      "default": "Blog posts",
      "label": "t:sections.featured-blog.settings.heading.label"
    },
{
      "type": "blog",
      "id": "blog",
      "label": "t:sections.featured-blog.settings.blog.label"
    },
    {
      "type": "range",
      "id": "post_limit",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.post_limit.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.columns_desktop.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info"
    },
    {
      "type": "checkbox",
      "id": "show_image",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_image.label",
      "info": "t:sections.featured-blog.settings.show_image.info"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_date.label"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": false,
      "label": "t:sections.featured-blog.settings.show_author.label"
    },
{
"type": "range",
"id": "title_mb",
"min": 30,
"max": 120,
"step": 1,
"unit": "px",
"label": "Title Margin Bottom",
"default": 48
},
{
"type": "select",
"id": "cell_width",
"label": "Choose number of slides to show on start",
"options": [
{
"value": "25%",
"label": "Four"
},
{
"value": "20%",
"label": "Five"
},
{
"value": "16.6666667%",
"label": "Six"
},
{
"value": "12.5%",
"label": "Eight"
}
],
"default": "25%"
},
{
"type": "radio",
"id": "wrap_around",
"label": "Enable Wrap Around (endless scrolling)",
"options": [
{
"value": "true",
"label": "True"
},
{
"value": "false",
"label": "False"
}
],
"default": "true"
},
{
"type": "range",
"id": "mr",
"min": 0,
"max": 48,
"step": 1,
"unit": "px",
"label": "Cell Margin Right",
"default": 16,
"info": "Save page to see changes."
}
],
"presets": [
{
"name": "Blog Slider",
"category": "Slider"
}
]
}
{% endschema %}

Hope it helps!

Hi @LitExtension , I added the replaced the original code in featured-blog.liquid with your new code but two problems

  1. No Blog posts are pulling through into the slider.

And 2. This new code seems to be interfering with the original collection slider which now looks like this- all the images have disappeared and the titles are doubling up

:see_no_evil_monkey:

Hi @Bird_on_a_Wire ,

Did you create blog and select it in Customize?

Hi @LitExtension

I think so?

These are the steps I took

  1. Replaced the code in featured-blog.liquid file with your supplied code and saved

  2. Clicked on customise and then opened my home page

  3. Add a new section- “Blog Slider”

  4. Selected the correct blog “Projects”

  1. Then saved.

Still, nothing showing in the Blog slider and the collections slider is also still glitchy as per my previous post…

Please let me know if I went wrong somewhere along the way?

Hi @Bird_on_a_Wire ,

Please change all code:


{% comment %}
* Make sure you have the Flickity plugin installed and the proper license for this to function on your store
* Plugin, licensing and documentation at https://flickity.metafizzy.co/
{% endcomment %}

{% assign cell_align = section.settings.cell_align %}
{% assign wrap_around = section.settings.wrap_around %}
{% assign img_width = section.settings.img_width | append: 'x' %}

{{ section.settings.title }}

{%- for article in section.settings.blog.articles limit: section.settings.post_limit -%}  
  

    

      {% render 'article-card', blog: section.settings.blog, article: article, media_aspect_ratio: 1.66, show_image: section.settings.show_image, show_date: section.settings.show_date, show_author: section.settings.show_author %}
    

  

{%- endfor -%}

{% schema %}
{
"name": "Blog Slider",
"settings": [
  {
      "type": "text",
      "id": "title",
      "default": "Blog posts",
      "label": "t:sections.featured-blog.settings.heading.label"
    },
{
      "type": "blog",
      "id": "blog",
      "label": "t:sections.featured-blog.settings.blog.label"
    },
    {
      "type": "range",
      "id": "post_limit",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.post_limit.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.columns_desktop.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info"
    },
    {
      "type": "checkbox",
      "id": "show_image",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_image.label",
      "info": "t:sections.featured-blog.settings.show_image.info"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_date.label"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": false,
      "label": "t:sections.featured-blog.settings.show_author.label"
    },
{
"type": "range",
"id": "title_mb",
"min": 30,
"max": 120,
"step": 1,
"unit": "px",
"label": "Title Margin Bottom",
"default": 48
},
{
"type": "select",
"id": "cell_width",
"label": "Choose number of slides to show on start",
"options": [
{
"value": "25%",
"label": "Four"
},
{
"value": "20%",
"label": "Five"
},
{
"value": "16.6666667%",
"label": "Six"
},
{
"value": "12.5%",
"label": "Eight"
}
],
"default": "25%"
},
{
"type": "radio",
"id": "wrap_around",
"label": "Enable Wrap Around (endless scrolling)",
"options": [
{
"value": "true",
"label": "True"
},
{
"value": "false",
"label": "False"
}
],
"default": "true"
},
{
"type": "range",
"id": "mr",
"min": 0,
"max": 48,
"step": 1,
"unit": "px",
"label": "Cell Margin Right",
"default": 16,
"info": "Save page to see changes."
}
],
"presets": [
{
"name": "Blog Slider",
"category": "Slider"
}
]
}
{% endschema %}

Hello again @LitExtension Added in the new code but something is still not right

Here is what the slider looks like now

And the original collections slider is also still buggy

I appreciate the back and forth-on this!

Hi @Bird_on_a_Wire ,

Please change all code:


{{ 'section-featured-blog.css' | asset_url | stylesheet_tag }}

{% comment %}
* Make sure you have the Flickity plugin installed and the proper license for this to function on your store
* Plugin, licensing and documentation at https://flickity.metafizzy.co/
{% endcomment %}

{% assign cell_align = section.settings.cell_align %}
{% assign wrap_around = section.settings.wrap_around %}
{% assign img_width = section.settings.img_width | append: 'x' %}

{{ section.settings.title }}

{%- for article in section.settings.blog.articles limit: section.settings.post_limit -%}  
  

    

      {% render 'article-card', blog: section.settings.blog, article: article, media_aspect_ratio: 1.66, show_image: section.settings.show_image, show_date: section.settings.show_date, show_author: section.settings.show_author %}
    

  

{%- endfor -%}

{% schema %}
{
"name": "Blog Slider",
"settings": [
  {
      "type": "text",
      "id": "title",
      "default": "Blog posts",
      "label": "t:sections.featured-blog.settings.heading.label"
    },
{
      "type": "blog",
      "id": "blog",
      "label": "t:sections.featured-blog.settings.blog.label"
    },
    {
      "type": "range",
      "id": "post_limit",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.post_limit.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.columns_desktop.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info"
    },
    {
      "type": "checkbox",
      "id": "show_image",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_image.label",
      "info": "t:sections.featured-blog.settings.show_image.info"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_date.label"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": false,
      "label": "t:sections.featured-blog.settings.show_author.label"
    },
{
"type": "range",
"id": "title_mb",
"min": 30,
"max": 120,
"step": 1,
"unit": "px",
"label": "Title Margin Bottom",
"default": 48
},
{
"type": "select",
"id": "cell_width",
"label": "Choose number of slides to show on start",
"options": [
{
"value": "25%",
"label": "Four"
},
{
"value": "20%",
"label": "Five"
},
{
"value": "16.6666667%",
"label": "Six"
},
{
"value": "12.5%",
"label": "Eight"
}
],
"default": "25%"
},
{
"type": "radio",
"id": "wrap_around",
"label": "Enable Wrap Around (endless scrolling)",
"options": [
{
"value": "true",
"label": "True"
},
{
"value": "false",
"label": "False"
}
],
"default": "true"
},
{
"type": "range",
"id": "mr",
"min": 0,
"max": 48,
"step": 1,
"unit": "px",
"label": "Cell Margin Right",
"default": 16,
"info": "Save page to see changes."
}
],
"presets": [
{
"name": "Blog Slider",
"category": "Slider"
}
]
}
{% endschema %}

Thank you @LitExtension you are a star :star:

1 Like