search

marinebon / www_marinebon2

MBON Website 2021 Rebuild in progress
https://marinebon2.netlify.app/
MIT License
1 stars 1 forks source link

Issue adding images #10

Closed torieketcham closed 3 years ago

torieketcham commented 3 years ago

I'm trying to add an image to the homepage via a blank widget which I've called "Intro-image". It doesn't show up on the site, even though you can see it here Is there something I am missing?

7yl4r commented 3 years ago

Hmm. Hard to see what is going on here.

The files seem to be in the correct place, and the widget is showing up on the page:

image

The problem is that the image is not found at the address it is expected (https://marinebon2.netlify.app/static/media/mbon_goos_framework.png). The image is actually being served at https://marinebon2.netlify.app/media/mbon_goos_framework.png. I'm not sure why the /static/ is getting removed. For some reason the CMS is assuming one url when uploading the image and another url when looking for it. I don't see anything in the .toml files to explain this.

Need to do some more looking.

7yl4r commented 3 years ago

Looking at this again now.

It looks like the relevant config options for the netlify CMS should be in /admin/config.yml (config options docs). We don't have that file in this repo. We don't even have an /admin/ dir. The values must be inheriting from the academic template, the wowchemy base code, or else defaults are being used by hugo. I think we can create a /admin/config.yml in this repo to override those settings but I want to find where the issue stems from first.

7yl4r commented 3 years ago

Created a new homepage widget to reproduce the error with new config.yml in place. Exact same result, as expected.

I am still not understanding what is happening here. Images are going into static/media but I think /admin/config.yml says they should go to /static/media - that directory DNE. The change to /admin/config.yml might not have any affect at all - in fact I think it would be throwing errors if it were being used b/c of the handlebars ({{ }}) in there.

7yl4r commented 3 years ago

The only relevant search result from the academic template for static is this section of init_kickstart.sh. I don't know how that file gets used; a search for init_kickstart returned no results.

7yl4r commented 3 years ago

did another test of adding an image widget. The issue persists.

I need to revisit and dig deeper into where the netlify config is coming from. The /admin/config.yml file is being ignored and that is unexpected.

@bbest : have you used wowchemy/netlify for another site? I am having a lot of trouble setting netlify's configuration options and I don't understand where the netlify configuration options are coming from for this repository.

7yl4r commented 3 years ago

@bbest and I debugging more now:

Gonna take a break from this then come back. Tentative plan for moving forward is to find a workaround for getting images onto the homepage - possibly without using the widgets.

bbest commented 3 years ago

Since migrating all static/media instances to assets/media, the /admin interface will properly upload imagery into /assets/media/ and browse for selection there, but creating a new homepage entry image requires manually stripping off the excess prefix:

FAIL

image: /assets/media/mbon_goos_framework.png

SUCCESS

image: mbon_goos_framework.png

For instance, see difference in commit https://github.com/marinebon/www_marinebon2/commit/676b48dac5dd6601f94a328e9572ac75f61d7802.

bbest commented 3 years ago

Here's a bit more background.

If the image path isn't set right, the problems show up in the Netlify Deplyoys (https://app.netlify.com/sites/marinebon2/deploys) like so:

4:20:00 PM: ────────────────────────────────────────────────────────────────
4:20:00 PM:   1. build.command from netlify.toml                            
4:20:00 PM: ────────────────────────────────────────────────────────────────
4:20:00 PM: ​
4:20:00 PM: $ hugo --gc --minify -b $URL
4:20:02 PM: hugo: collected modules in 1735 ms
4:20:02 PM: Start building sites …
4:20:03 PM: ERROR 2021/05/03 23:20:02 Couldn't find `/static/media/intro_image_test2.png` in the `assets/media/` folder - please add it.
ERROR 2021/05/03 23:20:03 Couldn't find `/static/media/intro_image_test3.png` in the `assets/media/` folder - please add it.
ERROR 2021/05/03 23:20:03 Couldn't find `https://marinebon2.netlify.app/media/intro_image_test2.png` in the `assets/media/` folder - please add it.

References

7yl4r commented 3 years ago

@torieketcham : Take a look at the images added to the homepage. The full-width one that scrolls weirdly is the default behavior of the widget as you were trying to use it. If we want that behavior we can make it happen but I think your intention was probably different for this image.

I just added a section for the image in a different way and I think it better matches your intention. I think adding th

  1. add an image
    1. "media" (top left)
    2. upload
  2. create new homepage widget section
    1. "contents" (top left)
    2. "new homepage"
    3. "body" (at bottom)
    4. "+"
    5. "image"
    6. "choose image"
    7. flip switch from "rich text" to "markdown"
    8. modify the url in the markdown image tag from ![](/assets/media/mbon_goos_framework.png) to ![](https://marinebon2.netlify.app/media/mbon_goos_framework.png)
    9. ⚠️ ...uh oh. Things still don't work. The url isn't valid for some reason. Why does https://marinebon2.netlify.app/media/intro_image_test4-bb.png work but https://marinebon2.netlify.app/assets/media/mbon_goos_framework.png does not? Weird.

...So I guess this doesn't work right now.

torieketcham commented 3 years ago

Hi @7yl4r - yes, I was going to ask you both about removing that parallax effect on the image. I had tried moving the image to the body section too, with no luck.

bbest commented 3 years ago

Hey @7yl4r,

Unfortunately this commit ∆ test label in netlify cms · marinebon/www_marinebon3@ff672f4 and visiting marinebon3.netlify.app/admin demonstrated that copying from wowchemy/wowchemy-hugo-modules: data/wowchemy_cms_tpl.yaml into admin/config.yml does not allow us to tweak the Netlify CMS interface to fix this issue.

Other possibilities:

torieketcham commented 3 years ago

@bbest @7yl4r just checking back in with this. Can you let me know how I should be adding images for the homepage (and subpages) - or are we still working through the issue?

7yl4r commented 3 years ago

We are still working on this. I am feeling stuck on it. @bbest : do you have more ideas?

torieketcham commented 3 years ago

Do you think I should continue to work on other aspects of the site (right now I am adding publications, which have their own minor challenges, although they don't seem to be insurmountable)? I'm just wary of expending a lot of effort if our determination is that we should move forward with a different solution.

7yl4r commented 3 years ago

No matter what solution we choose I am certain it will work with markdown formatted documents. Any effort spent creating markdown documents will not be wasted.

7yl4r commented 3 years ago

It's fixed.

I don't exactly know how but part of our issue was putting the CMS config at /admin/config.yml but it should have been at /content/admin/config.yml.

Let's leave this issue open until we finish ironing this out and cleaning up our testing messes.

  1. [ ] figure out how to insert images with better formatting (try inserting images in the text box?)
  2. [ ] delete test images
  3. [ ] delete test "Homepage" widgets
  4. [ ] read through new /content/admin/config.yml to be sure all is as it should be (rm -TEST stuff I added)
  5. [ ] determine the fate of marinebon/www_marinebon3
  6. [ ] read through commit history to check for any other tmp debug things we changed
torieketcham commented 3 years ago

Does this mean that adding new images to the /assets/media folder (for example arms_mbon.png) will work? I tried to do so on a news article but without success.

7yl4r commented 3 years ago

Does this mean that adding new images to the /assets/media folder (for example arms_mbon.png) will work? I tried to do so on a news article but without success.

You are talking about https://marinebon2.netlify.app/post/arms-mbon-a-new-network-for-genetic-monitoring-and-early-detection-of-non-indigenous-marine-species/ ? It looks like the image is working as expected.

There may be better ways to organize the placement of images. Maybe folders within /assets/media? Maybe images can also go in /content/post/* folders? I do not know what might works or makes most sense for this.

torieketcham commented 3 years ago

I solved the problem on that page by uploading the image directly within the Netlify interface rather than trying to link to an existing image URL. It looks like it's set up so that images for a given section (posts, products etc) will go in that particular folder.

torieketcham commented 3 years ago

As a follow-on to this, I attempted to add an image to this page, both with markdown and using the prose.io interface, and nothing is showing up. So I am not sure how to make this work.

torieketcham commented 3 years ago

I'm bypassing Wowchemy templates completely and just using a blank widget with markup for the intro on the homepage, but still running into trouble with images. Any way you could take another look at this?

7yl4r commented 3 years ago

I just posted a discussion to the wowchemy folks here. Hopefully some fresh eyes on the problem will help because this seemingly simple problem has fried my brain.

7yl4r commented 3 years ago

Here is a possible workaround:

  1. manually upload images into /static/ so they are served without hugo checking urls (ref).
  2. link to the images in markdown as ![my image alt text](/static/img/post2/whatever.png).
torieketcham commented 3 years ago

Interestingly, while your above recommendation does not appear to work, the image is now showing up as mbon_goos_framework.png (i.e. without anything else in the image path), which it was not doing until just now (I've had it up there for several days and it was displaying as a broken link).

torieketcham commented 3 years ago

As additional context:

https://marinebon2.netlify.app/static/img/post2/mbon_goos_framework.png - does not work

https://marinebon2.netlify.app/assets/media/mbon_goos_framework.png - does not work

https://marinebon2.netlify.app/mbon_goos_framework.png - now works (but didn't before?)

7yl4r commented 3 years ago

Okay. Some small surprises here but we can work with it:

https://marinebon2.netlify.app/static/img/post2/mbon_goos_framework.png - does not work

This would work if the image was moved into a directory /static/static/img/post2/.

https://marinebon2.netlify.app/assets/media/mbon_goos_framework.png - does not work

This is the one that should work using the media_folder but isn't.

https://marinebon2.netlify.app/mbon_goos_framework.png - now works (but didn't before?)

This means stuff in /static/ get put onto the domain directly.

Here is what I think we should do (assuming it will work):

  1. create directory /static/media_content/
  2. create directories inside /static/media_content/ as needed to match /content/ subdirectories
  3. put images in /static/ location corresponding to the page using them in /content/
  4. link to the images using raw markdown like ![alt txt](/media_content/{img_path}.png)

Example for mbon_goos_framework.png on the homepage.

  1. create directory /static/media_content/home/ to match /content/home/
  2. upload file intro-image_mbon_goos_framework.png into /static/media_content/home/ (NOTE: I prefixed the filename with the name of the .md using it)
  3. edit intro-image.md to use the image like ![mbon goos framework](/media_content/home/intro-image_mbon_goos_framework.png)

Thoughts?

torieketcham commented 3 years ago

That works! I've added an image here as well, using your recommendation, and it's showing up too.

7yl4r commented 3 years ago

Seems like we have figured out a workable workflow for this so I will close in spite of us being unable to make things work as they should.