Link an image and add assets

Question

I'm new to drupal, so this might be simple even if I can't find the solution.

I have a custom module back_module with folders :

src
css
js
images
templates

From my templates/block-back.html.twig

First issue: I want to print an image located in images/back.png

I can't find the right url for the image <img src ="???" alt='backButton'/>

I already find solutions to retrieve the url but it goes to the theme folder and not the module folder.

Second issue: I want to link an external css/back.css and js/back.js file to the twig template

Right now, I have this css / js directly written in the template cause I can't make it work an other way

Meanings my twig file looks like this

<style> ... </style>
<script> ... </script>
{# twig code #}

This is my back_module.libraries

back:
  css:
      theme:
          css/back.css: {}
          js/back.js: {}
  dependencies:
      - core/jquery
      - core/drupal
      - core/drupalSettings

This is my back_module.module

function back_module_theme($existing, $type, $theme, $path) {

  return [
    'block__back' => [
        'variables' => [
          'link' => NULL
        ],
        'template' => 'block--back'
    ],
  ];
}

This is how I call things from my controller

public function build()
{
  // TODO: Implement build() method.
  $url = "";

  $result = [
    '#theme' => 'block__back',
    '#link' => $url,
    '#attached' => [
      'library' => [
        'back/back',
      ],
    ],
  ];
  return $result;
}

Thanks for your help.

Minirock Minirock · Accepted Answer · 2019-11-15T14:38:23

After a few hours I found out the solution for the issue of css and js assets. If I want to include the librairie from the Plugin controller to the template I had to use back_module/back instead of back/back who seems to be for global libraries from the theme. Still looking how to include an image.

Link an image and add assets

1 Answers