Obter uma imagem com URL de estilo de um URI em galho

8

Então, graças ao 4k4 , finalmente consegui obter meu URI da imagem original em um modelo de campo via

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

e com

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

Eu receberia o URL do arquivo original.

Eu tenho as informações do estilo de imagem via

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

que 'médio' é solicitado

Uma solução PHP já está disponível aqui , mas como faço isso no TWIG?

Existem algumas tentativas de criar um filtro para 8.1 aqui - mas isso não me ajuda atualmente.

theming 8 uri media Jannis Hell
fonte
Onde você deseja usar exatamente a imagem como plano de fundo, um nó ou uma página?
Kiamlaluno

Respostas:

3

Você pode colocar o código php na função de pré-processamento do modelo de campo. Você tem todas as informações necessárias na sua pergunta.

Mas então você faria codificação, que já está em drupal. Se você tiver # estilo de imagem definido no elemento de renderização de imagem, o campo de imagem deverá ser configurado para as funções de pré-processo que vêm posteriormente nos modelos de formatador de imagem e de estilo de imagem para colocar o atributo src correto nas variáveis ​​de image-style.html.twig. Portanto, você pode usar o código que já está lá, substituindo este modelo.

Veja o código em /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
fonte
11
Bem, o problema é que eu não quero que a imagem seja renderizada como um <img>estilo inline. Atualmente, eu obtenho a imagem correta com estilo como um <img>caminho de arquivo original ou muito grande para usar em uma conexão que não seja de banda larga - por isso, só quero obter o caminho para a amostra com baixa amostragem. E não quero substituir todas as renderizações de imagem, apenas um campo. Claro que eu poderia armar o caminho para o estilo, já que conheço o nome do arquivo original - mas isso seria ruim.
Jannis Inferno
Você não precisa substituir todas as imagens. Você pode segmentar o desejado com a sugestão de nome de tema ou colocar uma condição no galho. Eu escolheria o segundo, porque o twig debug não faz nenhuma sugestão para este modelo. Portanto, seria mais fácil sem a necessidade de investigar a sugestão correta deste modelo. O truque do hardware não é aconselhável. Você não sabe se o tamanho certo do estilo da imagem está no cache.
4k4
1

Eu só precisava fazer isso também. A abordagem correta aqui é armazenar o URL da imagem estilizada em uma variável (através de uma função de pré-processo) e, em seguida, essa variável estará disponível no seu arquivo twig.

Eu escrevi uma função que obterá qualquer arquivo field_image e retornará o nome do arquivo original ou, se você especificar um nome de estilo, ele retornará o URL da imagem com estilo.

Dentro do meu .themearquivo:

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;
}

Agora, no meu arquivo twig (node.html.twig, desde que usei a função preprocess_node): 

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

Essa função _var_image_url()precisa ser chamada a partir da THEME_preprocess_node()função, pois está esperando uma certa configuração no primeiro $varsargumento. Se você tentar chamá-lo preprocess_page, precisará modificá-lo.

wheelercreek
fonte