Example 3 - Text, Video & 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 HTML5 video.
Text, links and HTML5 video
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" : "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."
}
},
{
"id": "1eCsykfRKk",
"type": "video",
"data": {
"url": "https://www.w3schools.com/html/mov_bbb.mp4",
"caption": "",
"autoplay": true,
"controls": true,
"muted": true,
"stretched": true
}
}
],
"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>"
}
}
// 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."
}
}
// HTML5 video URL
{
"id": "1eCsykfRKk",
"type": "video",
"data": {
"url": "https://www.w3schools.com/html/mov_bbb.mp4",
"caption": "",
"autoplay": true,
"controls": true,
"muted": true,
"stretched": true
}
}
Last modified 11mo ago