Hi all, I am hoping someone can help me out with a NetlifyCMS site I inherited support for. The issue is as follows:
When new images are uploaded to the media assets via the /admin then embedded into a page the image shows up as not found, see video here. The reason this is happening is because the copied path doesn’t seem to work for the files ex “public/assets/images/ashrae_221_calculator.xlsx” however if I remove the public folder ie “/assets/images/ashrae_221_calculator.xlsx” this will work. Here is the folder structure of the project.
The config.yml under the /admin has the following settings:
media_folder: “public/assets/images”
public_folder: “/assets/images”
I am wondering how I can tell netlify either that a. get the image path that includes the public folder to work or b. tell Netlify that the urls of media items should start with assets and not public. Please let me know if additional info is needed to troubleshoot and thanks in advance for the help!
Note that Next.js serve static files, like images, under the folder called public in the root directory.
Files inside public can then be referenced by your code starting from the base URL (/).
For example, if you add an image to public/example.png, the path to the image will be /example.png
Therefore an example of an absolute url will be http://your_domain/example.png
In your case images can be assessed by the path /assets/images/example.png
You don’t need to add the public path.
Hi I appreciate your suggestion but unfortunately that doesn’t help the non technical users of the site, ideally i would need to allow them to copy the correct path from the button.
Hello @EricWaight , thanks for your response. The limitation to what you want to achieve is a Next.js limitation due to the way Next.js handles static assets. The Copy Path button in the Media Assets library copies the absolute path and not the path after build.
Based on what you want to achieve an alternative solution in my opinion will be to add description hint to your Description widget (field) for the non technical users. Another option will be to add a regex pattern to validate the content and then show an error message when the non technical users add the URL containing the public text.
hint: optionally add helper text directly below a widget. Useful for including instructions. Accepts markdown for bold, italic, strikethrough, and links.
pattern: add field validation by specifying a list with a regex pattern and an error message; more extensive validation can be achieved with custom widgets
You can add the custom widget options pattern or hint. For the hint option you can specify an instruction with an example for the non technical users to remove the public text from the URL they want to add.
Below is an example of how you can configure your description field in your config.yml file to include a hint.
label: "Description"
name: "description"
widget: "text"
hint: "When adding URL's or Links, kindly remove the public text from the URL. E.g domain.com/public/assets/image1.png ---> domain.com/assets/image1.png"
For more information about custom widget options kindly visit the link below.
Hope the suggested solution will be sufficient. Thanks.
