Open psal0 opened 1 year ago
This is a great idea. At present our sections are bloated with options due to the lack of this feature.
Consider another example, which would benefit hugely from @patternpoints' suggestion:
- label: Background Enabled
id: section_bg_enabled
type: checkbox
default: false
- label: Select Background Type
id: section_bg_type
type: radio
options:
- label: Colour
value: color
- label: Image
value: image
only_if: section_bg_enabled
- label: Background Colour
id: section_bg_color
type: select
options:
- label: Select Background Colour
value: ''
# Enter collection of site-specific colours. Value must match bg-xxx rules defined in main.css.
only_if: {section_bg_type: 'color'}
- label: Background Image
id: section_bg_img_url
type: image_picker
compress:
max_width: '2560'
max_height: '1440'
only_if: {section_bg_type: 'image'}
- label: "Background images should ideally be 2560 pixels wide x 1440 pixels high (a 16:9 aspect ratio) and optimised for web to less than 500kb in file size. This will ensure the best experience for your users on both large screens and mobile devices. (The General Content Section will automatically reduce images that are too large. Results may vary.)"
id: section_bg_img_hint
type: hint
only_if: {section_bg_type: 'image'}
- label: Image Horizontal Position
id: section_bg_img_horz
type: integer
only_if: {section_bg_type: 'image'}
- label: "Specify the horizontal position of the image, expressed as a percentage. (0% = left, 100% = right)"
id: section_bg_img_horz_hint
type: hint
only_if: {section_bg_type: 'image'}
- label: Image Vertical Position
id: section_bg_img_vert
type: integer
only_if: {section_bg_type: 'image'}
- label: "Specify the vertical position of the image, expressed as a percentage. (0% = top, 100% = bottom)"
id: section_bg_img_vert_hint
type: hint
only_if: {section_bg_type: 'image'}
- label: Image Brightness
id: section_bg_img_brightness
type: integer
only_if: {section_bg_type: 'image'}
- label: "Specify the brightness of the image, expressed as a percentage. (0% = black, 100% = default, 200% = twice as bright, etc)."
id: section_bg_img_brightness_hint
type: hint
only_if: {section_bg_type: 'image'}
For support of the current syntax of the only_if filter, it could either take a string (the id of the boolean field) or the hash. It would be cool, if the filter would actually also accept an array of hashes. And I guess, the hash would need to have named keys. Something like this:
- label: Background Image
id: section_bg_img_url
type: image_picker
compress:
max_width: '2560'
max_height: '1440'
only_if:
- id: section_bg_type
matches: 'image'
- id: some_other_field_id
matches: 'some_option_seleted'
This obstacle can now be overcome using CSS4's recently released :has
pseudo-class.
We've been using CSS in our Section settings for a while now for styling fonts, colours, etc - to keep the Back Office Editor in line with our branding. The :has
pseudo-class allows one to effectively target parent selectors, which is what is required due to the way Locomotive CMS Sections Back Office HTML is structured.
We can achieve conditional displays like the following example:
Sections Settings:
settings:
- label: "
<style>
/* Hide editor-inputs following bg_type, except some that we don't want hidden */
.editor-input-radio:has(input#color,input#image) ~ .editor-input:not(
:nth-child(6),
:nth-child(7),
/* and so on... */
) {
display: none;
}
/* Display bg_color input when bg_type #color is selected */
.editor-input-radio:has(input#color:checked) ~ .editor-input:is(
:nth-child(2)
) {
display: block;
}
/* Display bg_image inputs when bg_type #image is selected */
.editor-input-radio:has(input#image:checked) ~ .editor-input:is(
:nth-child(3)
) {
display: block;
}
</style>"
id: section_css
type: hint
- label: Select Background Type
id: bg_type
type: radio
options:
- label: Colour
value: color
- label: Image
value: image
- label: Background Colour
id: bg_color
type: select
options:
- label: Select Background Colour
value: ''
- label: Red
value: red
# Enter collection of site-specific colours.
- label: Background Image
id: bg_img_url
type: image_picker
compress:
max_width: '2560'
max_height: '1440'
Hope this helps others!
Feature request: It would enable us to create more complex but yet clean section forms if we had an only_if filter that checks for true / false statements additionally to boolean values.
Right now, visibility is true when there is no only_if setting or the related boolean field is true. Maybe you could add a third case in which the param is a hash and the seleted option equals the condition.
We could show or hide input fields dependent on user choices, e.g. a value of a select option or a radiobutton option chosen.