0

Estou tentando inserir uma imagem como background responsivo em um html.twig para o Drupal 8, porém sem sucesso. Não estou encontrando uma solução para isto. Melhor ainda se fosse algo prático como um "coloque essa linha exatamente neste local". A imagem simplesmente não aparece e ainda, em algumas soluções que encontrei, acabam anulando o restante do conteúdo textual.

Segue como está o arquivo:

<div class="layout-container">

  <header role="banner">
    {% if logo %}
      <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
        <img src="{{link.object.handle:'_images/arquivo.jpg'}}" width="100%" alt="{{link.title | mic_01}}" />
      </a>
    {% endif %}
  </header>

  <main role="main">
    {% if title %}
      <h1>{{ title }}</h1>
    {% endif %}

    {{ page.highlighted }}

    {{ page.content }}
  </main>

  {% if page.footer %}
    <footer role="contentinfo">
      {{ page.footer }}
    </footer>
  {% endif %}

</div>{# /.layout-container #}
9
  • Qual erro aparece? Poderia detalhar melhor sua dificuldade?
    – gato
    Commented 20/10/2017 às 14:43
  • A imagem simplesmente não aparece e ainda, em algumas soluções que encontrei, acabam anulando o restante do conteúdo em texto. Commented 20/10/2017 às 14:51
  • Mas não esta faltando apontar a fonte da imagem com o atributo src?
    – gato
    Commented 20/10/2017 às 14:55
  • @gato Pois então, tentei as soluções comuns para HTML e CSS, porém parece que a linha "<img alt="{{ 'Home'|t }}"/>" não tem aceitado as mesmas. Já tentei no HTML: <img src="../images/arquivo.jpg">; e no CSS: background-image: url("images/arquivo.jpg"). O Twig se mostrou um tanto confuso até agora para mim. Parece-me que o problema está mais no "aonde colocar" do que "o que colocar". Editei a pergunta e inseri a última linha que testei referente à imagem "<img src(...)". Commented 20/10/2017 às 15:37
  • Mas aonde você está armazenando a sua imagem? O que tem antes do caminho images/arquivo.jpg?
    – gato
    Commented 20/10/2017 às 15:48

1 Resposta 1

0

Se a sua imagem for um arquivo estático tente trocar o caminho:

<img src="<CAMINHO DIRETO PARA A IMAGEM>" width="100%" alt="{{link.title | mic_01}}" />

Caso ela seja dinâmica você pode tentar processar a URL da imagem dentro de um hook preprocess dentro do seu tema (arquivo .theme), por exemplo:

function [ID_DO SEU_TEMA]_preprocess_html(&$variables) {
  $variables['imagem'] = $url_to_image;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .