Editable areas contain content you want a user to be able to change. The content within the tag will be the default one.

In the back-office, the editable element will be found under the tab corresponding to the block wrapping it. It is possible to associate the element to another block.

The input field in the back-office used to edit the content is a file field.

An element can be inherited by children, each page keeping its own version of the content. However, in some cases, it may be a requirement to have the element to be editable in one place. If so, just set the "fixed" option to true.

You must give these sections a unique name because they will be inherited by children.


{% editable_file <name>(, <options>) %}<default value>{% endeditable_file %}


{% editable_file "banner", hint: "Upload a banner (perfect size: 300px by 100px)", priority: 1 %}
{% endeditable_file %}


Name Type Description
block String associate the element with a block other than the current one.
fixed Boolean make the element editable in one place. The default value is false.
hint String text displayed in the back-office just below the file field.
priority Integer used to position the file field in the back-office. Elements with the highest priority are displayed first.

How to use editable image with a default value?

If you want to use a theme image as the default value of your editable file, you might be tempted to do this:

{% editable_file 'banner' %}{{ 'banner.png' | theme_image_url }}{% endeditable_file %}

Which won't work: editable tags can't include another Liquid tag.

So you need to capture the url of the editable file first, then display your image by testing if it has been edited:

{% capture banner_url %}{% editable_file 'banner' %}{% endeditable_file %}{% endcapture %}
{% if banner_url != '' %}{{ banner_url | image_tag }}{% else %}{{ 'banner.png' | theme_image_tag }}{% endif %}
© 2024 LocomotiveCMS Terms of use Privacy Policy
Back to top