Advanced Text & Image
Jump to navigation
Jump to search
This is not really a hidden feature, but a good-to-know information. It is possible to align, truncate, and vertically center title and/or text properties. Additionally, it is possible to bind specific content properties to the image area. All features are available from version 0.1.146. Please see following example.
Example[edit]
Screenshot[edit]
Code[edit]
{
"type": "pages",
"headline": "Adavanced Text & Image",
"pages": [{
"headline": "Alignments, Truncations & Centrations",
"items": [{
"badge": "Left",
"type": "default",
"layout": "0,0,2,2",
"color": "msx-glass",
"titleHeader": "Title Header",
"title": "Title",
"titleFooter": "Title Footer",
"alignment": "left|badge-left"
}, {
"badge": "Center",
"type": "default",
"layout": "2,0,2,2",
"color": "msx-glass",
"titleHeader": "Title Header",
"title": "Title",
"titleFooter": "Title Footer",
"alignment": "center|badge-center"
}, {
"badge": "Right",
"type": "default",
"layout": "4,0,2,2",
"color": "msx-glass",
"titleHeader": "Title Header",
"title": "Title",
"titleFooter": "Title Footer",
"alignment": "right|badge-right"
}, {
"stamp": "Left",
"type": "default",
"layout": "6,0,2,2",
"color": "msx-glass",
"titleHeader": "Title Header",
"title": "Title",
"titleFooter": "Title Footer",
"alignment": "left|stamp-left",
"centration": "title"
}, {
"stamp": "Center",
"type": "default",
"layout": "8,0,2,2",
"color": "msx-glass",
"titleHeader": "Title Header",
"title": "Title",
"titleFooter": "Title Footer",
"alignment": "center|stamp-center",
"centration": "title"
}, {
"stamp": "Right",
"type": "default",
"layout": "10,0,2,2",
"color": "msx-glass",
"titleHeader": "Title Header",
"title": "Title",
"titleFooter": "Title Footer",
"alignment": "right|stamp-right",
"centration": "title"
}, {
"badge": "Truncation 1",
"type": "default",
"layout": "0,2,2,4",
"color": "msx-glass",
"titleHeader": "Long Long Long Long Title Header",
"title": "Long Long Long Long Title",
"titleFooter": "Long Long Long Long Title Footer",
"alignment": "badge-center"
}, {
"badge": "Truncation 2",
"type": "default",
"layout": "2,2,2,4",
"color": "msx-glass",
"titleHeader": "Long Long Long Long Title Header",
"title": "Long Long Long Long Title",
"titleFooter": "Long Long Long Long Title Footer",
"alignment": "badge-center",
"truncation": "titleHeader|titleFooter"
}, {
"badge": "Truncation 3",
"type": "default",
"layout": "4,2,2,4",
"color": "msx-glass",
"titleHeader": "Long Long Long Long Title Header",
"title": "Long Long Long Long Title",
"titleFooter": "Long Long Long Long Title Footer",
"alignment": "badge-center",
"truncation": "title|titleHeader|titleFooter"
}, {
"stamp": "Centration 1",
"type": "default",
"layout": "6,2,2,4",
"color": "msx-glass",
"titleHeader": "Long Long Long Long Title Header",
"title": "Long Long Long Long Title",
"titleFooter": "Long Long Long Long Title Footer",
"alignment": "center|badge-center|stamp-center",
"centration": "title"
}, {
"stamp": "Centration 2",
"type": "default",
"layout": "8,2,2,4",
"color": "msx-glass",
"titleHeader": "Long Long Long Long Title Header",
"title": "Long Long Long Long Title",
"titleFooter": "Long Long Long Long Title Footer",
"alignment": "center|badge-center|stamp-center",
"centration": "title",
"truncation": "titleHeader|titleFooter"
}, {
"stamp": "Centration 3",
"type": "default",
"layout": "10,2,2,4",
"color": "msx-glass",
"titleHeader": "Long Long Long Long Title Header",
"title": "Long Long Long Long Title",
"titleFooter": "Long Long Long Long Title Footer",
"alignment": "center|badge-center|stamp-center",
"centration": "title",
"truncation": "title|titleHeader|titleFooter"
}]
}, {
"headline": "Boundaries",
"items": [{
"type": "default",
"layout": "0,0,4,3",
"badge": "Badge",
"tag": "Tag",
"stamp": "Stamp",
"title": "Default Item",
"titleFooter": "Default Boundary",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "cover"
}, {
"type": "separate",
"layout": "4,0,4,3",
"badge": "Badge",
"tag": "Tag",
"stamp": "Stamp",
"title": "Separate Item",
"titleFooter": "Default Boundary",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "cover"
}, {
"type": "default",
"layout": "8,0,4,3",
"badge": "Long Long Long Long Badge",
"tag": "Tag",
"stamp": "Long Long Long Long Stamp",
"title": "Wrapped Default Item",
"titleFooter": "{col:msx-green}Item Boundary{br}{br}{br}",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "cover",
"imageWidth": 1.83,
"wrapperColor": "msx-glass"
}, {
"type": "default",
"layout": "0,3,4,3",
"badge": "Badge",
"tag": "Tag",
"stamp": "Stamp",
"title": "Wrapped Default Item",
"titleFooter": "{col:msx-green}Item Boundary",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "cover",
"imageHeight": 1.83,
"wrapperColor": "msx-glass"
}, {
"type": "default",
"layout": "4,3,4,3",
"badge": "Badge",
"tag": "Tag",
"stamp": "Stamp",
"title": "Wrapped Default Item",
"titleFooter": "{col:msx-yellow}Image Boundary",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "cover",
"imageHeight": 1.83,
"imageBoundary": true,
"wrapperColor": "msx-glass"
}, {
"type": "default",
"layout": "8,3,4,3",
"badge": "Long Long Long Long Badge",
"tag": "Tag",
"stamp": "Long Long Long Long Stamp",
"title": "Wrapped Default Item",
"titleFooter": "{col:msx-yellow}Image Boundary",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "cover",
"imageWidth": 1.83,
"imageBoundary": true,
"wrapperColor": "msx-glass"
}]
}, {
"headline": "Boundaries",
"items": [{
"type": "default",
"layout": "0,0,4,3",
"badge": "Badge",
"tag": "Tag",
"stamp": "00:12:34",
"stampColor": "msx-red",
"progress": 0.5,
"progressColor": "msx-red",
"title": "Default Item With Progress",
"titleFooter": "Default Boundary",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "cover"
}, {
"type": "separate",
"layout": "4,0,4,3",
"badge": "Badge",
"tag": "Tag",
"stamp": "00:12:34",
"stampColor": "msx-red",
"progress": 0.5,
"progressColor": "msx-red",
"title": "Separate Item With Progress",
"titleFooter": "Default Boundary",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "cover"
}, {
"type": "default",
"layout": "8,0,4,3",
"badge": "Badge",
"tag": "Tag",
"stamp": "00:12:34",
"stampColor": "msx-red",
"progress": 0.5,
"progressColor": "msx-red",
"title": "Wrapped Default Item With Progress",
"titleFooter": "{col:msx-green}Item Boundary{br}{br}{br}",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "cover",
"imageWidth": 1.83,
"wrapperColor": "msx-glass"
}, {
"type": "default",
"layout": "0,3,4,3",
"badge": "Badge",
"tag": "Tag",
"stamp": "00:12:34",
"stampColor": "msx-red",
"progress": 0.5,
"progressColor": "msx-red",
"title": "Wrapped Default Item With Progress",
"titleFooter": "{col:msx-green}Item Boundary",
"truncation": "title",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "cover",
"imageHeight": 1.83,
"wrapperColor": "msx-glass"
}, {
"type": "default",
"layout": "4,3,4,3",
"badge": "Badge",
"tag": "Tag",
"stamp": "00:12:34",
"stampColor": "msx-red",
"progress": 0.5,
"progressColor": "msx-red",
"title": "Wrapped Default Item With Progress",
"titleFooter": "{col:msx-yellow}Image Boundary",
"truncation": "title",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "cover",
"imageHeight": 1.83,
"imageBoundary": true,
"wrapperColor": "msx-glass"
}, {
"type": "default",
"layout": "8,3,4,3",
"badge": "Badge",
"tag": "Tag",
"stamp": "00:12:34",
"stampColor": "msx-red",
"progress": 0.5,
"progressColor": "msx-red",
"title": "Wrapped Default Item With Progress",
"titleFooter": "{col:msx-yellow}Image Boundary",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "cover",
"imageWidth": 1.83,
"imageBoundary": true,
"wrapperColor": "msx-glass"
}]
}]
}