Shopify：如何在新闻帖子中显示像 collection 页面这样的特色图片背景

Question

您好，先生，我想更改 post 页面的 header 部分，并希望它们看起来像 collection 页面的特色图片背景。让我详细解释一下。

这是带有特色图片的 collection 页面 URL。 https://shoeslik.myshopify.com/collections/all

在此页面中，特色图片显示为标题背景。

这是新闻 post 页面。 https://shoeslik.myshopify.com/blogs/news/ways-to-select-shoes-to-wear-with-an-outfit

特色图片已设置，但我想编辑一些代码，使 header 看起来像上面的 collection 页面。

我正在使用 Debut 主题。

还有一件事要补充我已经看到 collection 页面功能背景图像高度为 300px，但我想要新闻 posts 背景图像大小为 400px。

这是我到目前为止所做的

<div data-section-id="{{ section.id }}" data-section-type="collection-template">
  <header class="collection-header">
      <div class="collection-hero">
        <div class="collection-hero__image ratio-container lazyload js"
             data-bgset="{% include 'bgset', image: collection.image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-image: url('{{ article.image | img_url: '300x300' }});"></div>
        <noscript>
          <div class="collection-hero__image" style="background-image: url({{ article.image | img_url: '2048x600', crop: 'top' }});"></div>
        </noscript>
        <div class="collection-hero__title-wrapper">
          <h1 class="collection-hero__title page-width">{{ article.title }}</h1>
        </div>
      </div>

上面的代码是 collection 页面，所以我复制了它，它的 scss 也已经与其他 div 一起使用，我对其进行了少量更改以满足需要。但我实际上无法完全看起来像 collection 页面。我也无法在背景区域添加作者姓名和发布日期。您可以查看链接并指导我该怎么做。等待您的帮助。

谢谢

Answer 1

现在这个问题解决了，同时添加一些像这样的css。

body.template-article article.page-width {
padding-left: 0px;
padding-right: 0px;
margin: 0px;
width: 100% !important;
max-width: 100% !important;
}
body.template-article .collection-hero__image {
height: 400px;
}
.section-header.text-center.blogs-heders+.collection-hero__image:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #685858;
opacity: 0.4;
}

Shopify：如何在新闻帖子中显示像 collection 页面这样的特色图片背景

Shopify: How to show feature image background like collection page in news posts

shopify