Making your content responsive

[github-learning-lab]

Making your content responsive

✨ Branch: responsiveimage

Introduction

An e-commerce's homepage is always the client's first contact with the brand. Therefore, it's common for retailers to want to establish direct communication with their users at this strategic point in time during navigation.

Several components in Store Framework serve this scenario, such as the Info Card, which we looked at previously, and the Rich Text.

As we have seen during step three, the Rich Text is responsible for transforming texts into HTML elements, having the big advantage of reading Markdown. This give the component the flexibility to accept various text structures, allowing retailers to build their communication in more direct and clear way.

Configuring the Rich Text

Just as with its functionality, the Rich Text configuration is also simple.

The same way that "Hello, world!" was created, we can create a block implementation example using written text in markdown format. For example:

"rich-text": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
},

As previously stated, using Markdown allows for more component flexibility. However, it may also lead to your alteration in your rendering, according to the device used by the user.

For example: the above sentence ( # Your Coffee, Your Way \n ### New Coffee Makers Collection ) can be use a markdown that's suitable for desktop, but not necessarily for mobile as well (whose screen size is smaller).

To resolve this scenario and make the behavior more adaptable to other devices, we should use the Responsive Layout.

First, we must declare the blocks in the store.home template:

"responsive-layout.desktop#desktop", "responsive-layout.mobile#mobile"

Them, we must declare these blocks as follows:

...

"responsive-layout.desktop#desktop": {
  "children": ["rich-text#desktop"]
},

"responsive-layout.mobile#mobile": {
  "children": ["rich-text#mobile"]
},

"rich-text#desktop": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
},

"rich-text#mobile": {
  "props": {
    "text": "# Your Coffee, Your Way \n ### New Coffee Makers Collection",
    "textPosition": "CENTER",
    "textAlignment": "CENTER"
  }
}

As we interpret the code above, we can notice two Rich Text configurations, built based on responsive-layout.desktop#desktop and responsive-layout.mobile#mobile.

Activity

During this activity, we will play around a little with the Rich Text markdown and learn how to use it with the Image component. All the while using Responsive Layout, of course!

Desktop:

Mobile:

1. Add the code given above to home.jsonc and declare the responsive-layout block in the store.home template;
2. In rich-text#mobile, alter the markdown of the first sentence to h3 and of the second to h4;
3. Add image#desktop as a child of responsive-layout.desktop#desktop. Repeat the process with image#mobile and responsive-layout.mobile#mobile;
4. Declare the following Image blocks:

"image#desktop": {
  "props": {
    "src": "https://appliancetheme.vteximg.com.br/arquivos/Responsive-Image-Desktop.jpg?q=1",
    "link": {
      "url": "/small-appliances/coffee-makers"
    } ,
    "alt": "Coffee Makers Collection"
  }
},

"image#mobile": {
  "props": {
    "src": "https://appliancetheme.vteximg.com.br/arquivos/Responsive-Image-Mobile.jpg?q=1",
    "link": {
      "url": "/small-appliances/coffee-makers"
    } ,
    "alt": "Coffee Makers Collection"
  }
},

5. When analyzing the componente Image props, set the two images' max width to 100%.

ℹ️ Remember to access the Responsive Layout documentation if you have any question during your activity.

---

If you're still unsure as to how to send your answers, click here.

[vtex-course-hub]

You did great! 😁

Results

✅✅✅✅✅✅✅✅

Tests

✅ First test - Code compilation
✅ store.home must contain responsive layouts mobile and desktop
✅ Desktop's image and rich text must be correctly stated
✅ Mobile's image and rich text must be correctly stated
✅ Rich-text Mobile props must be correclty declared
✅ Rich-text Desktop props must be correclty declared
✅ Image Mobile props must be correclty declared
✅ Image Desktop props must be correclty declared

[github-learning-lab]

You have successfully completed this step!

Go to the next step!