How do I display all blogs on the one page?
I’d like to show about 6 blogs before the “view all” button - currently can only get 3 (max 4).
@dmwwebartisan sorry, its stewsa
Glad to help. Looking at this, you’ll have to make some changes to your code files.
How comfortable are you with HTML, CSS, and Liquid?
Please share your sections/main-blog.liquid file code. because without editing the code not have done this thing!
Thanks!
Here is the code for sections/main-blog.liquid
{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-main-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 -%}
{%- paginate blog.articles by 20 -%}
# {{ blog.title | escape }}
{%- for article in blog.articles -%}
{%- render 'article-card',
article: article,
media_height: section.settings.image_height,
media_aspect_ratio: article.image.aspect_ratio,
show_image: section.settings.show_image,
show_date: section.settings.show_date,
show_author: section.settings.show_author,
show_excerpt: true
-%}
{%- endfor -%}
{%- if paginate.pages > 1 -%}
{%- render 'pagination', paginate: paginate -%}
{%- endif -%}
{%- endpaginate -%}
{% schema %}
{
"name": "t:sections.main-blog.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "header",
"content": "t:sections.main-blog.settings.header.content"
},
{
"type": "select",
"id": "layout",
"options": [
{
"value": "grid",
"label": "t:sections.main-blog.settings.layout.options__1.label"
},
{
"value": "collage",
"label": "t:sections.main-blog.settings.layout.options__2.label"
}
],
"default": "collage",
"label": "t:sections.main-blog.settings.layout.label",
"info": "t:sections.main-blog.settings.layout.info"
},
{
"type": "checkbox",
"id": "show_image",
"default": true,
"label": "t:sections.main-blog.settings.show_image.label"
},
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "adapt",
"label": "t:sections.main-blog.settings.image_height.options__1.label"
},
{
"value": "small",
"label": "t:sections.main-blog.settings.image_height.options__2.label"
},
{
"value": "medium",
"label": "t:sections.main-blog.settings.image_height.options__3.label"
},
{
"value": "large",
"label": "t:sections.main-blog.settings.image_height.options__4.label"
}
],
"default": "medium",
"label": "t:sections.main-blog.settings.image_height.label",
"info": "t:sections.main-blog.settings.image_height.info"
},
{
"type": "checkbox",
"id": "show_date",
"default": true,
"label": "t:sections.main-blog.settings.show_date.label"
},
{
"type": "checkbox",
"id": "show_author",
"default": false,
"label": "t:sections.main-blog.settings.show_author.label"
},
{
"type": "paragraph",
"content": "t:sections.main-blog.settings.paragraph.content"
},
{
"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
}
]
}
{% endschema %}
Please see below
{% comment %}
Renders an article card for a given blog with settings to either show the image or not.
Accepts:
- blog: {Object} Blog object
- article: {Object} Article object
- media_aspect_ratio: {String} The setting changes the aspect ratio of the article image, if shown
- media_height: {String} The setting changes the height of the article image. Overrides media_aspect_ratio.
- show_image: {String} The setting either show the article image or not. If it's not included it will show the image by default
- show_date: {String} The setting either show the article date or not. If it's not included it will not show the image by default
- show_author: {String} The setting either show the article author or not. If it's not included it will not show the author by default
- show_badge: {String} The setting either show the blog badge or not.
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
Usage:
{% render 'article-card' blog: blog, article: article, show_image: section.settings.show_image %}
{% endcomment %}
{%- if article and article != empty -%}
{%- liquid
assign ratio = 1
if media_aspect_ratio != null
assign ratio = media_aspect_ratio
endif
-%}
{% comment %}
{%- endif -%}
Just came across this post, hope this helps:
Check your “featured-blog.liquid” file.
Scroll down to the “schema” and you should see a setting type “range” with id “post-limit”. Change the “max” to the number you want to display before the “view all” button.
{
"type": "range",
"id": "post_limit",
"min": 2,
"max": 6,
"step": 1,
"default": 3,
"label": "t:sections.featured-blog.settings.post_limit.label"
},
You will then need to adjust the slider “Number of blog posts to show” inside the Shopify editor to match the max limit you set. In this case 6.
1 Like
this works for me! Thanks!