Skip to content

Instantly share code, notes, and snippets.

@onefriendaday
Created February 8, 2019 14:09
Show Gist options
  • Save onefriendaday/88c9e6b4dcb2416e8dcb9130b1b7713d to your computer and use it in GitHub Desktop.
Save onefriendaday/88c9e6b4dcb2416e8dcb9130b1b7713d to your computer and use it in GitHub Desktop.
Storyblok Advanced Image field type
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `<div class="image__wrap">
<div class="uk-text-center uk-margin-small-bottom" v-if="validImage">
<img :src="model.image" class="image" />
</div>
<div class="uk-margin-small-bottom">
<sb-asset-selector :uid="uid" field="image">
</sb-asset-selector>
</div>
<div class="uk-text-center">
<a @click="open = !open" class="link">Show/Hide Meta-Info</a>
</div>
<div v-if="open" class="uk-margin-small-top">
<div class="uk-margin-small-bottom">
<label class="uk-form-label">Alt-Tag</label>
<input class="uk-width-1-1" v-model="model.alt_tag" />
</div>
<div class="uk-margin-small-bottom">
<label class="uk-form-label">Caption</label>
<input class="uk-width-1-1" v-model="model.caption" />
</div>
<div class="uk-margin-small-bottom">
<label class="uk-form-label">Copyright Info</label>
<input class="uk-width-1-1" v-model="model.copyright_info" />
</div>
</div>
</div>`,
data() {
return {
open: false
}
},
computed: {
validImage() {
if (typeof this.model === 'undefined' || !this.model || !this.model.image || !this.model.image.length) {
return false
}
return true
}
},
methods: {
initWith() {
return {
plugin: 'advanced-image',
image: '',
alt_tag: '',
caption: '',
copyright_info: ''
}
},
pluginCreated() {
// noop
}
},
watch: {
'model': {
handler: function (value) {
this.$emit('changed-model', value);
},
deep: true
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment