{"_id":"5814efa9c527990f00d84a21","project":"551e85be610f400d00837db7","parentDoc":null,"__v":0,"category":{"_id":"58112e72ded0340f0085d02c","project":"551e85be610f400d00837db7","__v":0,"version":"58112e71ded0340f0085d02a","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-04-07T18:58:09.521Z","from_sync":false,"order":2,"slug":"theme-logic","title":"Theme Logic & Components"},"version":{"_id":"58112e71ded0340f0085d02a","project":"551e85be610f400d00837db7","__v":4,"createdAt":"2016-10-26T22:30:09.862Z","releaseDate":"2016-10-26T22:30:09.862Z","categories":["58112e72ded0340f0085d02b","58112e72ded0340f0085d02c","58112e72ded0340f0085d02d","58112e72ded0340f0085d02e","58112e72ded0340f0085d02f","58112e72ded0340f0085d030","58112e72ded0340f0085d031","58112e72ded0340f0085d032","58112e72ded0340f0085d033","58112e72ded0340f0085d034","581137cc604d3c230048b7e4","58dc367221742d0f00a73f98","590768e54669da0f00db5c0b"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"new designer","version_clean":"2.0.0","version":"2.0"},"user":"55694ec671f3960d00b1e754","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-10-29T18:51:21.896Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":8,"body":"Below I give an example of adding a simple component to my homepage.\n\nMy theme is really great and I'm about ready to start selling my fruit subscription box to speakers of Faux Latin, but I want to let them know how prestigious it is, so I want to add a \"Seen In\" section.\n\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/ab581c9-Theme_initial.png\",\n        \"Theme initial.png\",\n        914,\n        1263,\n        \"#aaa8a7\"\n      ],\n      \"caption\": \"Before my changes\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Add a Template Component\"\n}\n[/block]\nI could probably add a component by creating the directory and all the files for it in the Code Editor, and adding it to components_list.json and hoping I got it all right, but the Designer is really good at adding components, so I'm going to cheat and use that:\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/7c0954c-Desginer_add_section.png\",\n        \"Desginer add section.png\",\n        1157,\n        1042,\n        \"#747d84\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/f3256f3-Designer_add_rich_text.png\",\n        \"Designer add rich text.png\",\n        359,\n        507,\n        \"#dfe6ec\"\n      ],\n      \"caption\": \"By default, my section is named \\\"New Section (Rich Edit)\\\", and it will show up under that folder name in the Code Editor if I don't rename it. This is fine, but can get confusing if you're adding multiple sections, or if you're going to be making changes three months later when you've forgot that \\\"New Section (Rich Text)\\\" is code for \\\"Seen In section I never renamed.\\\"\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/3d351b2-Designer_renamed_with_how_it_looks.png\",\n        \"Designer renamed with how it looks.png\",\n        1151,\n        1021,\n        \"#b4b8bd\"\n      ],\n      \"caption\": \"Let's change the name to \\\"Seen In\\\" and the current content to a simple section header saying \\\"As Seen In\\\".\"\n    }\n  ]\n}\n[/block]\nNow when I reload to the Code Editor, I can see this section under components/index:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/1e283e1-Code_Editor_reloaded_after_adding_and_naming.png\",\n        \"Code Editor reloaded after adding and naming.png\",\n        428,\n        611,\n        \"#fafbfa\"\n      ],\n      \"caption\": \"\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Add Image Settings to the Component\"\n}\n[/block]\nAll right, if you have secret developer feature turned on (ask support:::at:::cratejoy.com for the Dev Access Theme Files feature flag), you'll see two JSON files in that \"Seen In\" folder, in addition to a CSS file and an HTML file. We're going to edit *components/index/Seen In/settings_schema.json* and *components/index/Seen In/component.html* to add some images\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/5a7bb23-Component_Settings.png\",\n        \"Component Settings.png\",\n        995,\n        572,\n        \"#f9f9f8\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/2c8976c-Component_Settings_with_images.png\",\n        \"Component Settings with images.png\",\n        991,\n        660,\n        \"#f9f9f9\"\n      ],\n      \"caption\": \"By adding these three settings, they'll now appear under that component in the Designer and can be referenced by *component.html* (How'd I know I wanted type \\\"image\\\"? I looked at the settings in How it Works. You can also see a list of types in the \\\"Settings in Depth\\\" helpdoc: http://docs.cratejoy.com/docs/settings-details)\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/61e7edb-HTML_with_images.png\",\n        \"HTML with images.png\",\n        1274,\n        507,\n        \"#f9f9f8\"\n      ],\n      \"caption\": \"\"\n    }\n  ]\n}\n[/block]\nUse the Designer to add your images\n[block:api-header]\n{\n  \"type\": \"basic\"\n}\n[/block]\nNow you can upload those images in the Designer.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/d388f5e-Images_in_the_Designer.png\",\n        \"Images in the Designer.png\",\n        1145,\n        921,\n        \"#e4eaed\"\n      ],\n      \"caption\": \"Looking good! A web designer might want to add some CSS rules or something, but I'm a *developer*, not a designer.\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"adding-a-custom-component-1","type":"basic","title":"Adding a Custom Component"}

Adding a Custom Component


Below I give an example of adding a simple component to my homepage. My theme is really great and I'm about ready to start selling my fruit subscription box to speakers of Faux Latin, but I want to let them know how prestigious it is, so I want to add a "Seen In" section. [block:image] { "images": [ { "image": [ "https://files.readme.io/ab581c9-Theme_initial.png", "Theme initial.png", 914, 1263, "#aaa8a7" ], "caption": "Before my changes" } ] } [/block] [block:api-header] { "type": "basic", "title": "Add a Template Component" } [/block] I could probably add a component by creating the directory and all the files for it in the Code Editor, and adding it to components_list.json and hoping I got it all right, but the Designer is really good at adding components, so I'm going to cheat and use that: [block:image] { "images": [ { "image": [ "https://files.readme.io/7c0954c-Desginer_add_section.png", "Desginer add section.png", 1157, 1042, "#747d84" ] } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/f3256f3-Designer_add_rich_text.png", "Designer add rich text.png", 359, 507, "#dfe6ec" ], "caption": "By default, my section is named \"New Section (Rich Edit)\", and it will show up under that folder name in the Code Editor if I don't rename it. This is fine, but can get confusing if you're adding multiple sections, or if you're going to be making changes three months later when you've forgot that \"New Section (Rich Text)\" is code for \"Seen In section I never renamed.\"" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/3d351b2-Designer_renamed_with_how_it_looks.png", "Designer renamed with how it looks.png", 1151, 1021, "#b4b8bd" ], "caption": "Let's change the name to \"Seen In\" and the current content to a simple section header saying \"As Seen In\"." } ] } [/block] Now when I reload to the Code Editor, I can see this section under components/index: [block:image] { "images": [ { "image": [ "https://files.readme.io/1e283e1-Code_Editor_reloaded_after_adding_and_naming.png", "Code Editor reloaded after adding and naming.png", 428, 611, "#fafbfa" ], "caption": "" } ] } [/block] [block:api-header] { "type": "basic", "title": "Add Image Settings to the Component" } [/block] All right, if you have secret developer feature turned on (ask support@cratejoy.com for the Dev Access Theme Files feature flag), you'll see two JSON files in that "Seen In" folder, in addition to a CSS file and an HTML file. We're going to edit *components/index/Seen In/settings_schema.json* and *components/index/Seen In/component.html* to add some images [block:image] { "images": [ { "image": [ "https://files.readme.io/5a7bb23-Component_Settings.png", "Component Settings.png", 995, 572, "#f9f9f8" ] } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/2c8976c-Component_Settings_with_images.png", "Component Settings with images.png", 991, 660, "#f9f9f9" ], "caption": "By adding these three settings, they'll now appear under that component in the Designer and can be referenced by *component.html* (How'd I know I wanted type \"image\"? I looked at the settings in How it Works. You can also see a list of types in the \"Settings in Depth\" helpdoc: http://docs.cratejoy.com/docs/settings-details)" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/61e7edb-HTML_with_images.png", "HTML with images.png", 1274, 507, "#f9f9f8" ], "caption": "" } ] } [/block] Use the Designer to add your images [block:api-header] { "type": "basic" } [/block] Now you can upload those images in the Designer. [block:image] { "images": [ { "image": [ "https://files.readme.io/d388f5e-Images_in_the_Designer.png", "Images in the Designer.png", 1145, 921, "#e4eaed" ], "caption": "Looking good! A web designer might want to add some CSS rules or something, but I'm a *developer*, not a designer." } ] } [/block]