Difference between revisions of "Keep Ratio Keyword"

@@ Line 1: / Line 1: @@
-It is possible to add the keyword <code>msx-keep-ratio</code> to a background image URL (at any position) to keep the aspect ratio. By default, the background image is stretched to fill the entire screen. This feature is available since version '''0.1.150'''. Please see following URL examples.
-* http://example.com/img/msx-keep-ratio/background.jpg
-* http://example.com/img/background.jpg?msx-keep-ratio
-* http://example.com/img/background.jpg?w=1920&h=1080&msx-keep-ratio
-* http://example.com/img/background.jpg#msx-keep-ratio
-* http://example.com/img/background.jpg?w=1920&h=1080#msx-keep-ratio
-Please see following code example.
-== Example ==
-=== Screenshot ===
-[[File:keep_ratio.png|thumb|640px|none|Example Screenshot (Keep Ratio Keyword)]]
-=== Code ===
-<syntaxhighlight lang="json">
-{
-    "type": "pages",
-    "headline": "Keep Ratio Keyword",
-    "options": {
-        "items": [{
-                "type": "control",
-                "layout": "0,0,8,1",
-                "label": "Enable Immersive Mode",
-                "action": "[cleanup|settings:immersive_mode:1]"
-            }, {
-                "type": "control",
-                "layout": "0,1,8,1",
-                "label": "Disable Immersive Mode",
-                "action": "[cleanup|settings:immersive_mode:0]"
-            }
-        ]
-    },
-    "template": {
-        "type": "default",
-        "titleFooter": "{col:msx-white}default",
-        "imageLabel": "default",
-        "area": "0,4,12,2",
-        "layout": "0,0,2,2",
-        "color": "msx-glass",
-        "imageFiller": "cover",
-        "alignment": "center",
-        "selection": {
-            "important": true,
-            "background": "{context:background}"
-        },
-        "properties": {
-            "image:action": "slider:stop",
-            "image:trigger": "slider:sync"
-        }
-    },
-    "items": [{
-            "image": "http://msx.benzac.de/media/thumbs/square1.jpg",
-            "background": "http://msx.benzac.de/media/square1.jpg",
-            "action": "image:http://msx.benzac.de/media/square1.jpg"
-        }, {
-            "titleFooter": "{col:msx-white}msx-keep-ratio",
-            "imageLabel": "msx-keep-ratio",
-            "image": "http://msx.benzac.de/media/thumbs/square1.jpg",
-            "background": "http://msx.benzac.de/media/square1.jpg#msx-keep-ratio",
-            "action": "image:http://msx.benzac.de/media/square1.jpg"
-        }, {
-            "image": "http://msx.benzac.de/media/thumbs/square2.jpg",
-            "background": "http://msx.benzac.de/media/square2.jpg",
-            "action": "image:http://msx.benzac.de/media/square2.jpg"
-        }, {
-            "titleFooter": "{col:msx-white}msx-keep-ratio",
-            "imageLabel": "msx-keep-ratio",
-            "image": "http://msx.benzac.de/media/thumbs/square2.jpg",
-            "background": "http://msx.benzac.de/media/square2.jpg#msx-keep-ratio",
-            "action": "image:http://msx.benzac.de/media/square2.jpg"
-        }, {
-            "image": "http://msx.benzac.de/media/thumbs/square3.jpg",
-            "background": "http://msx.benzac.de/media/square3.jpg",
-            "action": "image:http://msx.benzac.de/media/square3.jpg"
-        }, {
-            "titleFooter": "{col:msx-white}msx-keep-ratio",
-            "imageLabel": "msx-keep-ratio",
-            "image": "http://msx.benzac.de/media/thumbs/square3.jpg",
-            "background": "http://msx.benzac.de/media/square3.jpg#msx-keep-ratio",
-            "action": "image:http://msx.benzac.de/media/square3.jpg"
-        }]
-}
-</syntaxhighlight>
-=== Demo ===
-* Launch via App: https://msx.benzac.de/?start=content:https://msx.benzac.de/info/xp/data/hidden_feature_18.json
-* Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/hidden_feature_18.json

Difference between revisions of "Keep Ratio Keyword"

Revision as of 12:56, 22 November 2022

Navigation menu

Search