0
I’m trying to insert a image as responsive background in a html.Twig to the Drupal 8, but to no avail. I’m not finding a solution to this. Even better if it were something practical like a "put that line right on this spot". The image simply does not appear and yet, in some solutions I found, end up nullifying the rest of the textual content.
Follow as the file:
<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 #}
Which error appears? Could you further detail your difficulty?
– gato
The image simply does not appear and yet, in some solutions I found, end up nullifying the rest of the text content.
– gersonvagner
But it is not missing to point the source of the image with the attribute
src
?– gato
@cat Because then, I tried the common solutions for HTML and CSS, but it seems that the line "<img alt="{{ 'Home'|t }}"/>" has not accepted them. I’ve tried it in HTML: <img src=".. /images/file.jpg">; and in CSS: background-image: url("images/file.jpg"). Twig has been somewhat confused so far for me. It seems to me that the problem lies more in "where to put" than "what to put". I edited the question and inserted the last line I tested referring to the image "<img src(...)".
– gersonvagner
But where are you storing your image? What’s before the path
images/arquivo.jpg
?– gato
@cat is localhost in the theme directory as follows: theme/images/file.jpg. html.Twig as follows: theme/templates/layout/theme.html.Twig.
– gersonvagner
Try it like this:
<img src="{{ base_path ~ directory }}/images/mic_01.jpg" alt="Meu logo" />
– gato
@great cat! Wonderful! Well, the first and main problem solved: the image is visible, only without the need of the alt="My logo", since it is integrated in the title="{{ 'Home'|t }}" a line above. But there’s still the second problem of responsiveness. I tried width="100%" inside the tag, but it only covers the "padding" and not the complete "margin", nor style="margin:100%" solved. How to proceed with this?
– gersonvagner
Still no complete solution, because despite the image appears, several of my attempts simply do not show solution to a responsive background-image. Whether online or in an external link with a style in .css. Another alternative was to insert the background-image: url ("./images/mic_01.jpg") in the file, but without success either.
– gersonvagner