diff --git a/.hugo_build.lock b/.hugo_build.lock new file mode 100644 index 0000000..e69de29 diff --git a/content/docs/guides/fields.md b/content/docs/guides/fields.md new file mode 100644 index 0000000..16a00ca --- /dev/null +++ b/content/docs/guides/fields.md @@ -0,0 +1,151 @@ +--- +title: "Fields" +date: 2021-07-26T13:19:20-07:00 +lastmod: 2021-07-26T13:19:20-07:00 +draft: false +images: [] +menu: + docs: + parent: "guides" +weight: 200 +toc: true +--- +RAD allows you to create your own fields in a pages Admin area. This allows you to quickly and eaily build out pages. + +## Adding Fields + +In your `fields.php` file you can add custom fields for any template. All you need to do is return an array of each templates fields. + +For each template you wish to add fields to, start by specifying the template, and its type like this: + +
fields.php
+ +
[
    "for" => "page",
    "template" => "Home Template",
    "name" => "Home Content",
    "hidden" => [
        "WYSIWYG",
    ],
+The post type is "page", "Home Template" is the name of the template, and "Home Content" is the header to be displayed on the admin page. Additonally you can choose to hide the default WYSIWYG from the edit page. + +From there, you can start defining your fields! + +
fields.php
+ +
"fields" => [
    [
        
        "type"=>"text",
        "label"=>"First Header",
        "name"=>"header1"
    ],
    [ 
        "type"=>"image",
        "label"=>"Header Image",
        "name"=>"headerImage",
        "store"=>"url"
    ],
    [
        "type"=>"file",
        "label"=>"Description PDF",
        "name"=>"description",
    ],
]
+ + +Your final `fields.php` should look something like the following. + +
fields.php
+ +
return [
        [
            "for" => "page",
            "template" => "Home Template",
            "name" => "Home Content",
            "hidden" => [
                "WYSIWYG",
            ],
            "fields" => [
                [
                    
                    "type"=>"text",
                    "label"=>"First Header",
                    "name"=>"header1"
                ],
                [ 
                    "type"=>"image",
                    "label"=>"Header Image",
                    "name"=>"headerImage",
                    "store"=>"url"
                ],
                [
                    "type"=>"file",
                    "label"=>"Description PDF",
                    "name"=>"description",
                ],
            ]
        ],
];
+ +## Field Types + +The following field types are supported: + +* Text +* Textarea +* Number +* Image + * Can be stored as URL or JSON + * URL will just store the image, whereas JSON will store all of its details +* File +* WYSIWYG Editor + +Once these steps are complete, the fields you added will show up to the "Edit Page" area for each post using the specified template. + + +## Implementing Into Templates + +Now that we have our fields in the admin area, we need to actually get them onto each post. To do this, we will need to create two files, a `.tpl` file and a `.php` file. The `.php` file will grab all of the fields and send them to the `.tpl` file which will use handlebars to render a page based on the fields. + +The specifc name of the `.php` file does not matter, but let's keep using a home page template as an example, and call the file `tpl-home.php`. This file should live in the themes root directory (`your-theme-name/tpl-home.php`). This file is very simple. All it needs is a name, the fields to send to a template, and the template name. It should look something like this: + +
tpl-home.php
+ +
/**
 * Template Name:Home Template
 */
 
 echo site()->render("home", site()->getPost($post, 
    [
        "rad.header1",
        "rad.headerImage",
        "rad.description",
    ]  
));
+ +That is all you need! "home" is the name of the template to be renderded, "header1", "headerImage", and "description" are the names of the fields that were defined earlier in the `fields.php` file. These must be prefaced with "rad." to work properly. Additionally, you can add things like a header or footer partial template above or below the `echo site()` block depending on where you want it. + +Finally, we must make the template itself. In the `your-theme-name/tpl` folder create a file with the same name as specified in the `fields.php` folder. For this example, we would create a file named `home.tpl`. This file should be the HTML for the page, and to use our variables we should wrap their name in two curly braces. So this: + +
home.tpl
+ +
<img class="home-header-img" src="{{ headerImage }}" alt="Header Image"/>
+ +and.. + +
home.tpl
+ +
<h1>{{ header1 }}</h1>
+ +will populate those fields with whatever was input into the admin area for `headerImage` and `header1`. + +If you are using the WYSIWYG Editor, you will need to use three curly braces instead of two. This makes sure the HTML gets rendered. If you just use two, you will see HTML tags on the page, so somehthing like this: + +
<div class="wysiwyg-content">{{{ yourWYSIWYGField }}}</div>
+ + + + +That's it! You can keep adding fields for new or existing templates, and they're that easy to set up! \ No newline at end of file