3 Laravel blade directives that will save your time

Laravel is a great framework, highly hackable and so its template engine, Blade. Its directives, for example @if ... @endif, are user friendly but sometimes we need to add our custom ones in order to achieve our goals, for example show an icon or inserting a CSS asset with its version.

In Meritocracy we found three directives, used by us everyday, that can help your life and save your development time. If you don’t know how to create a custom directive, you can check out this practical tutorial.

1. @var directive

Let’s be honest: the way to declare a variable in blade sucks. That’s why we need our directive to achieve this. You can copy and paste this code in your BladeServiceProvider:

// Add @var for Variable Assignment
Blade::directive('var', function($expression) {

  // Strip Open and Close Parenthesis
  $expression = substr(substr($expression, 0, -1), 1);

  list($variable, $value) = explode('\',', $expression, 2);

  // Ensure variable has no spaces or apostrophes
  $variable = trim(str_replace('\'', '', $variable));

  // Make sure that the variable starts with $
  if (!starts_with($variable, '$')) {
    $variable = '$' . $variable;
  }

  $value = trim($value);
  return "<?php {$variable} = {$value}; ?>";
});

Then you can use it like this: @var('foo', 'bar') and the foo variable will have thebar value. Definitely better than{{--*/ $foo = 'bar' /*--}}.

2. @asset directive

Manage public assets like CSS and JS with version is a great thing, because you don’t need to clear the cache and the file will be updated for all, but how to do this in Laravel? We wrote this directive to satisfy your need.

// Add @asset markup
Blade::directive('asset', function($file) {

    $file = str_replace(['(', ')', "'"], '', $file);
    $filename = $file;

    // Internal file
    if (!starts_with($file, '//') && !starts_with($file, 'http')) {
        $version = File::lastModified(public_path() . '/' . $file);
        $filename = $file . '?v=' . $version;
        if (!starts_with($filename, '/')) {
            $filename = '/' . $filename;
        }
    }

    $fileType = substr(strrchr($file, '.'), 1);

    if ($fileType == 'js') {
        return '<script src="' . $filename . '"></script>';
    } else {
        return '<link href="' . $filename . '" rel="stylesheet" />';
    }
});

How does it work? First of all it checks if the given asset is a remote one and if it isn’t, it checks the last edit date as timestamp and it adds it as version at the end of the file, appending ?v=YYYYY to it.

Note that it will insert the full HTML needed for the file inclusion.

@asset('main.css') // main.css?v=123456
@asset('app.js') // app.js?v=123456

1. @icon directive

It’s a simple directive, but useful: we had to change the prefix of all the icons in our site and it was frustrating. With this helper, you need to type only the name of the icon and voilà. Of course you can also pass additional classes.

// Add @icon directive
Blade::directive('icon', function($name) {
    $class = str_replace(["('", "')"], '', $name);
    return '<i class="fa fa-' . $class . '"></i>';
});

Example on how to use it:

@icon('twitter') // <i class="fa fa-twitter"></i>
@icon('youtube red') // <i class="fa fa-youtube red"></i>