Skip to content

3. Build your views

Giannis Gasteratos edited this page Feb 28, 2019 · 9 revisions

Whenever you need the url of a local file (image/css/js etc) you can retrieve its path with:

theme_url('path-to-file')

The path-to-file should be relative to Theme Folder (NOT to public!). For example, if you have placed an image in public/theme-name/img/logo.png your Blade code would be:

<img src="{{theme_url('img/logo.png')}}">

When you are referring to a local file it will be looked-up in the current theme hierarchy, and the correct path will be returned. If the file is not found on the current theme or its parents then you can define in the configuration file the action that will be carried out: THROW_EXCEPTION | LOG_ERROR as warning (Default) | IGNORE assumes the file does exist on pubilc folder and returns the path

Some useful helpers you can use:

Theme::url('file-name'); // Equivalent to theme_url('filename')
Theme::js('file-name');  // Use with {!! ... !!} syntax
Theme::css('file-name'); // Use with {!! ... !!} syntax
Theme::img('src', 'alt', 'class-name', ['attribute' => 'value']);

Fully qualified URLs

The generated URLs will be relative to the document root. If you want to create a fully qualified url you may wrap it with the url() helper method:

theme_url('path_to/file.jpg');  // "/theme/path_to/file.jpg"
url(theme_url('path_to/file.jpg'));  // "http://my-domain/theme/path_to/file.jpg"

Your domain is retrieved from the url setting at the app.php config file (by default it will read your .env file entry)

URL queries

You may include queries in any url function. ie:

Theme::css('theme.css?ver=1.2') // theme-path/theme.css?ver=1.2

Parametric filenames

You can include any configuration key (see Custom Theme Settings) of the current theme inside any path string using {curly brackets}. For example:

Theme::url('jquery-{version}.js')

if there is a "version" key defined in the theme's configuration it will be evaluated and then the filename will be looked-up in the theme hierarchy. (e.g: many commercial themes ship with multiple versions of the main.css for different color-schemes, or you can use language-dependent assets)