Comment on page
Example 1 - Text, Images & Link
Craft personalized content blocks for the display layer of lore
Let's look at an example loreDetails render below - It contains inline bold and italics text, an inline link, paragraph and an image with a caption.
Paragraph, Inline links , images and more
This lore object is created using the following payload:
// lore details block example
"loreDetails": {
"blocks" : [
{
"id" : "KF-gvSlV7e",
"type" : "paragraph",
"data" : {
"text" : "<b>NFT has been featured! Check it out through this </b><a href=\"http://google.com\">link</a>"
}
},
{
"id" : "RwkzK2R7jq",
"type" : "image",
"data" : {
"file" : {
"url" : "https://dummyimage.com/600x400/cc5ccc/ffffff.png"
},
"caption" : "Small caption",
"withBorder" : false,
"stretched" : false,
"withBackground" : false
}
},
{
"id" : "A6m0TIMp_S",
"type" : "paragraph",
"data" : {
"text" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <i>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</i>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat no."
}
}
],
"version" : "2.23.2"
}
Breaking down the payload, you can see the following blocks
Block 1
Block 2
Block 3
// paragraph with inline link and images
{
"id" : "KF-gvSlV7e",
"type" : "paragraph",
"data" : {
"text" : "<b>NFT has been featured! Check it out through this
</b><a href=\"http://google.com\">link</a>"
}
}
// image with an image URL and a caption
{
"id" : "RwkzK2R7jq",
"type" : "image",
"data" : {
"file" : {
"url" : "https://dummyimage.com/600x400/cc5ccc/ffffff.png"
},
"caption" : "Small caption",
"withBorder" : false,
"stretched" : false,
"withBackground" : false
}
}
// paragraph with inline italics
{
"id" : "A6m0TIMp_S",
"type" : "paragraph",
"data" : {
"text" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<i>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat</i>. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat no."
}
}
Last modified 1yr ago