如何从树枝模板中查找图像样式的URL?


10

我正在实现使用两次图像的节点模板;一次以“正常”方式(即,使用该视图模式在字段的显示配置中定义的图像样式),另一次作为css背景图像属性。

我需要以下两件事之一:

  1. (理想情况下)一种获取同一图像的不同图像样式的URL的方法。

  2. 一种获取图像字段URL的方法。

我正在努力使用dump()kint()帮助自己找到答案。它们都输出太多(由于嵌入了到“父”等的链接),并且似乎没有我需要的信息。例如,查看dump(content.field_image)输出时,图像的实际URL不存在(因此它来自何处,从而可以使用{{ content.field_image }}?!进行渲染)。kint()另一方面,如果我给它传递一个参数,它会完全死掉,而顶级版本又太大了,无法导航。使用phptemplate + xdebug进行调试非常容易。(是的,我知道用户不能删除数据库是很好的。)

对于(1),有一个答案表示您无法执行此操作,但是我不明白为什么我无法在(2)中获得现有的URL?

Answers:


11

您可以在预处理函数中获取图像样式的URL,并将其传递给节点模板。(就我而言,我需要在页面级别上,我猜想这对于节点仍然适用)

像这样,“ myimagefield”是图像字段的计算机名称,“ myimagestyle”是样式的计算机名称,还请确保包含Entity \ ImageStyle。

use Drupal\image\Entity\ImageStyle;

/**
 * Implements hook_preprocess_page().
*/
function mytheme_preprocess_page(&$variables, $hook) {
  if ($variables['node']) {
    $node = $variables['node'];
    if($node->myimagefield[0]){
        $cover_image = $node->myimagefield[0]->entity->getFileUri();
        $image_url = ImageStyle::load('myimagestyle')->buildUrl($cover_image);
        $variables['my_image'] = $image_url;
    }
  }
}

1
问题是从字段的显示配置中拉出查看模式。通过执行$ image_url = ImageStyle :: load('myimagestyle')-> buildUrl($ cover_image); 您如何从字段的配置中提取图像样式?您只是添加了myimagestyle,但是如果同一字段位于需要不同图像样式的多个实体(例如节点)上,该怎么办?
usernameabc

14

在链接的问题中已经回答了第一部分,其中有代码如何执行此操作。要回答问题的第二部分,您可以访问节点对象中的原始图像:

{{ file_url(node.field_image.entity.uri.value) }}

关于以下内容的一则评论content

在节点模板中,图像字段中的图像content尚未准备好呈现。该字段包含配置的显示方式以及包含所有原始数据的字段对象。稍后,它们将在现场,图像格式化程序和图像模板中放在一起。这就是您此时找不到所需网址的原因content

在节点模板中,您可以使用内容数组顶层的字段,例如显示图像字段

{{ content.field_image }}

如在查看模式下配置的。

编辑:

Twig Tweak模块中有一个新过滤器。现在,您可以直接从uri或原始图片的网址中生成树枝中的图片样式网址:

{{ node.field_image.entity.uri.value | image_style('thumbnail') }} 

谢谢。因此,当树枝调用渲染时,例如在您到达的位置{{ content.field_image }}而不是之前,所有预处理钩子都被调用了吗?另外,我认为我从您的建议中获得的网址是原始网址-我的Q的第2部分要求提供图像样式的网址,该网址由查看模式配置。那可能吗?
artfulrobot

这仅适用于常规上传的图像,不适用于实体引用的图像。如何使其与实体参考图像配合使用?
paulcap1

@ paulcap1,不完全了解您的意思,因为图像字段是(文件实体的)参考字段。如果您的意思是将图像放置在引用的实体中,则需要.entity两次,第一次进入该实体,第二次进入该图像。
4k4,15

1
@ paulcap1,例如{{ node.field_ref.entity.field_image.entity.uri.value }}
4k4

@ 4k4。我正在使用默认的页面内容类型。我有一个实体引用的字段,称为field_global_image。这将使用图像包。Bundles图片字段称为““ image”,我使用{{node.field_global_image.entity.image.entity.uri.value}}尝试了一下,我也尝试过切换类似{{node.image.entity.field_global_image .entity.uri.value}}均无用。在我的单独答复中,这对我
有用。– paulcap1

6

安装Twig调整模块 https://www.drupal.org/project/twig_tweak

而这个模块Twig Field https://www.drupal.org/project/twig_field_value

如果您使用的是常规图像上传字段图像,请在节点模板中使用它:

<img src="{{ node.field_regular_image.entity.uri.value | image_style('thumbnail') }} " >

如果您使用的是实体参考图片,请使用以下代码:

<img src="{{ file_url(content.field_global_image|field_target_entity.image.entity.uri.value | image_style('thumbnail'))}} " >

请注意,在有关使用引用的实体的例子image后,field_target_entity指的是图像领域上引用的实体。您可能需要调整它。
丹尼尔斯(Deciel)

1
谢谢!在没有twig_field_value模块的情况下,也可以通过以下方式完成实体参考示例:file_url(node.field_image.entity.field_referenced_image.entity.uri.value | image_style('thumbnail'))
John
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.