diff --git a/README.md b/README.md index 779f814..c661ad2 100644 --- a/README.md +++ b/README.md @@ -60,11 +60,11 @@ Header text. For example, "Please select a language." Introductory or explanatory text. For example, "Welcome to ACME Learning. This course is available in several languages. Please make a selection." -#### graphic (object) +#### _graphic (object) -The graphic object that contains values for **\_src** and **alt**. Typically used to display a logo image +The graphic object that contains values for **\src** and **alt**. Typically used to display a logo image -##### _src (string) +##### src (string) File name (including path) of the image. Path should be relative to the *src* folder (e.g., *course/en/images/logo.png*). diff --git a/example.json b/example.json index ca811cc..ccd6b14 100644 --- a/example.json +++ b/example.json @@ -4,6 +4,7 @@ "title": "Language selection", "displayTitle": "Please select a language", "body": "This course is available in the following languages:", + "_classes": "", "_graphic": { "src": "course/en/images/logo.png", "alt": "" diff --git a/properties.schema b/properties.schema index 7002146..d82f247 100644 --- a/properties.schema +++ b/properties.schema @@ -184,6 +184,132 @@ "validators": [], "help": "" }, + "_graphic": { + "type": "object", + "required": false, + "title": "Graphic", + "help": "A graphic that can be displayed above the title. Typically used for a logo image.", + "properties": { + "src": { + "type": "string", + "required": false, + "default": "", + "inputType": "Asset:image", + "validators": [] + }, + "alt": { + "type": "string", + "required": false, + "default": "", + "inputType": "Text", + "validators": [], + "help": "A description of the image; required when it has meaning that must be conveyed to the learner. For 'decorative' images, leave this blank.", + "translatable": true + } + } + }, + "_backgroundImage": { + "type": "object", + "required": false, + "title": "Background Image", + "properties": { + "_xlarge": { + "type": "string", + "required": false, + "default": "", + "inputType": "Asset:image", + "validators": [], + "help": "The image used with xlarge device width." + }, + "_large": { + "type": "string", + "required": false, + "default": "", + "inputType": "Asset:image", + "validators": [], + "help": "The image used with large device width." + }, + "_medium": { + "type": "string", + "required": false, + "default": "", + "inputType": "Asset:image", + "validators": [], + "help": "The image used with medium device width." + }, + "_small": { + "type": "string", + "required": false, + "default": "", + "inputType": "Asset:image", + "validators": [], + "help": "The image used with small device width." + } + } + }, + "_backgroundStyles": { + "type": "object", + "required": false, + "title": "Background Styles", + "properties": { + "_backgroundRepeat": { + "type": "string", + "required": false, + "default": "no-repeat", + "title": "Background Repeat", + "inputType": { + "type": "Select", + "options": [ + "no-repeat", + "repeat", + "repeat-x", + "repeat-y" + ] + }, + "validators": [], + "help": "Defines how the background image repeats. Options include: repeat (repeated both vertically and horizontally), repeat-x (repeated only horizontally), repeat-y (repeated only vertically), no-repeat (not repeated)." + }, + "_backgroundSize": { + "type": "string", + "required": false, + "default": "cover", + "title": "Background Size", + "inputType": { + "type": "Select", + "options": [ + "auto", + "cover", + "contain", + "100% 100%" + ] + }, + "validators": [], + "help": "Defines the size of the background image. Options include: auto (displayed in its original size), cover (resize to cover the entire container), contain (resize to make sure the image is fully visible), 100% 100% (resize to match the dimensions of the container)." + }, + "_backgroundPosition": { + "type": "string", + "required": false, + "default": "center center", + "title": "Background Position", + "inputType": { + "type": "Select", + "options": [ + "left top", + "left center", + "left bottom", + "center top", + "center center", + "center bottom", + "right top", + "right center", + "right bottom" + ] + }, + "validators": [], + "help": "Sets the position of the background image. The first value is the horizontal position and the second value is the vertical position." + } + } + }, "_languages": { "type": "array", "required": true, diff --git a/schema/config.schema.json b/schema/config.schema.json index 5c58727..a483382 100644 --- a/schema/config.schema.json +++ b/schema/config.schema.json @@ -61,6 +61,116 @@ "description": "", "default": "" }, + "_graphic": { + "type": "object", + "title": "Graphic", + "description": "A graphic that can be displayed above the title. Typically used for a logo image.", + "default": {}, + "properties": { + "src": { + "type": "string", + "title": "Source", + "default": "", + "_backboneForms": "Asset" + }, + "alt": { + "type": "string", + "title": "Alternative text", + "description": "A description of the image; required when it has meaning that must be conveyed to the learner. For 'decorative' images, leave this blank", + "default": "", + "_adapt": { + "translatable": true + } + } + } + }, + "_backgroundImage": { + "type": "object", + "title": "Background Image", + "default": {}, + "properties": { + "_xlarge": { + "type": "string", + "title": "Extra Large", + "description": "The image used with xlarge device width.", + "default": "", + "_backboneForms": "Asset" + }, + "_large": { + "type": "string", + "title": "Large", + "description": "The image used with large device width.", + "default": "", + "_backboneForms": "Asset" + }, + "_medium": { + "type": "string", + "title": "Medium", + "description": "The image used with medium device width.", + "default": "", + "_backboneForms": "Asset" + }, + "_small": { + "type": "string", + "title": "Small", + "description": "The image used with small device width.", + "default": "", + "_backboneForms": "Asset" + } + } + }, + "_backgroundStyles": { + "type": "object", + "title": "Background Styles", + "description": "Additional attributes to customise how background images are displayed", + "default": {}, + "properties": { + "_backgroundRepeat": { + "type": "string", + "title": "Background repeat", + "description": "Defines how the background image repeats. Options include: repeat (repeated both vertically and horizontally), repeat-x (repeated only horizontally), repeat-y (repeated only vertically), no-repeat (not repeated)", + "default": "no-repeat", + "enum": [ + "repeat", + "repeat-x", + "repeat-y", + "no-repeat" + ], + "_backboneForms": "Select" + }, + "_backgroundSize": { + "type": "string", + "title": "Background size", + "description": "Defines the size of the background image. Options include: auto (displayed in its original size), cover (resize to cover the entire container), contain (resize to make sure the image is fully visible), 100% 100% (resize to match the dimensions of the container)", + "default": "cover", + "enum": [ + "auto", + "cover", + "contain", + "100% 100%" + ], + "_backboneForms": "Select" + }, + "_backgroundPosition": { + "type": "string", + "title": "Background position", + "description": "Sets the position of the background image. The first value is the horizontal position and the second value is the vertical position", + "default": "center center", + "enum": [ + "left top", + "left center", + "left bottom", + "center top", + "center center", + "center bottom", + "right top", + "right center", + "right bottom" + ], + "_backboneForms": "Select" + } + } + }, "_languages": { "type": "array", "title": "Languages",