Sorry. I am new. I am looking for information about defining pages. What are blockClass, which props are available for different definitions? How can I control the location of an image...

VTEX in your native language 🌎 Português
1

The information I saw so far on blocks is very limited. Thanks for any help

2

todas as imagens que você sobe no File Manager, são acessadas no site pelo https://<accountname>.vteximg.com.br/arquivos/nomedaimagem.jpg

3

Hello ymelman,

Blockclass are just like variables, your can use them to independently customize a single block (rich-text, menu-item). They are important to identifier the block for customization.

Ex:

“rich-text#block-title”: {
“props”: {
“blockClass”: “block-title”,
“text”: “Block Title”
}
},

So, instead instead of using .vtex-rich-text-0-x-paragraph and modifying all existing rich-text blocks on the site, I can use .vtex-rich-text-0-x-paragraph–block-title, this way I can style only the blocks that have the class ‘block-title’."

Now, about de image location:

You can use the assets builder (Using the Assets Builder)

Ex:

“image#image-block”: {
“props”: {
“src”: “assets/image-block.png”

}

},

Or you can use an external image link from anywhere:

Ex:

“image#image-block”: {
“props”: {
“src”: “Imagem – Wikipédia, a enciclopédia livre”

}

},

Or you can use an external link of an image that you used in your VTEX media gallery.

To do this, access: https://.myvtex.com/admin/new-cms/media-gallery, upload the desired image, then click on “copy image URL” and then use it within your code.

Ex:

“image#image-block”: {
“props”: {
“src”: “https://.vtexassets.com/assets/vtex.file-manager-graphql/images/9687a9b9-06ec-4199-afaa-8eba763d90d8___8f1d4ffde8568ac3067010ab71a15462.webp”

}

},