Responsive Parameters & Using Objects As Values

[whitemedia]

Hi @charlie,

I have just been looking at your response to a previous question in Parameters: Set inital value for responsive settings with isVar

I am creating a Headline Component with parameters as an export Component, but am struggling with one aspect of it. Using the example in the link above, I am trying to set an initial font-size for each of the five breakpoints. However, by design, the font sizes are not visible in the parameter settings. the font sizes are set by choosing the heading tag h2, h3, h4, each of which is wired up to use objects as value (as per the Themeco documentation).

Below are my parameter settings. The relevant part comes under the second “param” - tags (please note that I have only added the breakpoints for the h2 section). In dev tools I have inserted {{dc:p:heading.tag.fontSize.desktop}} for the large screen setting and the appropriate code for each of the smaller screen sizes:

{
"heading" : {
	"type"   : "group",
	"label"  : "Heading",
	"params" : {
		"content" : {
			"label"       : "Heading",
			"type"        : "text",
			"initial"     : "Headline Goes Here",
			"placeholder" : "e.g. Your Heading"
		},
		"tag" : {
			"type"    : "choose",
			"label"   : "Tag",
			"initial" : "h2",        
			"options" : [
				{
        "value" : {
          "tag"       : "h2",
          "fontSize" : {
            "type"   : "group",
            "params" : {
              "desktop" : {
                "type"    : "font-size",
                "initial" : "2em"
              },
              "laptop" : {
                "type"    : "font-size",
                "initial" : "2em"
              },
              "tablet" : {
                "type"    : "font-size",
                "initial" : "1.5em"
              },
              "tabletPortrait" : {
                "type"    : "font-size",
                "initial" : "1.2em"
              },
              "mobile" : {
                "type"    : "font-size",
                "initial" : "1.2em"
              }
            }
          }
        },
          "label" : "h2"
      },
      {
        "value" : {
          "tag"       : "h3",
          "font-size" : "1.5em"
        },
          "label" : "h3"
      },
      {
        "value" : {
          "tag"       : "h4",
          "font-size" : "1.2em"
        },
          "label" : "h4"
      }
			]
		},
		"align" : {
			"label"    : "Align",
			"type"     : "choose",
			"initial"  : "center",
			"offValue" : "none",
			"isVar"    : true,
			"options"  : [
				{ "value" : "left",    "icon" : "ui:text-align-left"    },
				{ "value" : "center",  "icon" : "ui:text-align-center"  },
				{ "value" : "right",   "icon" : "ui:text-align-right"   },
				{ "value" : "justify", "icon" : "ui:text-align-justify" }
			]
		},
		"color" : {
		  "label"   : "Text Colour",
		  "type"    : "color",
		  "initial" : "#000000"
	  },
  "margin" : {
    "type"     : "group",
    "label"    : "Margin",
    "noPicker" : "true",
    "params" : {
      "top" : {
        "type"        : "margin",
        "label"       : "Top",
        "labelBefore" : "css:margin-top",
        "initial"     : "0px",
        "isVar"       : true
      },
      "right" : {
        "type"        : "margin",
        "label"       : "Right",
        "labelBefore" : "css:margin-right",
        "initial"     : "0px",
        "isVar"       : true
      },
      "bottom" : {
        "type"        : "margin",
        "label"       : "Bttm",
        "labelBefore" : "css:margin-bottom",
        "initial"     : "0px",
        "isVar"       : true
      },
      "left" : {
        "type"        : "margin",
        "label"       : "Left",
        "labelBefore" : "css:margin-left",
        "initial"     : "0px",
        "isVar"       : true
      }
    }
  }
}
}
}

Is it possible to do what i am trying to do? In a less perfect world I would create three separate headline export components where the font-size can be explicitly changed, but I am trying to find a solution where the heading tag can manage the font-sizing automatically.

Thanks,
Christopher

[charlie]

Right now you actually have the values object in the control array format. Right now it’s setup to look at the following DC string.

{{dc:p:heading.tag.fontSize.params.laptop.initial}}

I think what you mean to do is something like this for your values. Since it’s a value at this point your JSON can be whatever you’d like it to be.

              "value": {
                "tag": "h2",
                "fontSize": {
                  "desktop" : "2em",
                  "laptop" : "1em",
                }
              }

Whenever your not sure too. Add type="json" and you’ll see what your object actually is in a text element.

{{dc:p:heading.tag.fontSize type="json"}}

[whitemedia]

Thanks Charlie,

The pointers put me in the right direction together with a bit of help from ChatGPT to get the brackets and braces correct after I built your suggestions into the JSON! Below is the JSON which now works for me.

As ever, thank you for your help,
Christopher

{
  "heading": {
    "type": "group",
    "label": "Heading",
    "params": {
      "content": {
        "label": "Heading",
        "type": "text",
        "initial": "Headline Goes Here",
        "placeholder": "e.g. Your Heading"
      },
      "tag": {
        "type": "choose",
        "label": "Tag",
        "initial": "h2",
        "options": [
          {
            "value": {
              "tag": "h2",
              "fontSize": {
                "desktop": "2em",
                "laptop": "2em",
                "tablet": "1.5em",
                "tabletPortrait": "1.5em",
                "mobile": "1.2em"
              }
            },
            "label": "H2"
          },
          {
            "value": {
              "tag": "h3",
              "fontSize": {
                "desktop": "1.5em",
                "laptop": "1.5em",
                "tablet": "1.2em",
                "tabletPortrait": "1.2em",
                "mobile": "1em"
              }
            },
            "label": "H3"
          }
        ]
      },
      "align": {
        "label": "Align",
        "type": "choose",
        "initial": "center",
        "offValue": "none",
        "isVar": true,
        "options": [
          {
            "value": "left",
            "icon": "ui:text-align-left"
          },
          {
            "value": "center",
            "icon": "ui:text-align-center"
          },
          {
            "value": "right",
            "icon": "ui:text-align-right"
          },
          {
            "value": "justify",
            "icon": "ui:text-align-justify"
          }
        ]
      },
      "color": {
        "label": "Text Colour",
        "type": "color",
        "initial": "#000000"
      },
      "margin": {
        "type": "group",
        "label": "Margin",
        "noPicker": true,
        "params": {
          "top": {
            "type": "margin",
            "label": "Top",
            "labelBefore": "css:margin-top",
            "initial": "0px",
            "isVar": true
          },
          "right": {
            "type": "margin",
            "label": "Right",
            "labelBefore": "css:margin-right",
            "initial": "0px",
            "isVar": true
          },
          "bottom": {
            "type": "margin",
            "label": "Bttm",
            "labelBefore": "css:margin-bottom",
            "initial": "0px",
            "isVar": true
          },
          "left": {
            "type": "margin",
            "label": "Left",
            "labelBefore": "css:margin-left",
            "initial": "0px",
            "isVar": true
          }
        }
      }
    }
  }
}

[charlie]

Happy to help, have a great day!