Grav CMS - 部分模板中的图像问题/问题答案

【问题标题】：Grav CMS - image questions/problems in partial templateGrav CMS - 部分模板中的图像问题/问题
【发布时间】：2017-07-25 02:19:35
【问题描述】：

Grav 新手，边走边学，但几乎没有找到关于我想要了解的内容的文档:(

我正在整理一个博客作为测试并修改现有的反物质主题。在 /partials/blog_item.html.twig 中有以下几行图片：

{% set header_image = page.header.header_image|defined(true) %}
{% set header_image_width  = page.header.header_image_width|defined(900) %}
{% set header_image_height = page.header.header_image_height|defined(200) %}
{% set header_image_file = page.header.header_image_file %}

{% if header_image %}
    {% if header_image_file %}
        {% set header_image_media = page.media.images[header_image_file] %}
    {% else %}
        {% set header_image_media = page.media.images|first %}
    {% endif %}
    {{ header_image_media.cropZoom(header_image_width, header_image_height).html }}
{% endif %}

它采用帖子中使用的第一张图片并将其制作为 900x200 版本作为标题。这是我无法弄清楚的：

1 - 如何在输出此图像时为其添加类？我想添加一个 img-responsive 类，但没有办法做到这一点。

2 - 如果我根本不想要帖子的标题图片，但帖子中会有图片怎么办？好的，所以我删除了{% set header_image_media = page.media.images|first %} 部分，但问题是我如何定义要用作page.media.images[header_image_file] 的图像，然后如果我想使用一个？

3 - 如何获取此标题图像的完整 url 以在页面上输出？我不是在说完整的标签，只是在说它的完整 url 的字符串？

也许这些很容易，但我找不到任何关于它的信息。我正在使用管理面板插件，所以当我创建帖子/项目时，会有 Frontmatter、实际内容/帖子和上传的图像（只有插入和删除选项）。

【问题讨论】：

标签： grav

【解决方案1】：

我知道这是一篇旧帖子，但我认为在 stackoverflow 上有更多关于 Grav 的 Q/A 会很好。

1 - 如何在输出此图像时为其添加类？我想要添加一个 img 响应类，但看不到这样做的方法。

您需要像这样将类作为.html() 的第三个参数传递：

{{ header_image_media.cropZoom(header_image_width, header_image_height).html('TITLE', 'ALT', 'CLASS') }}

2 - 如果我根本不想要帖子的标题图片怎么办，但是帖子里会有图片吗？好的，所以我删除了 {% 集 header_image_media = page.media.images|first %} 部分，但有问题是我如何定义要使用的图像 page.media.images[header_image_file] 如果我想用一个呢？

我不会这样做。我会为每篇文章添加一个变量page.header.has header，然后我会相应地调整树枝模板。

3 - 如何获取此标题图像的完整 url 以输出这页纸？我不是在谈论完整的标签，只是它的字符串完整的网址？

您可以使用过滤器|absolute

{{ header_image_media.cropZoom(header_image_width, header_image_height).html('TITLE', 'ALT', 'CLASS')|absolute }}

【讨论】：