我试图渲染反应的图像和控制艺术的方向。有人能看到whyI不能让breakpoints.yml得到尊重吗？

Question

我正在创建一个标题/英雄图像部分，其中包括桌面上的两个50/50列，然后是关于平板电脑的堆栈(例如，1024 at )。

对于这种内容类型，我使用了一个自定义的小枝模板。

我想要服务WebP图像，如果用户浏览器将容忍这一点，我还想提供响应衍生品和控制艺术方向(即不同的尺寸和裁剪取决于屏幕宽度)。

为此，我尝试使用WebP模块以及响应图像模块和图像样式。

我创建了两种响应型图像样式(PMP Hero Col One & PMP Hero Col 2)和6种图像样式(PMP Hero C1桌面、PMP Hero C1平板、PMP Hero C1 Phone、PMP Hero C2 Desktop、PMP Hero C2 Tablet、PMP Hero C2 Phone)，每一种都具有规模和作物效果。

我已经在主题的根目录中创建了一个breakpoints.yml，并且我可以在接口中看到它的断点。

my_theme.pmp_hero_col_1.phone:
  label: pmp_hero_col_1_phone
  mediaquery: '(max-width: 900px)'
  weight: 0
  multipliers: 
    - 1x
  group: neiu_main.pmp_hero_col_1
my_theme.pmp_hero_col_1.tablet:
  label: pmp_hero_col_1_tablet
  mediaquery: '(max-width: 1024px)'
  weight: 1
  multipliers: 
    - 1x
  group: neiu_main.pmp_hero_col_1
my_theme.pmp_hero_col_1.desktop: 
  label: pmp_hero_col_1_desktop
  mediaquery: '(min-width: 1025px)'
  weight: 2
  multipliers: 
    - 1x
  group: neiu_main.pmp_hero_col_1 
my_theme.pmp_hero_col_2.phone:
  label: pmp_hero_col_2_phone
  mediaquery: '(max-width: 900px)'
  weight: 0
  multipliers: 
    - 1x
  group: neiu_main.pmp_hero_col_2
my_theme.pmp_hero_col_2.tablet:
  label: pmp_hero_col_2_tablet
  mediaquery: '(max-width: 1024px)'
  weight: 1
  multipliers: 
    - 1x
  group: neiu_main.pmp_hero_col_2  
my_theme.pmp_hero_col_2.desktop:
  label: pmp_hero_col_2_desktop
  mediaquery: '(min-width: 1025px)'
  weight: 2
  multipliers: 
    - 1x
  group: neiu_main.pmp_hero_col_2 

我已经在我的每个响应图像样式中选择了适当的断点组。在每个响应的图像样式中，我选择了“选择单个图像样式”。对于每个断点，并与我想要的图像样式相关联。

我尝试过将回退图像样式设置为“None(原始图像)”&“空图像”。

我尝试在模板中呈现响应性图像样式，如下所示：

{{ drupal_image(node.field_pmp_hero_image.entity.uri.value, 'pmp_hero_col_two', responsive=true) }}

就像：

{% set heroCol2ImagePath = node.field_pmp_hero_image.entity.uri.value %}

{% 
    set heroCol2ResponsiveImageStyle = {
        '#theme': 'responsive_image',
        '#responsive_image_style_id': 'pmp_hero_col_two',
        '#uri': heroCol2ImagePath,
        '#attributes': { class: 'img-responsive', alt: 'MBA Students' },
    } 
%}

{{ heroCol2ResponsiveImageStyle }}

在这两种情况下，我都会得到图片标记和适当的srcset：



此外，衍生工具被写入到相应目录中的文件系统中，并且可用。

我正在经历的问题是，breakpoints.yml从来没有被尊重过，也就是说，图像永远不会改变为适当的导数。如果回退设置为空，则始终为默认或空。

这让我觉得我的breakpoints.yml出现了一些问题，比如语法、媒体查询等等。所以，我尝试了无数次的排列，但都没有成功。

如果我完全不使用Responsive模块，而是手动执行以下操作，我就能够完成这个任务：

<picture>
    <source media="(max-width:900px)" srcset="{{ heroCol2ImagePath|image_style('pmp_hero_c2_phone') }}">
    <source media="(max-width:1024px)" srcset="{{ heroCol2ImagePath|image_style('pmp_hero_c2_tablet') }}">
    <source media="(min-width:1025px)" srcset="{{ heroCol2ImagePath|image_style('pmp_hero_c2_desktop') }}">
    <img class="pmp-vtwo-hero-image" src="{{ file_url(heroCol2ImagePath) }}" alt="Flowers" style="width:auto;">
</picture>

但是，我不知道如何用这种方法使用WebP模块。

如果有人能指出我犯了什么错误，我会永远感激你的。

Answer 1

看起来您的breakpoints.yml中有一个错误。看看这个breakpoints.yml文档。

在bartik主题中定义的一个示例：

bartik.narrow:
label: narrow
mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
weight: 1
multipliers:
  - 1x

正确的键是mediaQuery，而不是mediaquery。结果是您的媒体查询无法识别，因此您只能在所有设备上获得默认图像。更新一下，你就都准备好了。