Difference between revisions of "Advanced Text & Image"
Jump to navigation
Jump to search
(Created page with "This is not really a hidden feature, but a good-to-know information. It is possible to align, truncate, and vertically center title and text properties. Additionally, it is po...") |
|||
| Line 1: | Line 1: | ||
| − | This is not really a hidden feature, but a good-to-know information. It is possible to align, truncate, and vertically center title and 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. | + | 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 == | == Example == | ||
Revision as of 14:29, 10 June 2022
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"
}]
}]
}