Images with media_folder prop do not appear on the cms
See original GitHub issueI have split my images into folders using the media_folder property on any image widget in the config.yml, for example:
- {
name: missionHero,
label: Mission and Core Ideology Hero Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
The markdown file for the above widget contains this line:
...
missionHero: /uploads/other-images/mission_hero_image.png
...
This has been greatly beneficial to the project. However, when trying to change the image from the admin panel, no assets are found. The images are successfully queried and rendered on deploys.
Any new assets added through the admin panel are placed in my public folder, /uploads
. This then breaks the site, since the graphql queries for the images are searching for the relativeDirectory identical to the config.yml widget’s media_folder prop.
allFile(
filter: {
relativeDirectory: {eq: "other-images" }
extension: { regex: "/(jpg)|(jpeg)|(png)/" }
sourceInstanceName: { eq: "uploads" }
}
) {
edges {
node {
base
childImageSharp {
gatsbyImageData(quality: 100, layout: FULL_WIDTH)
}
}
}
}
Is this a bug, intentional, or a work in progress?
To Reproduce
- Create an image widget with a media_folder property
- Place an image under your public_folder/widget_specific_media_folder
- Query for and render that image with a relativeDirectory prop
- Try to modify that image from the admin panel
- Website fails to render with an error like
Uncaught TypeError: o.image1 is undefined
Expected behavior
I expect to be able to see the media under my public folder’s subfolders and to modify that media from the admin panel.
Screenshots
Applicable Versions:
- Netlify CMS version: netlify-cms-app 2.15.19 and netlify-cms-core 2.40.12
- Git provider: GitHub
- OS: MacOS BigSur 11.3.1
- Browser version: Firefox 88.0.1
CMS configuration https://pastebin.com/Ar8keWVL
Expand configuration
backend:
name: github
branch: develop
repo: cyono/sanitized
media_folder: "static/uploads/"
public_folder: "/uploads/"
collections:
- name: images
label: Images - For pics not in the other folders below
folder: src/cms/images
create: false
fields:
- { name: type, widget: hidden, default: "images" }
- { name: title, widget: string, default: "Images" }
- {
name: heroImage,
label: Home Page Hero Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
- {
name: heroImageAlt,
label: Home Page Hero Image Alt Text,
widget: string,
}
- { name: heroImageDark, label: Is the hero image dark, widget: boolean }
- {
name: nutFree,
label: Home Page Nut Free Logo,
widget: image,
media_folder: other-images,
public_folder: media,
}
- {
name: nutFreeAlt,
label: Home Page Nut Free Logo Alt Text,
widget: string,
}
- {
name: missionHero,
label: Mission and Core Ideology Hero Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
- {
name: missionHeroAlt,
label: Mission and Core Ideology Hero Alt,
widget: string,
}
- {
name: mentorHero,
label: Mentor Schools Hero Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: mentorHeroAlt, label: Mentor Schools Hero Alt, widget: string }
- {
name: placeBasedEducation,
label: Place Based Education Hero Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
- {
name: placeBasedEducationAlt,
label: Place Based Education Hero Alt,
widget: string,
}
- {
name: joeReilly,
label: Joe Reilly Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: joeReillyAlt, label: Joe Reilly Alt, widget: string }
- {
name: donateHero,
label: Donate Hero Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: donateHeroAlt, label: Donate Hero Alt, widget: string }
- {
name: blogPlaceholder,
label: Blog Placeholder Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
- {
name: blogPlaceholderAlt,
label: Blog Placeholder Alt,
widget: string,
}
- {
name: fact1,
label: Brag Fact 1 Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: fact1Alt, label: Brag Fact 1 Alt, widget: string }
- {
name: fact2,
label: Brag Fact 2 Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: fact2Alt, label: Brag Fact 2 Alt, widget: string }
- {
name: fact3,
label: Brag Fact 3 Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: fact3Alt, label: Brag Fact 3 Alt, widget: string }
- {
name: fact4,
label: Brag Fact 4 Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: fact4Alt, label: Brag Fact 4 Alt, widget: string }
- {
name: joinUs1,
label: Join Us Image 1,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: joinUs1Alt, label: Join Us 1 Alt, widget: string }
- {
name: joinUs2,
label: Join Us Image 2,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: joinUs2Alt, label: Join Us 2 Alt, widget: string }
- {
name: joinUs3,
label: Join Us Image 3,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: joinUs3Alt, label: Join Us 3 Alt, widget: string }
- {
name: applicationPolicies,
label: Application Policies,
widget: image,
media_folder: other-images,
public_folder: media,
}
- {
name: applicationPoliciesAlt,
label: Application Policies Alt,
widget: string,
}
- {
name: wishlist1,
label: Wishlist 1,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: wishlist1Alt, label: Wishlist 1 Alt, widget: string }
- {
name: wishlist2,
label: Wishlist 2,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: wishlist2Alt, label: Wishlist 2 Alt, widget: string }
- {
name: wishlist3,
label: Wishlist 3,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: wishlist3Alt, label: Wishlist 3 Alt, widget: string }
- {
name: fourOhFour,
label: "404",
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: fourOhFourAlt, label: 404 Alt, widget: string }
- name: events
label: Home - Events
folder: src/cms/events
create: false
fields:
- { name: type, widget hidden, default: "events-list" }
- { name: title, widget: string, default: "Events List - Max of 5" }
- { name: scheduleLink, label: Schedule PDF Link, widget: string }
- name: eventsList
widget: list
max: 5
min: 5
fields:
- { name: date, label: Event Date, widget: date }
- { name: event-title, label: Event Name, widget: string }
- {
name: text,
label: Event Description,
widget: string,
default: "Should be short",
}
- name: marketing-blurbs
label: Home - Marketing Blurbs
folder: src/cms/marketing-blurbs
create: false
fields:
- { name: type, widget: hidden, default: "marketing-blurbs" }
- { name: title, widget: string, default: "Marketing Blurbs" }
- { name: marketing1Title, label: Title 1, widget: string }
- { name: marketing1Text, label: Text 1, widget: string }
- {
name: marketing1image,
label: Marketing 1 Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: marketing1Alt, label: Marketing 1 Alt, widget: string }
- { name: marketing1Link, label: Marketing 1 link, widget: string }
- { name: marketing2Title, label: Title 2, widget: string }
- { name: marketing2Text, label: Text 2, widget: string }
- {
name: marketing2image,
label: Marketing 2 Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: marketing2Alt, label: Marketing 2 Alt, widget: string }
- { name: marketing2Link, label: Marketing 2 link, widget: string }
- { name: marketing3Title, label: Title 3, widget: string }
- { name: marketing3Text, label: Text 3, widget: string }
- {
name: marketing3image,
label: Marketing 3 Image,
widget: image,
media_folder: other-images,
public_folder: media,
}
- { name: marketing3Alt, label: Marketing 3 Alt, widget: string }
- { name: marketing3Link, label: Marketing 3 link, widget: string }
- name: image-wall
label: Home - Image Wall
folder: src/cms/image-wall
create: false
fields:
- { name: type, widget: hidden, default: "image-wall" }
- { name: title, widget: string, default: "Image Wall" }
- name: images
widget: list
fields:
- {
name: image,
label: Image,
widget: image,
media_folder: image-wall,
public_folder: media,
}
- { name: altText, label: Image Alt Text, widget: string }
- name: board-of-directors
label: About Us - Board of Directors
folder: src/cms/board-of-directors
create: true
fields:
- { name: type, widget: hidden, default: "board-of-directors" }
- {
name: meetingType,
label: Meeting Type,
widget: select,
options: ["Regular", "Organizational", "Budget"],
}
- { name: title, label: CMS Identifier }
- { name: date, label: Date, widget: date }
- { name: time, label: Time }
- { name: agenda, label: Agenda Link, required: false }
- { name: minutesDraft, label: Minutes Draft Link, required: false }
- { name: minutesApproved, label: Minutes Approved Link, required: false }
- name: official-documents
label: About Us - Official Documents (Board of Directors)
folder: src/cms/official-documents
create: true
fields:
- { name: type, widget: hidden, default: "official-document" }
- { name: title, label: Document Name, widget: string }
- { name: link, label: Link to Document, widget: string }
- name: origins
label: About Us - Origins
folder: src/cms/origins
create: false
fields:
- { name: type, widget: hidden, default: "origins" }
- { name: title, widget: string, default: "Origins" }
- { name: image1, label: Image, widget: image }
- { name: image1Alt, label: Image Alt Text, widget: string }
- { name: image2, label: Image, widget: image }
- { name: image2Alt, label: Image Alt Text, widget: string }
- { name: image3, label: Image, widget: image }
- { name: image3Alt, label: Image Alt Text, widget: string }
- name: transparency-links
label: About Us - Transparency
folder: src/cms/transparency-links
create: true
fields:
- { name: type, widget: hidden, default: "transparency-link" }
- { name: title, label: Heading, widget: string }
- name: linkList
label: Links
widget: list
field:
label: Link
widget: object
name: item
required: false
fields:
- { label: URL, name: url, widget: string }
- { label: Text, name: text, widget: string }
- {
name: noLinksText,
label: No Links Text,
required: false,
default: "none",
}
- name: community-partners
label: About Us - Community Partners
folder: src/cms/community-partners
create: true
fields:
- { name: type, widget: hidden, default: "community-partners" }
- { name: title, label: Name, widget: string }
- {
name: image,
label: Image Name,
widget: image,
media_folder: community-partners,
public_folder: media,
}
- { name: link, label: URL, widget: string }
- name: support-partners
label: About Us - Support Partners
folder: src/cms/support-partners
create: true
fields:
- { name: type, widget: hidden, default: "support-partners" }
- { name: title, label: Name, widget: string }
- {
name: image,
label: Image Name,
widget: image,
media_folder: support-partners,
public_folder: media,
}
- { name: link, label: URL, widget: string }
- name: people-leadership
label: Team - Leadership
folder: src/cms/people-leadership
create: true
fields:
- { name: type, widget: hidden, default: "people-leadership" }
- { name: title, label: Name, widget: string }
- { name: role, label: Short Role Name, widget: string }
- {
name: longRole,
label: Long Role Name,
widget: string,
required: false,
default: "",
}
- { name: blurbLong, label: Full info on individual, widget: markdown }
- {
name: regImg,
widget: image,
media_folder: people-leadership,
public_folder: media,
label: image,
}
- { name: regImgAltText, label: Image Alt Text }
- {
name: funImg,
widget: image,
media_folder: people-leadership,
public_folder: media,
label: image,
required: false,
}
- {
name: funImgAltText,
widget: string,
label: Fun Image Alt Text,
required: false,
default: "This is required if you add a fun image",
}
- {
name: order,
widget: number,
label: Order,
? use for Board Members Only
required
: false,
}
- name: people-teachers
label: Team - Teachers
folder: src/cms/people-teachers
create: true
fields:
- { name: type, widget: hidden, default: "people-teachers" }
- { name: title, label: Name, widget: string }
- { name: role, label: Role, widget: string, required: false }
- { name: blurbLong, label: Full info on individual, widget: markdown }
- {
name: regImg,
widget: image,
label: image,
media_folder: people-teachers,
public_folder: media,
}
- { name: regImgAltText, label: Image Alt Text }
- {
name: funImg,
widget: image,
label: image,
media_folder: people-teachers,
public_folder: media,
required: false,
}
- {
name: funImgAltText,
widget: string,
label: Fun Image Alt Text,
required: false,
default: "This is required if you add a fun image",
}
- name: people-support-staff
label: Team - Support Staff
folder: src/cms/people-support-staff
create: true
fields:
- { name: type, widget: hidden, default: "people-support-staff" }
- { name: title, label: Name, widget: string }
- { name: role, label: Role, widget: string, required: false }
- { name: blurbLong, label: Full info on individual, widget: markdown }
- {
name: regImg,
widget: image,
media_folder: people-support-staff,
public_folder: media,
label: image,
}
- { name: regImgAltText, label: Image Alt Text }
- {
name: funImg,
widget: image,
media_folder: people-support-staff,
public_folder: media,
label: image,
required: false,
}
- {
name: funImgAltText,
widget: string,
label: Fun Image Alt Text,
required: false,
default: "This is required if you add a fun image",
}
- name: people-community-teachers
label: Team - Community Teachers
folder: src/cms/people-community-teachers
create: true
fields:
- { name: type, widget: hidden, default: "people-community-teachers" }
- { name: title, label: Name, widget: string }
- { name: role, label: Role, widget: string, required: false }
- { name: blurbLong, label: Full info on individual, widget: markdown }
- {
name: regImg,
widget: image,
media_folder: people-community-teachers,
public_folder: media,
label: image,
}
- { name: regImgAltText, label: Image Alt Text }
- {
name: funImg,
widget: image,
media_folder: people-community-teachers,
public_folder: media,
label: image,
required: false,
}
- {
name: funImgAltText,
widget: string,
label: Fun Image Alt Text,
required: false,
default: "This is required if you add a fun image",
}
- name: people-summer-interns
label: Team - Summer Interns
folder: src/cms/people-summer-interns
create: true
fields:
- { name: type, widget: hidden, default: "people-summer-interns" }
- { name: title, label: Name, widget: string }
- {
name: image,
label: Summer Intern Image,
widget: image,
media_folder: people-summer-and-social-interns,
public_folder: media,
}
- { name: imageAlt, label: Image Alt Text, widget: string }
- { name: blurb, label: Blurb, widget: markdown }
- name: people-social-work-interns
label: Team - Social Work Interns
folder: src/cms/people-social-work-interns
create: true
fields:
- { name: type, widget: hidden, default: "people-social-work-interns" }
- { name: title, label: Name, widget: string }
- { name: role, label: Role, widget: string, required: false }
- { name: blurbLong, label: Full info on individual, widget: markdown }
- {
name: regImg,
widget: image,
label: image,
media_folder: people-summer-and-social-interns,
public_folder: media,
}
- { name: regImgAltText, label: Image Alt Text }
- {
name: funImg,
widget: image,
label: image,
media_folder: people-summer-and-social-interns,
public_folder: media,
required: false,
}
- {
name: funImgAltText,
widget: string,
label: Fun Image Alt Text,
required: false,
default: "This is required if you add a fun image",
}
- name: people-board-members
label: Team - Board Members
folder: src/cms/people-board-members
create: true
fields:
- { name: type, widget: hidden, default: "people-board-members" }
- { name: title, label: Name, widget: string }
- { name: role, label: Role, widget: string, required: false }
- { name: blurbLong, label: Full info on individual, widget: markdown }
- {
name: regImg,
widget: image,
label: image,
media_folder: "people-board-members",
public_folder: media,
}
- { name: regImgAltText, label: Image Alt Text }
- {
name: funImg,
widget: image,
label: image,
media_folder: "people-board-members",
public_folder: media,
required: false,
}
- {
name: funImgAltText,
widget: string,
label: Fun Image Alt Text,
required: false,
default: "This is required if you add a fun image",
}
- name: faqs
label: School Info - Frequently Asked Questions
folder: src/cms/faqs
fields:
- { name: type, widget: hidden, default: "faqs" }
- { name: title, widget: string, default: "FAQs" }
- name: faqList
label: FAQ
widget: list
fields:
- { name: question, label: Question, widget: string }
- { name: answer, label: Answer, widget: markdown }
- name: application-instructions
label: School Info - Application Instructions
folder: src/cms/application-instructions
fields:
- { name: type, widget: hidden, default: "application-instructions" }
- { name: title, widget: string, default: "Application Instructions" }
- { name: applicationText, label: Application Text, widget: string }
- { name: link, label: link, widget: string }
- name: family-and-student-handbook
label: School Info - Family & Student Handbook
folder: src/cms/family-and-student-handbook
fields:
- { name: type, widget: hidden, default: "family-and-student-handbook" }
- { name: title, widget: string, default: "Family and Student Handbook" }
- { name: text, label: Text and Link, widget: markdown }
- {
name: image,
label: Image,
widget: image,
media_folder: family-and-student-handbook,
public_folder: media,
}
- { name: imageAltText, label: Image Alt Text, widget: string }
- name: school-calendars
label: School Info - School Calendars
folder: src/cms/school-calendars
fields:
- { name: type, widget: hidden, default: "school-calendars" }
- { name: title, widget: string, default: "School Calendars" }
- { name: introText, label: Intro Text, widget: markdown }
- name: calendarList
label: Calendar List
widget: list
fields:
- { name: content, label: Text and Link, widget: markdown }
- name: family-tours
label: School Info - Family Tours
folder: src/cms/family-tours
fields:
- { name: type, widget: hidden, default: "family-tours" }
- { name: title, widget: string, default: "Family Tours" }
- { name: image, label: Image, widget: image, media_folder: family-tours, public_folder: media, }
- { name: imageAltText, label: Image Alt Text, widget: string }
- { name: introText, label: Intro Text, widget: markdown }
- name: tourList
label: Tour List
widget: list
fields:
- { name: content, label: Text and Link, widget: markdown }
- name: school-policies
label: School Info - School Policies
folder: src/cms/school-policies
fields:
- { name: type, widget: hidden, default: "school-policies" }
- { name: title, widget: string, default: "School Policies" }
- { name: introText, label: Intro Text, widget: markdown }
- name: policyList
label: Policy List
widget: list
fields:
- { name: text, label: Text, widget: string }
- { name: link, label: Link, widget: string }
- name: drills-log
label: School Info - Drills Log
folder: src/cms/drills-log
fields:
- { name: type, widget: hidden, default: "drills-log" }
- { name: title, widget: string, default: "Drills Log" }
- name: yearsList
label: Year Title
widget: list
fields:
- { name: years, label: Years, widget: string }
- name: drills
label: Drills
widget: list
fields:
- { name: typeOfDrill, label: Type of Drill, widget: string }
- { name: numRequired, label: Number Required, widget: string }
- { name: completed, label: Completed Status, widget: string }
- name: dates
label: Dates
widget: list
fields:
- { name: text, label: Date and Time, widget: string }
- name: arts-and-athletics
label: School Info - Arts and Athletics
folder: src/cms/arts-and-athletics
create: false
fields:
- { name: type, widget: hidden, default: "arts-and-athletics" }
- { name: title, widget: string, default: "Arts and Athletics" }
- { name: image1, label: Image, widget: image }
- { name: image1Alt, label: Image Alt Text, widget: string }
- { name: image2, label: Image, widget: image }
- { name: image2Alt, label: Image Alt Text, widget: string }
- { name: image3, label: Image, widget: image }
- { name: image3Alt, label: Image Alt Text, widget: string }
- { name: image4, label: Image, widget: image }
- { name: image4Alt, label: Image Alt Text, widget: string }
- { name: image5, label: Image, widget: image }
- { name: image5Alt, label: Image Alt Text, widget: string }
- { name: image6, label: Image, widget: image }
- { name: image6Alt, label: Image Alt Text, widget: string }
- { name: image7, label: Image, widget: image }
- { name: image7Alt, label: Image Alt Text, widget: string }
- { name: image8, label: Image, widget: image }
- { name: image8Alt, label: Image Alt Text, widget: string }
- { name: image9, label: Image, widget: image }
- { name: image9Alt, label: Image Alt Text, widget: string }
- name: 8th-grade-speeches
label: Blog - 8th Grade Speeches
folder: src/cms/8th-grade-speeches
create: true
fields:
- { name: type, widget: hidden, default: "8th-grade-speeches" }
- { name: date, label: date, widget: date }
- { name: title, label: title }
- { name: intro, label: intro, widget: markdown }
- { name: speech, label: speech, widget: markdown }
- {
name: image,
label: image,
widget: image,
media_folder: 8th-grade-speeches,
public_folder: media,
}
- { name: imageAlt, label: imageAltText }
- name: media-gallery
label: Blog - Media Gallery
folder: src/cms/media-gallery
create: true
fields:
- { name: type, widget: hidden, default: "media-gallery" }
- { name: title, label: News Article Title }
- { name: url, label: Link }
- { name: author, label: Author }
- { name: publication, label: Publication }
- { name: date, label: Date }
- {
name: image,
widget: image,
media_folder: media-gallery,
public_folder: media,
label: Image,
}
- { name: imageAltText, label: Image Alt Text }
- name: blog
label: Blog - The Blog itself
folder: src/cms/blog
create: true
fields:
- { name: type, widget: hidden, default: "blog" }
- { name: date, label: Date, widget: datetime }
- { name: title, label: Title }
- name: post
label: Post
widget: list
fields:
- {
label: Optional Image,
name: image,
widget: image,
media_folder: blog,
public_folder: media,
required: false,
}
- {
label: Image Alt Text,
name: imageAltText,
widget: string,
required: false,
}
- {
label: Text Body,
name: text,
widget: markdown,
default: "NO_TEXT",
}
- name: donation-rewards
label: Donate - Donation Rewards
folder: src/cms/donation-rewards
fields:
- { name: type, widget: hidden, default: "donation-rewards" }
- { name: title, widget: string, default: "Donation Rewards" }
- { name: visible, widget: boolean, default: false }
- name: donationRewardItem
label: Donation Reward Item
widget: list
fields:
- {
name: dollarAmount,
label: Donation Level in Dollars,
widget: string,
}
- { name: description, label: Description, widget: markdown }
- {
label: Gift(s) Image,
name: image,
widget: image,
media_folder: "donation-rewards",
public_folder: media,
}
- {
label: Gift(s) Image Alt Text,
name: imageAltText,
widget: string,
}
- name: we-also-need-list
label: Donate - We Also Need
folder: src/cms/we-also-need-list
fields:
- { name: type, widget: hidden, default: "we-also-need-list" }
- { name: title, widget: string, default: "We Also Need (list)" }
- name: weAlsoNeedItem
label: Item
widget: list
fields:
- { name: itemNeeded, label: Item Needed, widget: string }
- {
name: specialNote,
label: Special Note,
widget: markdown,
required: false,
}
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (4 by maintainers)
Top GitHub Comments
In short, I was trying to view nested directories in the global media folder.
Everything in the issue was an attempt to get that result, so if that isn’t possible this issue becomes more of a feature request than anything. If that’s not a feasible feature request, then I need to rewrite how my website handles images.
Re: “admin panel”, I was calling the CMS the admin panel because that’s the way my client refers to it, sorry for the confusion.
Thanks for clarifying, we have an ongoing PR https://github.com/netlify/netlify-cms/pull/4670 for showing nested directories in the media folder.
I still need to follow up on it as it’s missing support for other backends (only supports GitHub) and also CI is failing for it.