Difference between revisions of "Advanced Text & Image"
Jump to navigation
Jump to search
(→Code) |
|||
| Line 296: | Line 296: | ||
"imageBoundary": true, | "imageBoundary": true, | ||
"wrapperColor": "msx-glass" | "wrapperColor": "msx-glass" | ||
| + | }] | ||
| + | }, { | ||
| + | "headline": "Separations (0.1.156+)", | ||
| + | "items": [{ | ||
| + | "tag": "0.25", | ||
| + | "separation": 0.25, | ||
| + | "type": "control", | ||
| + | "layout": "0,0,6,1", | ||
| + | "label": "Label label label label label label label label label label label", | ||
| + | "extensionLabel": "Extension extension extension extension extension extension extension" | ||
| + | }, { | ||
| + | "tag": "0.25", | ||
| + | "separation": 0.25, | ||
| + | "type": "control", | ||
| + | "layout": "6,0,6,1", | ||
| + | "icon": "adb", | ||
| + | "label": "Label label label label label label label label label label label", | ||
| + | "extensionLabel": "Extension extension extension extension extension extension extension" | ||
| + | }, { | ||
| + | "tag": "0.5", | ||
| + | "separation": 0.5, | ||
| + | "type": "control", | ||
| + | "layout": "0,1,6,1", | ||
| + | "label": "Label label label label label label label label label label label", | ||
| + | "extensionLabel": "Extension extension extension extension extension extension extension" | ||
| + | }, { | ||
| + | "tag": "0.5", | ||
| + | "separation": 0.5, | ||
| + | "type": "control", | ||
| + | "layout": "6,1,6,1", | ||
| + | "icon": "adb", | ||
| + | "label": "Label label label label label label label label label label label", | ||
| + | "extensionLabel": "Extension extension extension extension extension extension extension" | ||
| + | }, { | ||
| + | "tag": "0.75", | ||
| + | "separation": 0.75, | ||
| + | "type": "control", | ||
| + | "layout": "0,2,6,1", | ||
| + | "label": "Label label label label label label label label label label label", | ||
| + | "extensionLabel": "Extension extension extension extension extension extension extension" | ||
| + | }, { | ||
| + | "tag": "0.75", | ||
| + | "separation": 0.75, | ||
| + | "type": "control", | ||
| + | "layout": "6,2,6,1", | ||
| + | "icon": "adb", | ||
| + | "label": "Label label label label label label label label label label label", | ||
| + | "extensionLabel": "Extension extension extension extension extension extension extension" | ||
| + | }, { | ||
| + | "tag": "0.5", | ||
| + | "separation": 0.5, | ||
| + | "type": "default", | ||
| + | "layout": "0,3,6,3", | ||
| + | "alignment": "center|separation-text-right", | ||
| + | "centration": "text|title", | ||
| + | "headline": "Headline headline headline", | ||
| + | "text": "Text text text text text text text text text text text text text", | ||
| + | "title": "Title title title", | ||
| + | "titleHeader": "Header header header header header header header header", | ||
| + | "titleFooter": "Footer footer footer footer footer footer footer footer" | ||
| + | }, { | ||
| + | "tag": "0.9", | ||
| + | "separation": 0.9, | ||
| + | "type": "default", | ||
| + | "layout": "6,3,6,1", | ||
| + | "image": "http://msx.benzac.de/img/test.jpg", | ||
| + | "imageFiller": "cover", | ||
| + | "imageWidth": 2, | ||
| + | "truncation": "titleHeader|titleFooter", | ||
| + | "titleHeader": "Header header header header header header header header", | ||
| + | "titleFooter": "Footer footer footer footer footer footer footer footer" | ||
| + | }, { | ||
| + | "tag": "0.75", | ||
| + | "separation": 0.75, | ||
| + | "type": "default", | ||
| + | "layout": "6,4,6,1", | ||
| + | "image": "http://msx.benzac.de/img/test.jpg", | ||
| + | "imageFiller": "height-right", | ||
| + | "imageOverlay": 0, | ||
| + | "truncation": "titleHeader|titleFooter", | ||
| + | "titleHeader": "Header header header header header header header header", | ||
| + | "titleFooter": "Footer footer footer footer footer footer footer footer" | ||
| + | }, { | ||
| + | "tag": "0.5", | ||
| + | "separation": 0.5, | ||
| + | "type": "default", | ||
| + | "layout": "6,5,6,1", | ||
| + | "image": "http://msx.benzac.de/img/test.jpg", | ||
| + | "imageFiller": "cover", | ||
| + | "imageWidth": 2, | ||
| + | "alignment": "separation-text-right", | ||
| + | "centration": "text", | ||
| + | "truncation": "titleHeader|titleFooter", | ||
| + | "titleHeader": "Header header header header header header header header", | ||
| + | "titleFooter": "Footer footer footer footer footer footer footer footer", | ||
| + | "headline": "{ico:msx-yellow:star} {ico:msx-yellow:star} {ico:msx-yellow:star} {ico:msx-yellow:star} {ico:msx-yellow:star}" | ||
}] | }] | ||
}] | }] | ||
Revision as of 09:57, 22 March 2024
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"
}]
}, {
"headline": "Separations (0.1.156+)",
"items": [{
"tag": "0.25",
"separation": 0.25,
"type": "control",
"layout": "0,0,6,1",
"label": "Label label label label label label label label label label label",
"extensionLabel": "Extension extension extension extension extension extension extension"
}, {
"tag": "0.25",
"separation": 0.25,
"type": "control",
"layout": "6,0,6,1",
"icon": "adb",
"label": "Label label label label label label label label label label label",
"extensionLabel": "Extension extension extension extension extension extension extension"
}, {
"tag": "0.5",
"separation": 0.5,
"type": "control",
"layout": "0,1,6,1",
"label": "Label label label label label label label label label label label",
"extensionLabel": "Extension extension extension extension extension extension extension"
}, {
"tag": "0.5",
"separation": 0.5,
"type": "control",
"layout": "6,1,6,1",
"icon": "adb",
"label": "Label label label label label label label label label label label",
"extensionLabel": "Extension extension extension extension extension extension extension"
}, {
"tag": "0.75",
"separation": 0.75,
"type": "control",
"layout": "0,2,6,1",
"label": "Label label label label label label label label label label label",
"extensionLabel": "Extension extension extension extension extension extension extension"
}, {
"tag": "0.75",
"separation": 0.75,
"type": "control",
"layout": "6,2,6,1",
"icon": "adb",
"label": "Label label label label label label label label label label label",
"extensionLabel": "Extension extension extension extension extension extension extension"
}, {
"tag": "0.5",
"separation": 0.5,
"type": "default",
"layout": "0,3,6,3",
"alignment": "center|separation-text-right",
"centration": "text|title",
"headline": "Headline headline headline",
"text": "Text text text text text text text text text text text text text",
"title": "Title title title",
"titleHeader": "Header header header header header header header header",
"titleFooter": "Footer footer footer footer footer footer footer footer"
}, {
"tag": "0.9",
"separation": 0.9,
"type": "default",
"layout": "6,3,6,1",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "cover",
"imageWidth": 2,
"truncation": "titleHeader|titleFooter",
"titleHeader": "Header header header header header header header header",
"titleFooter": "Footer footer footer footer footer footer footer footer"
}, {
"tag": "0.75",
"separation": 0.75,
"type": "default",
"layout": "6,4,6,1",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "height-right",
"imageOverlay": 0,
"truncation": "titleHeader|titleFooter",
"titleHeader": "Header header header header header header header header",
"titleFooter": "Footer footer footer footer footer footer footer footer"
}, {
"tag": "0.5",
"separation": 0.5,
"type": "default",
"layout": "6,5,6,1",
"image": "http://msx.benzac.de/img/test.jpg",
"imageFiller": "cover",
"imageWidth": 2,
"alignment": "separation-text-right",
"centration": "text",
"truncation": "titleHeader|titleFooter",
"titleHeader": "Header header header header header header header header",
"titleFooter": "Footer footer footer footer footer footer footer footer",
"headline": "{ico:msx-yellow:star} {ico:msx-yellow:star} {ico:msx-yellow:star} {ico:msx-yellow:star} {ico:msx-yellow:star}"
}]
}]
}