Obter caminho para os recursos do tema no modelo Twig

22

Eu tenho uma pergunta sobre como obter um caminho para uma imagem em um modelo Twig. A imagem não está atribuída a um campo ou algo assim. Apenas uma imagem estática que é armazenada em "MYTHEME / image / icon / my-icon.png".

No Drupal 7, recebo o caminho no meu node.template com o seguinte código:

<img src="<?php print base_path() . path_to_theme(); ?>/image/icons">/my-icon.png

Como isso funciona no Drupal 8? Eu tentei passar uma variável template_preprocess_node().

MYTHEME.theme:

$variables['images_path'] = \Drupal::theme()->getActiveTheme()->getPath() . '/image/';

Modelo de galho:

<img src="{{ images_path  ~ 'icons/' ~ 'my-icon.png' }}">

Isso não funciona. Não há erro de PHP, mas o caminho é erroneamente considerado http: //localhost/node/themes/template/image/icons/my-icon.png .

Stephan Hofmann
fonte
"o caminho está errado" - isso não é muito útil :) Além disso, você deve fazer o pré-processamento no arquivo de tema do tema, não na função global tmeplate_preprocess_hook e usar drupal_get_path ('theme', 'yourtheme').
@ user21641 drupal_get_pathé para D7 :)
Chapabu
1
É para 8 também @Chapabu ...
Clive
Bem, me golpeie com uma pena! Colora-me corrigido :)
Chapabu
É de fato também para o D8. Eu usei o seguinte:$themePath = Url::fromUserInput('/' . drupal_get_path('theme', '[themename]')
Vodde

Respostas:

51

você pode usar o {{ base_path ~ directory }}que resolverá o problema absoluto, sem necessidade de pré-processamento; essas duas variáveis ​​são incluídas pelo núcleo.

Por exemplo

<img src="{{ base_path ~ directory }}/images/logo.png" alt="My Logo" />

PS. o ~ajudante em galho é concatenado.

Editar: pelo menos na página * .html.twig templates a variável base_path está incluída, possivelmente você precisará fazer um pré-processamento para outros modelos, pode verificar facilmente {{ dump() }}se as variáveis ​​estão presentes

// File: THEMENAME.theme in your theme's root directory
function THEMENAME_preprocess(&$variables, $hook)
{
    $variables['base_path'] = base_path();
}
pjcarly
fonte
3
Obrigado por compartilhar sua solução. Um comentário rápido: tive que adicionar explicitamente $ variable ['base_path'] = base_path (); no gancho do tema THEME_preprocess_html para disponibilizá-lo no arquivo de modelo html.html.twig.
Marcos Buarque
1
Tenha cuidado ao usar a {{ directory }}variável Twig em um tema que você pretende usar como tema base e crie subtemas para: drupal.stackexchange.com/questions/277278
JamesWilson
1
O módulo de sugestões de modelos de galhos fornece {{ base_bath }}a todos os modelos; caso contrário, para alguns modelos, você terá que fazer o que Marcos Buarque fez no comentário acima ou Matoeil em drupal.stackexchange.com/a/238535/4195
mlncn 18/11
9

Por padrão, existe uma {{ directory }}variável que você pode usar que aponta para o diretório de temas. O problema é que não é absoluto, assim como o que você adicionou. Eu acho que isso é um bug no núcleo, porque deve incluir o caminho base, mas mudar isso naturalmente quebraria os sites existentes que o usam.

Então você precisa adicionar um / na frente dele; isso seria interrompido se o Drupal estivesse instalado em uma subpasta. Você pode codificar isso no seu modelo ou continuar usandobase_path() como no 7.x em uma variável personalizada.

Berdir
fonte
Como usar a imagem /sites/default/files/MyFolder? Eu tenho uma imagem MyImage.jpg no MyFolder. Agora, no modelo de galho, se eu escrevi <img src={{ url }} alt={{ text }}>Aqui, a variável url tem o caminho /MyFolder/MyImage.jpg, mas não está funcionando.
Jasodeep Chatterjee
2
Como escreveu Berdir: pode-se simplesmente usar <img src="/{{ directory }}/path/to/image"/>para obter um caminho absoluto.
Daniels
7
<img src="/{{ directory }}/images/logo.png"/> 

trabalhou para mim quando

<img src="{{ base_path ~ directory }}/images/logo.png" alt="My Logo" />

nao fiz

para o modelo de conteúdo, eu tive que usar no .module

   function hook_preprocess(&$variables, $hook) {

  $module_handler = Drupal::service('module_handler');
  $path = $module_handler->getModule('myModuleName')->getPath();

  if(isset($variables['region']) && $variables['region'] == 'content'){
    $variables['module_path'] = $path;
    $variables['http_host'] = $_SERVER['HTTP_HOST'];

e

  <img src="{{ module_path }}/images/error404.png" />
  <img src="//{{ http_host }}/{{ module_path }}/images/error403.png" />
Matoeil
fonte
3
Esta resposta deve ser marcada como correta em vez disso
Jignesh Rawal 8/10