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

Question

我正在使用 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 }} 放在 background-image 中，但是媒体查询呢？

我是否应该使用 <style></style> 在 .twig 文件中制作一些 custom attributes 或样式，但我想使用 scss，所以情况并非如此。

你会如何解决这个问题？

Answer 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 fiddle 来向您展示我的意思。

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

希望对您有所帮助。如果您已经想出了一个与我不同的解决方案，请在这里分享，这样不仅我可以学习，将来也可以学习其他人。

干杯。

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

How to use ACF image field in css with media queries using Timber template engine?

wordpress-theming

custom-wordpress-pages

twig

advanced-custom-fields

timber