From 3c808b802a96656e97dce58ed2a4b10146d61dd2 Mon Sep 17 00:00:00 2001 From: Gabriel Johnson Date: Fri, 8 Sep 2023 11:58:19 -0700 Subject: [PATCH 1/4] Added fields doc, rough draft --- .hugo_build.lock | 0 content/docs/guides/fields.md | 141 ++++++++++++++++++++++++++++++++++ 2 files changed, 141 insertions(+) create mode 100644 .hugo_build.lock create mode 100644 content/docs/guides/fields.md 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..75b762f --- /dev/null +++ b/content/docs/guides/fields.md @@ -0,0 +1,141 @@ +--- +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 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
+ +
 "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 store as URL or JSON +* File +* WYSIWYG + +## Implementing Into Templates + +Now that we have our fields in the admin area, we need to actually get them onto a page. 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. 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: + +
fields.php
+ +
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. + +Finally, we must make the template itself. In the `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. 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 From 3522c056a626eacf8127547d6e93ebaa17640033 Mon Sep 17 00:00:00 2001 From: Gabriel Johnson Date: Fri, 8 Sep 2023 12:42:19 -0700 Subject: [PATCH 2/4] fixed fields.php --- content/docs/guides/fields.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/content/docs/guides/fields.md b/content/docs/guides/fields.md index 75b762f..6d0c3f8 100644 --- a/content/docs/guides/fields.md +++ b/content/docs/guides/fields.md @@ -58,11 +58,9 @@ Your final `fields.php` should look something like the following.
fields.php
-
 "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 @@ -136,6 +135,6 @@ and..
home.tpl
-
<h1> {{ header1 }}</h1>
+
<h1>{{ header1 }}</h1>
will populate those fields with whatever was input into the admin area. 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 From ce0ebca624273c5f3f67eef53fd79219e080c150 Mon Sep 17 00:00:00 2001 From: Gabriel Johnson Date: Mon, 11 Sep 2023 09:40:24 -0700 Subject: [PATCH 3/4] field doc updates --- content/docs/guides/fields.md | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/content/docs/guides/fields.md b/content/docs/guides/fields.md index 6d0c3f8..6bfa023 100644 --- a/content/docs/guides/fields.md +++ b/content/docs/guides/fields.md @@ -16,7 +16,7 @@ RAD allows you to create your own fields in a pages Admin area. This allows you 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 type like this: +For each template you wish to add fields to, start by specifying the template, and its type like this:
fields.php
@@ -97,25 +97,27 @@ The following field types are supported: * Textarea * Number * Image - * Can be store as URL or JSON + * Can be stored as URL or JSON + * URL will just store the image, whereas JSON will store all of its details * File -* WYSIWYG +* 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 a page. 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. +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. 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: +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: -
fields.php
+
tpl-home.php
-
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. +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 `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: +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
@@ -137,4 +139,4 @@ and.. 
<h1>{{ header1 }}</h1>
-will populate those fields with whatever was input into the admin area. 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 +will populate those fields with whatever was input into the admin area for `headerImage` and `header1`. 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 From 2863f13ac4873ac05ef39f4ec60f1b157446267b Mon Sep 17 00:00:00 2001 From: Gabriel Johnson Date: Fri, 15 Sep 2023 11:29:17 -0700 Subject: [PATCH 4/4] added explination for wysiwyg field --- content/docs/guides/fields.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/content/docs/guides/fields.md b/content/docs/guides/fields.md index 6bfa023..16a00ca 100644 --- a/content/docs/guides/fields.md +++ b/content/docs/guides/fields.md @@ -139,4 +139,13 @@ and.. 
<h1>{{ header1 }}</h1>
-will populate those fields with whatever was input into the admin area for `headerImage` and `header1`. 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 +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