Description
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.
Syntax
{% editable_file <name>(, <options>) %}<default value>{% endeditable_file %}
Example
{% editable_file "banner", hint: "Upload a banner (perfect size: 300px by 100px)", priority: 1 %}
http://placehold.it/300x100
{% endeditable_file %}
Options
| 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 %}