Skip to content

Instantly share code, notes, and snippets.

@Abeyy
Created January 1, 2019 05:33
Show Gist options
  • Save Abeyy/d5b0f97cb93d80af46f53759ffb27533 to your computer and use it in GitHub Desktop.
Save Abeyy/d5b0f97cb93d80af46f53759ffb27533 to your computer and use it in GitHub Desktop.
<template lang="html">
<div class="cosmic-asset-component card">
<img class="cosmic-image card-img-top" :src="defaultImage" />
<div class="card-body">
<h5 class="cosmic-name card-title">
{{cosmicObj.title}}
</h5>
</div>
</div>
</template>
<script>
export default {
props: {
cosmicObj: {
required: true,
type: Object
},
assetKey: {
required: true
}
},
data() {
return {}
},
computed: {
defaultImage() {
let defaultImage
this.cosmicObj.metafields.map((field) => {
if (field.title === 'default_image') return defaultImage = field.url
})
return defaultImage
},
selectedAsset() {
return this.$store.state.selectedCosmicIndex
},
cosmicContent() {
return this.cosmicObj.content
}
}
}
</script>
<style scoped lang="css">
.card {
background-color: #000;
border: 1px solid blueviolet;
color: blueviolet;
}
.cosmic-image {
height: 150px;
width: 150px;
margin: 10px auto;
border-radius: 50%;
}
.cosmic-name {
text-align: center;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment