Add latest blog post in homepage

Solved
fedepatrizi
New Member
2 0 0

Hello,

i am setting up my store with Debut theme and i added in homepage the featured blog post to display blog posts grid.

now i would like to add an extra section in homepage where to display "one" specific blog post (picture, title and maybe a snippet of text) i would use to highlight the most recent blog post i have added. is that possible?

 

thanks

0 Likes
PeanutButter
Shopify Partner
330 66 137

This is an accepted solution.

hi @fedepatrizi,

You will need a new section, which I have custom coded for you!

Do as follows and you will have a new "Featured Post" section for your homepage:

1- Go to Your theme > Actions > Edit code.  In the code editor find the Sections folder and click on Add New Section.

2- Name this new file featured-post.liquid

3- In the newly created file there will be some code.  Replace the contents of the new file with the following code:

<div class="page-width">
  
  {% assign article = articles[section.settings.article] %}

  {% if article %}

    <article aria-labelledby="FeaturedPostTitle-{{ section.id }}">
        <header>
            <a href="{{ article.url }}" class="article__link">
            {% if article.image %}
                {% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
                {% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
                {%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

                {% include 'image-style', image: article.image, height: 345, wrapper_id: img_wrapper_id, img_id: img_id %}
                <div id="{{ img_wrapper_id }}" class="article__grid-image-wrapper js">
                <div class="article__grid-image-container" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;" data-image-loading-animation>
                    <img id="{{ img_id }}"
                        class="article__grid-image lazyload"
                        data-src="{{ img_url }}"
                        data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                        data-aspectratio="{{ article.image.aspect_ratio }}"
                        data-sizes="auto"
                        alt="">
                </div>
                </div>
                <noscript>
                <div class="article__grid-image-wrapper">
                    {{ article | img_url: '345x345', scale: 2 | img_tag: article.title, 'article__grid-image' }}
                </div>
                </noscript>
            {% endif %}

            <h3 class="article__title" id="FeaturedPostTitle-{{ section.id }}">
                {{ article.title }}
            </h3>
            </a>

            {% if section.settings.blog_show_author %}
            <span class="article__author">{{ 'blogs.article.by_author' | t: author: article.author }}</span>
            {% endif %}

            {% if section.settings.blog_show_date %}
            <span class="article__date">
                {{ article.published_at | time_tag: format: 'date' }}
            </span>
            {% endif %}
        </header>

        <div class="article__grid-meta">
            <div class="rte article__grid-excerpt">
            {% if article.excerpt.size > 0 %}
                {{ article.excerpt }}
            {% else %}
                {{ article.content | strip_html | truncate: 150 }}
            {% endif %}
            </div>

            {% if article.tags.size > 0 %}
            <div class="article__tags rte">
                <ul class="list--inline" aria-label="{{ 'blogs.article.tags' | t }}">
                {% for tag in article.tags %}
                    <li>
                    <a href="{{ blog.url }}/tagged/{{ tag | handle }}" class="article__grid-tag">{{ tag }}</a>
                    </li>
                {% endfor %}
                </ul>
            </div>
            {% endif %}

            <ul class="list--inline article__meta-buttons">
            <li>
                <a href="{{ article.url }}" class="btn btn--tertiary btn--small" aria-label="{{ 'blogs.article.read_more_title' | t: title: article.title }}">
                {{ 'blogs.article.read_more' | t }}
                </a>
            </li>

            {% if blog.comments_enabled? and article.comments_count > 0 %}
                <li>
                <a href="{{ article.url }}#comments" class="article__comment-count btn btn--tertiary btn--small">
                    {{ 'blogs.comments.comments_with_count' | t: count: article.comments_count }}
                </a>
                </li>
            {% endif %}
            </ul>
        </div>
    </article>

  {% endif %}

</div>



{% schema %}
{
  "name": {
    "cs": "Příspěvky na blogu",
    "da": "Blogopslag",
    "de": "Blogposts",
    "en": "Blog posts",
    "es": "Entradas del blog",
    "fi": "Blogijulkaisut",
    "fr": "Articles de blog",
    "it": "Articoli del blog",
    "ja": "ブログ記事",
    "ko": "블로그 게시물",
    "nb": "Blogginnlegg",
    "nl": "Blogberichten",
    "pl": "Posty na blogu",
    "pt-BR": "Posts do blog",
    "pt-PT": "Publicações no blogue",
    "sv": "Blogginlägg",
    "th": "โพสต์บล็อก",
    "tr": "Blog gönderileri",
    "vi": "Bài viết blog",
    "zh-CN": "博客文章",
    "zh-TW": "部落格文章"
  },
  "class": "index-section",
  "settings": [
    {
      "id": "article",
      "type": "article",
      "label": {
        "en": "Article",
        "es": "Artículo"
      }
    },
    {
      "type": "checkbox",
      "id": "blog_show_author",
      "label": {
        "cs": "Zobrazit autora",
        "da": "Vis forfatter",
        "de": "Autor anzeigen",
        "en": "Show author",
        "es": "Mostrar autor",
        "fi": "Näytä tekijä",
        "fr": "Afficher l'auteur",
        "it": "Mostra autore",
        "ja": "執筆者を表示する",
        "ko": "작성자 표시",
        "nb": "Vis forfatter",
        "nl": "Auteur weergeven",
        "pl": "Pokaż autora",
        "pt-BR": "Exibir autor",
        "pt-PT": "Mostrar autor",
        "sv": "Visa författare",
        "th": "แสดงผู้เขียน",
        "tr": "Yazarı göster",
        "vi": "Hiển thị tác giả",
        "zh-CN": "显示作者",
        "zh-TW": "顯示作者"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "blog_show_date",
      "label": {
        "cs": "Zobrazit datum",
        "da": "Vis dato",
        "de": "Datum anzeigen",
        "en": "Show date",
        "es": "Mostrar fecha",
        "fi": "Näytä päivämäärä",
        "fr": "Afficher la date",
        "it": "Mostra data",
        "ja": "日付を表示する",
        "ko": "날짜 표시",
        "nb": "Vis dato",
        "nl": "Datum weergeven",
        "pl": "Pokaż datę",
        "pt-BR": "Exibir data",
        "pt-PT": "Mostrar data",
        "sv": "Visa datum",
        "th": "แสดงวันที่",
        "tr": "Tarihi göster",
        "vi": "Hiển thị ngày",
        "zh-CN": "显示日期",
        "zh-TW": "顯示日期"
      },
      "default": true
    }
  ],
  "presets": [
    {
      "name": {
        "en": "Featured post",
        "es": "Entradas Destacada"
      },
      "category": {
        "cs": "Blog",
        "da": "Blog",
        "de": "Blog",
        "en": "Blog",
        "es": "Blog",
        "fi": "Blogi",
        "fr": "Blog",
        "it": "Blog",
        "ja": "ブログ",
        "ko": "블로그",
        "nb": "Blogg",
        "nl": "Blog",
        "pl": "Blog",
        "pt-BR": "Blog",
        "pt-PT": "Blogue",
        "sv": "Blogg",
        "th": "บล็อก",
        "tr": "Blog",
        "vi": "Blog",
        "zh-CN": "博客",
        "zh-TW": "部落格"
      },
      "settings": {}
    }
  ]
}
{% endschema %}

 

4- Save the file.

 

Now you will have a new section Featured Post in the customizer where you can select any post and it will be featured on your homepage:

let me know if you have any issues implementing this

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es