Headline Component Parameter (look like)

[ronaldo304]

Hi, this is my parameter setting for headings. It shows what kind of heading, what appearance and a few other things. Everything works fine, but for the appearance the size field (look like H1, H2, H3…) is not displayed correctly. The “object Object” field is always displayed first with the arrow pointing to the left. As soon as I click on the arrow, I can choose and it’s displayed the way I want it. And it also works. But it’s a bit annoying in the workflow. Do I’ve a mistake in the parameter code or is there something I can improve?
Thank You!

HTML-Tag
{{dc:param:HeadTag}}

Font-size:
{{dc:param:HeadSize.FontSize}}

Font-height:
{{dc:param:HeadSize.Height}}

P.S.
I know I can take p instead of param, but the dynamic content works like this.

 {
"headContent" : {
  "label"  : "Inhalt",  
  "type"   : "group",
  "params" : {
      
      "text" : {
        "label"			: "Text",
        "type"			: "text-editor",
        "initial"		: "Überschrift"
      },

      "href" : {
        "label"   		: "URL",
        "type"			: "text",
        "placeholder" 	: "z.B. example.de"
      },
      
      "target" : {
			"type"    		: "choose",
			"label"   		: "Ziel",
			"initial" 		: "_self",
			"options"		: [
				{"label" 	: "Intern", "value" : "_self"},
				{"label" 	: "Extern", "value" : "_blank"}
				]
		}
    }
  },

  "HeadTag" : {
    "label"   : "Tag",
    "type"    : "choose",
    "initial" : "h1",
    "options" : [
      { "value" : "h1",
       	"label" : "H1" },
      { "value" : "h2",
       	"label" : "H2" },
      { "value" : "h3",
       	"label" : "H3" }
    ]
  },
   
	"HeadSize" : {
    "label"    : "Size",
    "type"    : "choose",
    "initial" : "H1",
    "options" : [
      { "value" : { 
        	"FontSize" : "2.5em",
        	"Height" : "1.2"
        },
        "label" : "H1" },
      
      { "value" : { 
        	"FontSize" : "2em",
        	"Height" : "1.2"
        } ,
        "label" : "H2" },
      
        { "value" : { 
        	"FontSize" : "1.6em",
        	"Height" : "1.2"
        } ,
        "label" : "H3" }
      ]
	},
   
 "headDesign" : {
    "label"  : "Überschrift Design",
	"type"   : "group",
	"params" : {
    
		"textColor" : {
		"label"   	: "Text Color",
		"type"    	: "color-pair",
		"initial" 	: {
		  "base" 	: "#FFFFFF",
		  "alt"  	: "#FFFFFF"
			}
		},
    
    "topMargin" : {
          "label"    : "Margin Top",
          "type"     : "dimension",
          "initial"  : "0em",
          "slider"   : true,
          "keywords" : [ "auto" ],
          "units"    : [ "px", "em", "rem" ],
		"isVar"   : true
        },
    
    "rightMargin" : {
          "label"    : "Margin Right",
          "type"     : "dimension",
          "initial"  : "0em",
          "slider"   : true,
          "keywords" : [ "auto" ],
          "units"    : [ "px", "em", "rem" ],
		"isVar"   : true
        },
    
    "bottomMargin" : {
          "label"    : "Margin Bottom",
          "type"     : "dimension",
          "initial"  : "2em",
          "slider"   : true,
          "keywords" : [ "auto" ],
          "units"    : [ "px", "em", "rem" ],
		"isVar"   : true
        },
    
    "leftMargin" : {
          "label"    : "Margin Left",
          "type"     : "dimension",
          "initial"  : "0em",
          "slider"   : true,
          "keywords" : [ "auto" ],
          "units"    : [ "px", "em", "rem" ],
		"isVar"   : true
        	}
	}
  }
}

[ruenel]

Hello @ronaldo304,

Thanks for writing in!

Your JSON is incorrect. Always keep in mind that there should only be one value. If there are multiple data in that value, you will have to break it down. For example in your HeadSize, the value can only be “h1”, “h2”, or “h3”. You will have to use params for the font size and height.

  "HeadSize" : {
    "label"    : "Size",
    "type"    : "choose",
    "initial" : "h1",
    "options" : [
      { 
        "value" : "h1", 
        "label" : "H1", 
        "params" : {
          "FontSize" : {
            "value" : "1em" 
          },
          "Height" : {
            "value" : "1em" 
          }
        }
      },
      { 
        "value" : "h2", 
        "label" : "H2", 
        "params" : {
          "FontSize" : {
            "value" : "1em" 
          },
          "Height" : {
            "value" : "1em" 
          }
        }
      },
      { 
        "value" : "h3", 
        "label" : "H3", 
        "params" : {
          "FontSize" : {
            "value" : "1em" 
          },
          "Height" : {
            "value" : "1em" 
          }
        }
      }
      ]
  },

So, when the HeadSize is “h1”, you can get the font size parameter for that particular size.

Best Regards.

[ronaldo304]

Thank you. But this code somehow does not seem to work. When I put my old code back in, everything works fine. I have also adjusted the placeholders for the individual parameters. I hope there is just a spelling mistake in there.

But apart from that:
After I saved your parameter code, ALL headings on all pages that used this component were DELETED and replaced with the inital text. Now all previously used headings are gone and the initial text “Heading” appears everywhere.

I don’t know if this is related to your code or because I also changed the text parameter of the heading from “text” to “Text” in between. Before {{dc:param:HeadContent.text}} and after {{dc:param:HeadContent.Text}}. But even if this were the case, how can it be that with such a minor change all the headings that were previously entered suddenly disappear???

Please can you have a look? Thank you.

[marc_a]

Hey @ronaldo304,

The given credentials are not working, please double-check and update them with the correct ones. On other hand, you can check the full references of the parameters on the link below:

• https://theme.co/docs/parameters

Note: the correct format for the dynamic parameters is {{dc:p:yourkey}} not {{dc:param:yourkey}}

Thank you.

[ronaldo304]

Sorry. New password in secure note

As for the parameters:
The word “parameter” is not really wrong, is it? It’s just longer than the letter P. Besides, everything works fine with the word parameter and if you don’t insert dynamic content by hand, but via the dynamic content selection, Cornerstone always set “param” in the placeholder.

[charlie]

{{dc:p}} or {{dc:param}} works the same, it’s a little confusing as we usually see {{dc:p}} in user sites.

And to note your “Text” to “text” change. That data will not carry over unfortunately, but if you change it back that data should still be there provided you didn’t change parameter data after the move. It might still be there though even with changing, I would check though between moving it back. For custom elements we have a migration system for key changes like this, as your right it’s a minor change with pretty bad consequences. I will add this feature request to parameters.