BackgroundImage Extension
Thanks to the BackgroundImage extension, you can place any photo as the background of an element.
This extension needs a specific model format to work. The model should be an object containing:
filename
- File nameid
- ID of the file
// MyBlock.js
export default {
//...
store: {
data: {
state: () => {
return {
image: {
id: null,
filename: null,
},
};
},
},
},
};
Example of use
Editor.vue
<template>
<BackgroundImage class="block-image d-none d-md-block" v-model="block.data.image"></BackgroundImage>
</template>
<script setup>
const { defineProps, inject } = require('vue');
const props = defineProps(['block']);
const block = inject('structure').block(props.block);
const extensions = inject('extensions.registry');
const BackgroundImage = extensions.editor('BackgroundImage');
</script>
Render.vue
<template>
<div class="block-image d-none d-md-block" :style="{ backgroundImage: background.backgroundImage }"></div>
</template>
<script setup>
const { defineProps, inject } = require('vue');
const props = defineProps(['block']);
const block = inject('structure').block(props.block);
const extensions = inject('extensions.registry');
const BackgroundImage = extensions.editor('BackgroundImage');
const background = new BackgroundImage(block, () => block.data.image);
</script>
The `backgroundImage` property returns a `url('...')` CSS value.