BentoBox

The BentoBox2 Developer Hub

Welcome to the BentoBox2 developer hub. You'll find comprehensive guides and documentation to help you start working with BentoBox2 as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Developer Documentation

Assets

located in /assets/

All of your themes assets should be located in the /assets/ directory of your theme. These are accessible via the static() template tag.

For example, access /assets/img/cheesecake.png like so:

<img src="{{ static("/img/cheesecake.png") }}">

SCSS

BentoBox provides a Sass processor. Learn more about Sass (Syntactically Awesome Style Sheets) here. You may reference template variables within Sass files.

<link rel="stylesheet" href="{{ scss('scss/style.scss') }}" />

Relative Paths

Only within the assets directory, static assets are accessible via relative paths. In /assets/css/style.css you can do something like:

body {
 background: transparent url('../img/cheescake.png') repeat; 
}

There's one exception: You can't use relative paths in a BentoBox-rendered SCSS file. Instead, you need to use the static() filter. For instance:

body {
 background: transparent url('{{ static("img/cheesecake.png") }}') repeat; 
}

Resizing Images

If you need to ensure certain image sizes, use the resize filter. For example:

<img src="{{ account.logo|resize(300, 200, 'max') }}" alt="{{ account.name }}">

Assets

located in /assets/