feat(cms): handle media objects

packages/default-theme/sfui.scss

@@ -4,3 +4,9 @@
 // $button-padding: 5px !default;
 // global override including scoped componentss
 // $button-padding: 50px;/* Here you can override global SCSS variables */
+/* Here you can override global SCSS variables */
+
+// global override excluding scoped components
+// $button-padding: 5px !default;
+// global override including scoped componentss
+// $button-padding: 50px;

test-page/src/components/cms/elements/SwGenericBlock.vue

@@ -1,5 +1,5 @@
 <template>
- <component :is="getComponent" :content="content" />
+ <component :is="getComponent" :content="content" :style="slotStyles"/>
 </template>
 
 <script>
@@ -15,6 +15,20 @@ export default {
  computed: {
  getComponent() {
  return getComponentBy(this.content);
+ },
+ backgroundMediaMode() {
+ return this.content.backgroundMediaMode;
+ },
+ backgroundMediaMode() {
+ return this.content.backgroundMediaMode;
+ },
+ slotStyles() {
+ const {
+ backgroundMedia
+ } = this.content;
+ return {
+ backgroundImage: backgroundMedia ? `url(${backgroundMedia.url})` : null,
+ };
  }
  }
 };

test-page/src/components/cms/elements/SwImage.vue

@@ -1,35 +1,39 @@
 <template>
  <div class="sw-image">
- <!-- <SfImage :content="getCmsSlot" /> -->
- <h3>image but no content</h3>
+ <SfImage :src="imgUrl" :title="title" :alt="alt" :lazy="lazyLoad" />
  </div>
 </template>
 
 <script>
-// import {
-// SfImage
-// } from "@storefront-ui/vue";
+ import {
+ SfImage
+ } from "@storefront-ui/vue";
 
 export default {
  components: {
- // SfImage
+ SfImage
  },
  props: {
  content: {
  type: Object,
  default: () => ({})
  }
  },
- computed: {}
+ computed: {
+ imgUrl() {
+ return this.content.data.media.url || ""
+ },
+ alt() {
+ return this.content.data.media.alt || ""
+ },
+ title() {
+ return this.content.data.media.title || ""
+ },
+ lazyLoad() {
+ return true;
+ }
+ }
 };
 </script>
 
-<style lang="scss" scoped>
-.sw-image {
- border: 1px dashed #ff000a;
- h3 {
- padding: 10px;
- color: #ff000a;
- }
-}
-</style>
+<style lang="scss" scoped></style>

test-page/src/components/cms/elements/SwSlots.vue

@@ -30,15 +30,6 @@ export default {
  const key = this.isBlock ? "blocks" : "slots";
  return this.content && this.content[key] ? this.content[key] : [];
  },
- backgroundMediaId() {
- return this.content.backgroundMediaId;
- },
- backgroundMedia() {
- return this.content.backgroundMedia;
- },
- backgroundMediaMode() {
- return this.content.backgroundMediaMode;
- },
  slotStyles() {
  const {
  marginTop,