Shopify Custom Blog Posts – Responsive Blog Grid Display

                    <!-- 
========================================
Section Name: Custom Blog Posts
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does: 
- Displays blog posts in a responsive grid layout with customizable columns.
- Features animated hover effects, customizable image aspect ratios, and post metadata.
- Includes options for showing/hiding date, author, and post excerpts.
- Fully responsive design with adaptive sizing for mobile, tablet, and desktop.

Promotion: 
Showcase your blog content with an elegant, customizable grid layout. Engage readers with attractive post previews and smooth animations. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<section class="custom-blog-posts-section" style="background-color: {{ section.settings.bg_color }}; padding: {{ section.settings.pad_top }}px 0 {{ section.settings.pad_bot }}px;">
  <div class="custom-blog-posts-container page-width">
    {% if section.settings.title != blank %}
      <h2 class="custom-blog-posts-title" style="color: {{ section.settings.title_color }}; font-size: {{ section.settings.title_size }}px; text-align: {{ section.settings.title_alignment }};">
        {{ section.settings.title }}
      </h2>
    {% endif %}
    
    {% if section.settings.subtitle != blank %}
      <div class="custom-blog-posts-subtitle" style="color: {{ section.settings.subtitle_color }}; text-align: {{ section.settings.title_alignment }};">
        {{ section.settings.subtitle }}
      </div>
    {% endif %}

    <div class="custom-blog-posts-grid" style="gap: {{ section.settings.posts_gap }}px;">
      {% for block in section.blocks %}
        {% if block.settings.blog_post != blank %}
          {% assign article = articles[block.settings.blog_post] %}
          <div class="custom-blog-post-item" {{ block.shopify_attributes }}>
            <a href="{{ article.url }}" class="custom-blog-post-link">
              <div class="custom-blog-post-image-wrapper">
                {% if article.image %}
                  <img src="{{ article.image | img_url: '600x' }}" 
                       alt="{{ article.title | escape }}" 
                       class="custom-blog-post-image">
                {% else %}
                  {{ 'image' | placeholder_svg_tag: 'custom-blog-post-image placeholder' }}
                {% endif %}
              </div>
              
              <div class="custom-blog-post-meta">
                {% if article.author %}
                  <span class="custom-blog-post-author">By {{ article.author }}</span>
                {% endif %}
                
                {% if section.settings.show_date %}
                  <span class="custom-blog-post-date">
                    {% if article.author %} • {% endif %}
                    {{ article.published_at | date: "%b %d, %Y" }}
                  </span>
                {% endif %}
              </div>
              
              <h3 class="custom-blog-post-title" style="color: {{ section.settings.post_title_color }};">
                {{ article.title }}
              </h3>
              
              {% if section.settings.show_excerpt %}
                <div class="custom-blog-post-excerpt" style="color: {{ section.settings.text_color }};">
                  {% if article.excerpt != blank %}
                    {{ article.excerpt | strip_html | truncatewords: 20 }}
                  {% else %}
                    {{ article.content | strip_html | truncatewords: 20 }}
                  {% endif %}
                </div>
              {% endif %}
            </a>
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</section>

<style>
.custom-blog-posts-section {
  overflow: hidden;
  position: relative;
}

.custom-blog-posts-container {
  max-width: {{ section.settings.container_width }}px;
  margin: 0 auto;
}

.custom-blog-posts-title {
  margin-bottom: 15px;
  font-weight: {{ section.settings.title_weight }};
  line-height: 1.2;
}

.custom-blog-posts-subtitle {
  margin-bottom: 30px;
  font-size: {{ section.settings.subtitle_size }}px;
  line-height: 1.5;
}

.custom-blog-posts-grid {
  display: grid;
  grid-template-columns: repeat({{ section.settings.columns }}, 1fr);
  margin-top: {{ section.settings.grid_top_margin }}px;
}

.custom-blog-post-item {
  margin-bottom: {{ section.settings.item_bottom_margin }}px;
  transition: transform 0.3s ease;
}

.custom-blog-post-item:hover {
  transform: translateY(-5px);
}

.custom-blog-post-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.custom-blog-post-image-wrapper {
  margin-bottom: 15px;
  border-radius: {{ section.settings.image_border_radius }}px;
  overflow: hidden;
  aspect-ratio: {{ section.settings.image_aspect_ratio }};
}

.custom-blog-post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.custom-blog-post-item:hover .custom-blog-post-image {
  transform: scale(1.03);
}

.custom-blog-post-meta {
  font-size: 14px;
  color: {{ section.settings.meta_color }};
  margin-bottom: 10px;
}

.custom-blog-post-title {
  font-size: {{ section.settings.post_title_size }}px;
  margin-bottom: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.custom-blog-post-excerpt {
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 990px) {
  .custom-blog-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .custom-blog-posts-title {
    font-size: {{ section.settings.title_size | minus: 6 }}px;
  }
  
  .custom-blog-posts-subtitle {
    font-size: {{ section.settings.subtitle_size | minus: 2 }}px;
  }
  
  .custom-blog-post-title {
    font-size: {{ section.settings.post_title_size | minus: 2 }}px;
  }
}

@media (max-width: 480px) {
  .custom-blog-posts-grid {
    grid-template-columns: 1fr;
  }
}
</style>

{% schema %}
{
  "name": "Custom Blog Posts",
  "settings": [
    {
      "type": "range",
      "id": "pad_top",
      "label": "Padding Top",
      "min": 0,
      "max": 200,
      "step": 5,
      "default": 40
    },
    {
      "type": "range",
      "id": "pad_bot",
      "label": "Padding Bottom",
      "min": 0,
      "max": 200,
      "step": 5,
      "default": 40
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#FFFFFF"
    },
    {
      "type": "range",
      "id": "container_width",
      "label": "Container Width",
      "min": 800,
      "max": 1600,
      "step": 50,
      "default": 1200
    },
    {
      "type": "header",
      "content": "Heading Settings"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Most Popular Blog Posts"
    },
    {
      "type": "range",
      "id": "title_size",
      "label": "Heading Size",
      "min": 20,
      "max": 60,
      "step": 2,
      "default": 32
    },
    {
      "type": "select",
      "id": "title_weight",
      "label": "Heading Weight",
      "options": [
        {
          "value": "400",
          "label": "Regular"
        },
        {
          "value": "500",
          "label": "Medium"
        },
        {
          "value": "600",
          "label": "Semi-Bold"
        },
        {
          "value": "700",
          "label": "Bold"
        }
      ],
      "default": "600"
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "Heading Color",
      "default": "#333333"
    },
    {
      "type": "select",
      "id": "title_alignment",
      "label": "Text Alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Subtitle",
      "default": "Phasellus lorem malesuada ligula pulvinar commodo"
    },
    {
      "type": "range",
      "id": "subtitle_size",
      "label": "Subtitle Size",
      "min": 12,
      "max": 24,
      "step": 1,
      "default": 16
    },
    {
      "type": "color",
      "id": "subtitle_color",
      "label": "Subtitle Color",
      "default": "#666666"
    },
    {
      "type": "header",
      "content": "Layout Settings"
    },
    {
      "type": "range",
      "id": "columns",
      "label": "Columns (Desktop)",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 3
    },
    {
      "type": "range",
      "id": "posts_gap",
      "label": "Gap Between Posts",
      "min": 10,
      "max": 60,
      "step": 5,
      "default": 30
    },
    {
      "type": "range",
      "id": "grid_top_margin",
      "label": "Grid Top Margin",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 20
    },
    {
      "type": "range",
      "id": "item_bottom_margin",
      "label": "Item Bottom Margin",
      "min": 0,
      "max": 60,
      "step": 5,
      "default": 20
    },
    {
      "type": "header",
      "content": "Post Settings"
    },
    {
      "type": "select",
      "id": "image_aspect_ratio",
      "label": "Image Aspect Ratio",
      "options": [
        {
          "value": "1/1",
          "label": "Square (1:1)"
        },
        {
          "value": "4/3",
          "label": "Landscape (4:3)"
        },
        {
          "value": "16/9",
          "label": "Widescreen (16:9)"
        }
      ],
      "default": "16/9"
    },
    {
      "type": "range",
      "id": "image_border_radius",
      "label": "Image Border Radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 0
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "label": "Show Date",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_excerpt",
      "label": "Show Excerpt",
      "default": true
    },
    {
      "type": "range",
      "id": "post_title_size",
      "label": "Post Title Size",
      "min": 14,
      "max": 32,
      "step": 1,
      "default": 18
    },
    {
      "type": "color",
      "id": "post_title_color",
      "label": "Post Title Color",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "meta_color",
      "label": "Meta Text Color",
      "default": "#666666"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Excerpt Text Color",
      "default": "#777777"
    }
  ],
  "blocks": [
    {
      "type": "blog_post",
      "name": "Blog Post",
      "settings": [
        {
          "type": "article",
          "id": "blog_post",
          "label": "Blog Post"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Blog Posts",
      "blocks": [
        {
          "type": "blog_post"
        },
        {
          "type": "blog_post"
        },
        {
          "type": "blog_post"
        }
      ]
    }
  ]
}
{% endschema %}