Shopify: Как показать фоновое изображение функции, как страницу коллекции в новостях

Question

Здравствуйте, сэр, я хочу изменить заголовок раздела на странице сообщений и сделать так, чтобы они выглядели как фон коллекции изображений. позвольте мне объяснить подробно.

Это URL-адрес страницы коллекции с избранным изображением. https://shoeslik.myshopify.com/collections/all

на этой странице изображено фоновое изображение заголовка.

Вот страница с новостным сообщением. https://shoeslik.myshopify.com/blogs/news/ways-to-select-shoes-to-wear-with-an-outfit

изображение объекта уже установлено, но я хочу отредактировать некоторый код, чтобы заголовок выглядел так, как показано выше на странице коллекции.

и я использую Дебютная тема.

Еще одна вещь, которую я хочу добавить, я видел, что высота фонового изображения функции страницы коллекции составляет 300 пикселей, но я хочу, чтобы размер фонового изображения сообщений новостей составлял 400 пикселей.

вот что я сделал до сих пор

<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>

Код выше - это страница коллекции, поэтому я копирую ее, и ее s css уже используется с другим div, и я меняю его мало, чтобы соответствовать потребностям. но на самом деле я не могу точно выглядеть как страница коллекции. Я также не могу добавить имя автора и дату публикации sh в фоновом режиме. Вы можете проверить ссылки и подсказать, что мне делать. Жду вашей помощи.

спасибо

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;
}