I have a website built with Astro and use Netlify CMS for content management. The media upload location seems to be different from where I want to link. I had a look at the documentation and the config seems to be correct but the path is being created inside the pages folder which I think might be the issue: https://docs-starters--netlify-cms-www.netlify.app/docs/configuration-options/.
If I use the upload widget for the pdf file then it uploads in my pages/forms/static/upload
which is correct but if I want to link it then it might be a problem. Does anyone have an idea how to get this linked up with Astro inside the pages folder? If I use the config as below then it uploads to src/pages/forms/static/upload
.
Here is a snippet of my Astro config:
NetlifyCMS({
config: {
backend: {
name: 'git-gateway',
branch: 'latest',
},
collections: [
{
name: 'forms',
label: 'Forms',
label_singular: 'Forms',
folder: 'src/pages/forms',
create: true,
delete: true,
fields: [
{ name: 'title', widget: 'string', label: 'Post Title' },
{
name: 'publishDate',
widget: 'datetime',
format: 'DD MMM YYYY',
date_format: 'DD MMM YYYY',
time_format: false,
label: 'Publish Date',
},
{ name: 'author', widget: 'string', label: 'Author Name', required: false },
{ name: 'authorURL', widget: 'string', label: 'Author URL', required: false },
{ name: 'description', widget: 'string', label: 'Description', required: false },
{
name: 'pdfFile',
widget: 'file',
label: 'PDF File',
required: false,
media_folder: 'static/upload',
public_folder: '/upload',
accept: ['application/pdf'],
},
{ name: 'body', widget: 'markdown', label: 'Post Body' },
{
name: 'layout',
widget: 'select',
default: '../../layouts/BlogPost.astro',
options: [
{ label: 'Forms', value: '../../layouts/BlogPost.astro' },
],
},
],
},
],
},
previewStyles: ['/src/styles/blog.css'],
}),
Here is the component I am using to render the data:
<article class="post-preview mt-5 mb-5 flex md:justify-start justify-center">
<FileIcon /><a href={post.url}
><a href={post.frontmatter.pdfFile}
><p class="text-xl">
{post.frontmatter.title}
</p></a
>
</a>
</article>
I managed to solve it. The config was supposed to be in root and not in the individual collection. Here is an example:
NetlifyCMS({
config: {
backend: {
name: 'git-gateway',
branch: 'latest',
},
media_folder: 'public/upload',
public_folder: '/upload',
collections: [
{
name: 'forms',
label: 'Forms',
label_singular: 'Forms',
folder: 'src/pages/forms',
create: true,
delete: true,
fields: [
{ name: 'title', widget: 'string', label: 'Post Title' },
{
name: 'publishDate',
widget: 'datetime',
format: 'DD MMM YYYY',
date_format: 'DD MMM YYYY',
time_format: false,
label: 'Publish Date',
},
{ name: 'author', widget: 'string', label: 'Author Name', required: false },
{ name: 'authorURL', widget: 'string', label: 'Author URL', required: false },
{ name: 'description', widget: 'string', label: 'Description', required: false },
{
name: 'pdfFile',
widget: 'file',
label: 'PDF File',
accept: ['application/pdf'],
},
{ name: 'body', widget: 'markdown', label: 'Post Body' },
{
name: 'layout',
widget: 'select',
default: '../../layouts/BlogPost.astro',
options: [
{ label: 'Forms', value: '../../layouts/BlogPost.astro' },
],
},
],
},
],
},
previewStyles: ['/src/styles/blog.css'],
}),