Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Images with media_folder prop do not appear on the cms #5525

Closed
cyono opened this issue Jun 22, 2021 · 6 comments
Closed

Images with media_folder prop do not appear on the cms #5525

cyono opened this issue Jun 22, 2021 · 6 comments
Labels
type: bug code to address defects in shipped code

Comments

@cyono
Copy link

cyono commented Jun 22, 2021

I 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

  1. Create an image widget with a media_folder property
  2. Place an image under your public_folder/widget_specific_media_folder
  3. Query for and render that image with a relativeDirectory prop
  4. Try to modify that image from the admin panel
  5. 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

Screen Shot 2021-06-22 at 12 42 23 AM

Screen Shot 2021-06-22 at 12 26 34 AM

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,
        }
@cyono cyono added the type: bug code to address defects in shipped code label Jun 22, 2021
@erezrokah
Copy link
Contributor

Hi @cyono, per the docs, field level media_folder are relative to the collection folder.
If you'd like to save images in the global media_folder you should do something like:

- {
    name: missionHero,
    label: Mission and Core Ideology Hero Image,
    widget: image,
    media_folder: '/{{media_folder}}/other-images',
    public_folder: '/{{public_folder}}/media',
 }

Can you try that?

@erezrokah
Copy link
Contributor

@cyono
Copy link
Author

cyono commented Jun 22, 2021

Thank you for the insight @erezrokah! Sadly, passing the media and public folder doesn't seem to have an impact on the cms media pop-up.

Since I am using a relative query in the first place the media_folder isn't as important to this problem, I don't think.

Specifying public_folder specification doesn't seem to help either, though. When I remove the public_folder prop, all of the images are placed into /public/uploads/ in their specific subfolders, as I would expect. When I have the prop as /{{public_folder}}/media, the images are still all under /public/uploads/ in their specific subfolders after a build.

I admit this problem could be caused by ignorance in my design. The project expects plenty of picture updates in the future, so I am trying to implement a design that enables those changes from the CMS while keeping build times low. My stack uses React hooks and useStaticQuery for my graphql queries. useStaticQuery can only be called once in a component and can't rely on dynamic variables, so I'm querying allFile with subfolders to keep the query and in-memory footprint low. If this is the wrong approach, then my issue would become irrelevant in light of a better implementation. I hope. Otherwise, I can keep banging my head against this problem :D

@erezrokah
Copy link
Contributor

Specifying public_folder specification doesn't seem to help either, though. When I remove the public_folder prop, all of the images are placed into /public/uploads/ in their specific subfolders, as I would expect. When I have the prop as /{{public_folder}}/media, the images are still all under /public/uploads/ in their specific subfolders after a build.

public_folder only impacts how paths are written in the markdown file, and not the location of files on in the repo, so that makes sense.

Can you clarify what you mean by admin panel? I feel like I'm missing something here.

Please note that the global media folder (when you open it not from the editor widgets) doesn't list nested directories.

With that said, can you describe the repo structure you would like to have and where images should be saved per entry/field?

@cyono
Copy link
Author

cyono commented Jun 24, 2021

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.

@cyono cyono closed this as completed Jun 27, 2021
@erezrokah
Copy link
Contributor

Thanks for clarifying, we have an ongoing PR #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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug code to address defects in shipped code
Projects
None yet
Development

No branches or pull requests

2 participants