如何使用Timber模板引擎将CSS中的ACF图像字段与媒体查询一起使用？

我正在使用Tiber编写wordpress主题, 并且关于移动和台式机上的不同图像有一个非常有趣的案例。

案例：我想使用Wordpress中的Advanced Custom Field PRO上传2张图片(移动版和桌面版), 并在自定义Timber模板引擎主题中使用它们。

代码如下：

。枝条

 <div class="application--main-image"></div>

.scss

.application-main-image {
  background-position: center bottom;
  background-repeat: no-repeat;
  background-image: url('../img/mobile.png');
  @media (min-width: 600px) {
    background-image: url('../img/desktop.png');
  }
}

我发现我应该使用内联样式将{{post.image}}放在背景图像中, 但是媒体查询呢？

我是否应该使用<style> </ style>在.twig文件中创建一些自定义属性或样式, 但是我想使用scss, 所以情况并非如此。

你将如何解决该问题？

#1

这肯定是一个独特的用例, 这是我对如何处理此问题的看法：

<style>
  .application--main-image {
    background: url('https://source.unsplash.com/500x500/?ocean');
    /* The actual URL would be replaced by your ACF Filed {{ post.mobile_image }} */
  }

  @media (min-width: 600px) {
    .application--main-image {
      background: url('https://source.unsplash.com/500x500/?mountain');
      /* The actual URL would be replaced by your ACF Filed {{ post.desktop_image }} */
    }
  }

</style>

<div class="application--main-image"></div>

我认为你是对的, 因为你需要将标记和所需的CSS添加到.twig模板中。我知道你想使用.scss, 但是你实际上只需要更改背景图像属性。我创建了一个JS小提琴来向你展示我的意思。

https://jsfiddle.net/robertguss/2kacx91k/7/

希望对你有所帮助。如果你已经提出了不同于我的解决方案, 请在此处分享, 这样我不仅可以学习, 而且将来也可以学习。

干杯。