从树枝中的URI获取带有样式URL的图像

8

因此，由于有了4k4，我终于设法通过以下方式在字段模板中获取了原始图像URI：

item.content['#item'].entity.uri.value

与

{{ file_url(item.content['#item'].entity.uri.value) }}

我会得到原始文件的网址。

我通过以下方式获得图像样式信息

item.content['#item']['#image-style']

要求“中等”

一个PHP解决方案已经可以在这里使用，但是如何在TWIG中做到这一点？

有创造8.1过滤一些尝试这里 -但是，这并不能帮助我目前。

theming 8 uri media

— 詹尼斯·地狱
source

您想在哪里将图像用作背景，确切地说是节点或页面？

— kiamlaluno

3

您可以将php代码放在字段模板的预处理功能中。您拥有问题中所需的所有信息。

但是然后您将进行编码，这已经在drupal中了。如果在image render元素中设置了＃image-style，则应为image-formatter和image-style模板中稍后出现的预处理功能配置image字段，以将正确的src属性放入的变量中image-style.html.twig。因此，您可以通过覆盖此模板来使用已经存在的代码。

请参阅/core/module/image/image.module中的代码：

function template_preprocess_image_style(&$variables) {
  $style = ImageStyle::load($variables['style_name']);

  // Determine the dimensions of the styled image.
  $dimensions = array(
    'width' => $variables['width'],
    'height' => $variables['height'],
  );

  $style->transformDimensions($dimensions, $variables['uri']);

  $variables['image'] = array(
    '#theme' => 'image',
    '#width' => $dimensions['width'],
    '#height' => $dimensions['height'],
    '#attributes' => $variables['attributes'],
    '#uri' => $style->buildUrl($variables['uri']),
    '#style_name' => $variables['style_name'],
  );

— 4k4
source

1

好吧，我不想让图像以内<img>联样式呈现为背景图像。目前，我要么获得样式正确的图像，要么获得<img>原始文件路径，这对于在非宽带连接上使用来说是非常重要的-因此，我只想获取向下采样的路径。而且我不想覆盖所有图像渲染，仅覆盖一个字段。当然可以，因为我知道原始文件名，所以我可以强行破解样式的路径-但这很糟糕。

— Jannis Hell'1

您不必覆盖所有图像。您可以通过主题名称建议来定位所需的对象，也可以在树枝中添加条件。我会选择第二个，因为树枝调试对该模板没有任何建议。因此，无需研究此模板的正确建议将更加容易。不建议使用硬连线破解。您不知道缓存中是否包含正确的图像样式大小。

— 4k4，11

1

我只是也需要这样做。正确的方法是将样式图像的图像URL存储到变量中（通过预处理功能），然后该变量将在您的树枝文件中可用。

我编写了一个函数，该函数将获取任何field_image文件并返回原始文件名，或者，如果您指定样式名称，它将返回样式图像的URL。

在我的.theme文件中：

function MYTHEME_preprocess_node(&$vars) {
  //get thumbnail images from field_image
  $vars['field_image_url'] = _var_image_url($vars, 'field_image', 'thumbnail');
}

//pull image field URL (original or styled)
function _var_image_url($vars, $field, $style_name = '') {
  if (!empty($vars['elements'][$field]['#object'])) {
    $fields = $vars['elements'][$field]['#object']->getFields();
    $image = $fields[$field]->getValue();

    if (!empty($image[0]['target_id'])) {
      $file = \Drupal\file\Entity\File::load($image[0]['target_id']);
      $uri = $file->getFileUri();

     if(!empty($style_name)) {
        $url = \Drupal\image\Entity\ImageStyle::load($style_name)->buildUrl($uri);
        return $url; //the styled URL
     } else {
        return file_create_url($uri); //original
     }
   }
 }
 return false;
}

现在在我的树枝文件中（node.html.twig，因为我使用了preprocess_node函数）：

<div class="banner" style="background-image:url({{ field_image_url }}"></div>

该功能_var_image_url()必须从被叫THEME_preprocess_node()因为它的预期有一定架设在第一个函数$vars的参数。如果尝试从中调用它preprocess_page，则需要对其进行修改。

— 惠勒克里克
source