Trying to include assets (js, img, css) in a drupal 8 module

Question

I have a drupal module called chess, in which I have different images to be displayed, javascripts to be included, and css to be linked.

I tried defining a chess/chess.libraries.yml that looks like this:

chess:
  version: 1.x
  css:
    theme:
      css/chess.css: {}
  js:
    js/jquery-ui.min.js: {}
    js/jquery.ui-touch-punch.min.js: {}
    js/jquery.simulate.js: {}
    js/chess.js: {}
    js/socket.io.js: {}
    js/chess-socket.js: {}
    js/chat.js: {}
  dependencies:
    - core/jquery

and included a line {{ attach_library('chess/chess') }} in chess/templates/index.html.twig. The images live in chess/images. Additionally, my ChessController's render array looks like this:

public function page(){
  $content = readfile('modules/chess/templates/index.html.twig');
  $element = array (
    '#type' => 'markup',
    '#markup' => $this->t($content),
    '#attached' => array(
    'library' => 'chess/chess'
    ),
  );

  return $element;
}

So it has the chess library attached. The only thing that shows up though is the html with broken images, no css, and an error message at the bottom of the page:

The website encountered an unexpected error. Please try again later.

InvalidArgumentException: $string ("7864") must be a string. in Drupal\Core\StringTranslation\TranslatableMarkup->__construct() (line 133 of core/lib/Drupal/Core/StringTranslation/TranslatableMarkup.php).

As far as I can tell, none of the translation modules are even enabled. Anyone got an idea of what I'm missing?

Update: I changed the page() function of my controller to read

public function page(){
  $content = readfile('modules/chess/templates/page.html.twig');
  $element = array (
    '#type' => 'markup',
    '#template' => $content,
    '#attached' => array(
      'library' => 'chess/chess'
    ),
  );

  return $element;
}

and the css shows up, but the images don't yet. The source also still shows the asset function, instead of the filled in script tag.

Update 2: I installed symfony/asset via composer, and my twig file now looks like this:

<link href="{{ asset('css/chess.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ asset('js/jquery-1.12.min.js') }}"></script>
...
<div class="piece black queen" id="black-queen"><img src="{{ asset('images/queen-black.png') }}" /></div>

The css shows up, but the content is displayed above the rest of the drupal page. Is there a way to put the page in its proper place within the drupal layout? (Also, the images aren't showing).

Update 3: I removed all src="{{ asset(...) }}" tags from page.html.twig, and the javascript seems to work, as does the css. The only things left are how to get the page to work within the framework of the drupal page (instead of above it), and how to include images.

That's a weird way of using a template, I've never seen it done like that before. — 2pha
How would you use a template? I figured I'd just read the file and $this->t would turn it into the appropriate html. Is there a more druponic way of doing it? — Joshua M. Moore
Depends on what you are trying to theme, but you should never have to call readFile. You know about theme suggestions right? You know how to turn on theme debugging yes? drupal.org/docs/8/theming/twig/debugging-twig-templates — 2pha
I did that in order to separate the html/twig structure from the application logic. — Joshua M. Moore
I understand that, and yes, you should use a template, you are just using it wrong. Take a look at: drupal.org/docs/8/theming/twig/… — 2pha

Fool Fool · Accepted Answer · 2018-07-16T22:17:22

I think you should change it to just

Rather than the absolute path to a CSS file.

Trying to include assets (js, img, css) in a drupal 8 module

1 Answers