Hi I'm new to Netlify CMS I just learned about it from a blog
so I have config.yml that creates two input fields in Netlify CMS
Sample:
collections:
- name: 'team'
label: 'Team'
folder: 'src/team'
create: true
slug: '{{slug}}'
fields:
- { label: 'Team Member', name: 'title', widget: 'string' }
- { label: 'Bio', name: 'bio', widget: 'markdown' }
I'm just wondering how can I add input field for the image
Thanks!
Just add
{ label: "Image", name: "thumbnail", widget: "image"}
into one of your fields
collections:
- name: 'team'
label: 'Team'
folder: 'src/team'
create: true
slug: '{{slug}}'
fields:
- { label: 'Team Member', name: 'title', widget: 'string' }
- { label: 'Bio', name: 'bio', widget: 'markdown' }
- { label: "Image", name: "thumbnail", widget: "image"}
Source: https://www.netlifycms.org/docs/add-to-your-site/
Related
Building a portfolio site using Gatsby and Netlify CMS. I'd like to have 2 different post types, one for projects and one for blog posts. I don't see any way to differentiate the Netlify collection types in gatsby-node.ts.
This is my netlify config in static/admin/config.yml:
collections:
- name: 'blog'
label: 'Blog'
folder: 'content/blog'
create: true
slug: 'blog/{{slug}}'
path: '{{title}}/index'
editor:
preview: true
fields:
- { name: 'title', label: 'Title', widget: 'string' }
- { name: 'date', label: 'Publish Date', widget: 'datetime' }
- { name: 'description', label: 'Description', widget: 'string' }
- { name: 'body', label: 'Body', widget: 'markdown' }
- name: 'project'
label: 'Project'
folder: 'content/projects'
create: true
slug: 'projects/{{slug}}'
path: '{{title}}/index'
editor:
preview: true
fields:
- { name: 'title', label: 'Title', widget: 'string' }
- { name: 'date', label: 'Publish Date', widget: 'datetime' }
- { name: 'description', label: 'Description', widget: 'string' }
- { name: 'image', label: 'Image', widget: 'image' }
- { name: 'body', label: 'Body', widget: 'markdown' }
I'm loading them separately in gatsby-config.ts:
module.exports= {
// ...
plugins: [
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'blog',
path: `${__dirname}/content/blog`,
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'projects',
path: `${__dirname}/content/projects`,
},
},
]
// ...
}
I can create different post types in Netlify CMS which then create markdown files in the correct folders. I can't figure out how to query them separately so that I can use different templates to display them. I've been poking around in GraphiQL for hours looking for any bit of data which would differentiate these two post types.
I'm trying to give Netlify CMS access to a data file containing authors for a blog site, but I haven't been able to get the records from the root of the file. I need the records to be at the root because of the site generator I'm using. Is there anything I can replace the asterisks with to accomplish this?
- name: "settings"
label: "Settings"
files:
- name: "authors"
label: "Authors"
file: "_data/authors.yml"
fields:
- name: "*****"
label: "Authors"
widget: "list"
fields:
- {label: "Name", name: "name", widget: "string"}
- {label: "Last Name", name: "last_name", widget: "string"}
- {label: "First Name", name: "first_name", widget: "string"}
- {label: "Display Name", name: "display_name", widget: "string"}
- {label: "Bio", name: "bio", widget: "markdown"}
I use gatsby and netlify-cms.
My schema:
collections:
- name: "tags"
label: "Tags"
folder: "src/data/tags"
create: true
slug: "{{slug}}"
fields:
- {label: "Id", name: "title", widget: "string"}
- {label: "Description", name: "description", widget: "text"}
- name: "posts"
label: "Posts"
folder: "src/data/posts"
create: true
slug: "{{slug}}"
fields:
- {label: "Id", name: "title", widget: "string"}
- label: "Tags"
name: "tags"
widget: "list"
fields:
- label: "Tag"
name: "tag"
widget: "relation"
collection: "tags"
searchFields: ["name", "description"]
valueField: "title"
displayFields: ["name"]
My query:
query PostByID($id: String!) {
markdownRemark(id: { eq: $id }) {
id
html
frontmatter {
id: title
description
tags {
tag
// get tag description????
}
}
}
}
Is there a way to get tag description? I'm trying to use fragments, but it doesn't work. I asked this question as issue on Gatsby GitHub, I was advised this example:
fragment tagDetails on Tag {
title
description
}
and with this usage:
tag {
...tagDetails
}
I get this error:
"Field \"tag\" must not have a selection since type \"String\" has no subfields."
I am very new to sencha touch, and i am using Architect. I have a controller "RegisterUser"(controlleractiontap) which has a function.. when i fill in some user data and I click register button in my formview it will write the user to my local database.
I have a model called "userModel" which contains the following:
fields: [
{
name: 'Username',
type: 'string'
},
{
name: 'Password',
type: 'string'
},
{
name: 'Firstname',
type: 'string'
},
{
name: 'Lastname',
type: 'string'
},
{
name: 'Phonenumber',
type: 'string'
},
{
name: 'Email',
type: 'string'
}
],
validations: [
{
type: 'presence',
field: 'Username'
},
{
type: 'email',
field: 'Email'
},
{
type: 'length',
field: 'PhoneNumber',
max: 10,
min: 10
}
the problem: how do i call my validators in the controller so it will validate the fields in my form?
if i missing some information to make it more clear just let me now.
Thanks in advance!
var val=Ext.create('talkbag.model.Registration',new Ext.getCmp("registration").getValues());
where "registration" is the id assigned to the view that extends Ext.form.Panel
var check=val.validate();
now you can check like this if (!check.isValid())
I get an issue when I try to add some HTML codes in my CKEditor textarea, my HTML is executed in the textarea. I mean, all my HTML codes have changed of place in my Textarea, so how can I fix it?
Before adding a post on my website, I put this in my textarea :
<pre><div>toto</div></pre>
The post in my database (everything is ok):
<pre><div>toto</div></pre>
When I try to edit the post, the content is reformated in my CKEditor textarea :
<pre> </pre><div>toto</div>
So I think the main issue is CKEditor, maybe he reformat or encode all my HTML code, I don't know what's going on...
EDIT 1:
Config file of CKEditor
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' },
{ name: 'document', groups: [ 'mode'] }, // shows the source button
{ name: 'pbckcode' }
];
config.extraPlugins = 'pbckcode';
config.removeButtons = 'Underline,Subscript,Superscript';
};
My add post view:
extends admin_layout
block content
div.container
h1 Wellcome to administration pannel
div.space20
div.block.first
h2 Add post
div.wrap
form(action="/posts/add", method="post").admin
textarea(class="ckeditor", id="ckeditorFilter", placeholder="Content...", name="content", rows="15")
br
input(type="submit", value="Save")
script(src="/admin/js/ckeditor/ckeditor.js")
script
CKEDITOR.replace('content',{
toolbar: 'Basic',
uiColor: '#0091BD'
});
My edit post view :
extends admin_layout
block content
div.container
h1 Wellcome to administration pannel
div.space20
div.block.first
h2 Edit post
div.wrap
- each p in post
p= p.content
form(action="/posts/add", method="post").admin
textarea(class="ckeditor", id="ckeditorFilter", placeholder="Your content...", name="content", rows="15", required)!= p.content
br
input(type="submit", value="Edit")
script(src="/admin/js/ckeditor/ckeditor.js")
script
CKEDITOR.replace('content',{
toolbar: 'Basic',
uiColor: '#0091BD'
});
I've already answered your question here: Insert HTML codes in CKEditor textarea
You're encoding content incorrectly when writing it to the textarea.