Build a Product Landing Page - To Logo or Not to Logo

[pythonsparrow]

Tell us what’s happening:

I previously tried imgbb and found that it only worked temporarily and in my experience it was not a viable long-term solution for hosting a logo image.

As a result, I followed the suggestion from @richRocksCodeBlocks and the instructions at https://www.labnol.org/internet/free-file-hosting-github/29092/ to host my logo image URL using GitHub.

• If I add “?raw=true” to the logo image URL, then the logo image displays correctly but the rest of the Product Landing Page info does not display

• If I don’t add “?raw=true” to the logo image URL, then the rest of the Product Landing Page info displays correctly, but then the logo image does not display

• If I replace the logo image URL with the “Original Trombones” logo image URL, then both the logo and the Product Landing Page info display correctly

May I please ask what steps or workaround do I need to implement in order to get both the logo image and the Product Landing Page info to display correctly?

Note: If neither the logo nor the Product Landing Page info are displayed correctly, then the Test Suite still shows all “Tests Passed”. I’d prefer to resolve the issue and have a working Product Landing page, rather than circumventing it.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

freeCodeCamp.org

[jwilkins.oboe]

Hi @pythonsparrow!

When I did my project, I didn’t make a custom logo.
I just grabbed an image online and threw it with the other nav links.
And then resized that image in css.

[pythonsparrow]

Hi @jwilkins.oboe! I appreciate the suggestion. If I can’t find a way to get the custom logo to work, then I may have to do it that way as well. Thank you for responding to my post!

[pythonsparrow]

I am still researching this issue.

• I tried postimages. org as a workaround but I am still having the same issue

• I’m also in the process of reviewing Known Issues With Codepen to identify known issues and possible solutions

[pythonsparrow]

Known Issues With Codepen states:

“If you add GitHub link of your file to your settings in Codepen, or to your html/css it will not work out of box.”

The workaround provided is no longer valid because the rawgit.com website was sun-setted in 2018.

[pythonsparrow]

I found the following response to this post helpful:

Where do I put an image for my pen?

That’s the URL for the location in the repo. The actual URL for the image you want to use is: https://raw.githubusercontent.com/tnmorgen/images/master/logo-1.jpg You want to right-click the image and “Copy Image Address” for future reference.

The logo image is now hosted on GitHub and now displays in CodePen correctly; however, I’m still experiencing the same issue I was before:

@pythonsparrow

the logo image displays correctly but the rest of the Product Landing Page info does not display

Unless I can resolve this issue or find a workaround, then my best option may be to put the Product Landing Page on hold.

A potential workaround, based upon the suggestion below is to work in directly in GitHub instead of CodePen:

Personal Portfolio Page, Projects Img Issue

I ran into a lot of issues with personal images as well in my portfolio page through codepen. Github is the way to go in my opinion. I’m not sure what you mean when you say, “the original gets the images from a GitHub cloud.” When I was working through this project with codepen, I uploaded all my website images to a GitHub repository. The links worked for me then. An added bonus to doing it this way, is you can then migrate your codepen project to GitHub in the future.

My understanding is that the workaround of working in GitHub instead of CodePen may:

1. Avoid the Known Issues With Codepen with adding GitHub links

2. Mitigate the risk of having image hosting issues on future projects in CodePen

3. Mitigate the risk of having future issues with transferring projects from CodePen to GitHub

If working in GitHub resolves this issue, then I will follow up to update this post with the resolution.

[pythonsparrow]

I logged in after an additional 5 days with no resolution and now both the logo image and the rest of the Product Landing Page are now displaying correctly.

After some additional research and a last ditch attempt at troubleshooting, I did attempt to copy and paste at the top of the HTML window below the Testing Suite script and then I received an error from codepen.io stating “Just HTML that goes in the goes here.” I deleted the and when I scrolled down , both the logo image and the the Product Landing Page were both displayed correctly. Previously, if the logo image displayed correctly, then the page did not scroll down and the Product Landing Page did not display correctly.

I could attempt a guess but it’s still not clear what really caused this issue or what changed in order to resolve it. Perhaps I copied and pasted over something that was previously copied and pasted at the top of the HTML window that was not visible in codepen.io or something didn’t get updated in codepen.io correctly until I copied, pasted and deleted something.

Whatever the issue was, it wasn’t getting picked up by the Test Suite script. Either way, I ended up spending a lot of time researching and troubleshooting this issue with not much to show for it. I wish I could say it was time well-spent but I can’t duplicate the issue or the resolution. I also can’t pin-point what caused it or what I learned from it other than repeated trial and error and waiting and trying again.

FYI, I started down the path of migrating the codepen.io projects to GitHub but I didn’t complete the migration process, so I can’t speak to whether or not that would have resolved the issue or not. Starting down the GitHub path was helpful but researching GitHub was also time consuming. GitHub has its own learning curve, so migrating the project to GitHub it would not have been a quick or easy workaround.

Creating a repository and hosting the logo image on GitHub was relatively straight-forward and did resolve the initial image hosting issues but locating the logo image URL on GitHub to include in the HTML after it was hosted there was not.

Root cause: Unknown
Resolution: Unknown
Time to resolve: Approximately 2 weeks

[pythonsparrow]

In order to reproduce the error message above, I did duplicate the issue of the logo image not displaying and the resolution by copying and pasting a line of HTML below the Testing Suite script and then deleting it.

The root cause of the issue causing the logo image not to display is unknown. I suspect the issue may have been introduced by either copying and pasting the Testing Suite script itself and whatever was in the background causing the issue into codepen.io, but I have no way of confirming this. All I know is that copying and pasting HTML directly into Line 2 below the Testing Suite on Line 1 and then deleting it, appeared to overwrite and delete whatever was causing the logo image not to display.

I hope these posts can assist someone else who experiences this issue. My limited understanding is that code in general can be temperamental, let alone HTML with something else running in the background.

I think the lesson here is that you can’t always see everything you are copying and pasting, so don’t blindly copy and paste something unless you completely trust the source.