Skip to content

We should warn campers that Imgur links do not work with CodePen. #5677

Open
WaveFunctionP opened this Issue · 13 comments

8 participants

@WaveFunctionP

https://www.reddit.com/r/FreeCodeCamp/comments/3ywy64/codepen_not_showing_my_page_properly/

I could see a camper being very frustrated with this since it is a silent failure. A new coder could believe that they did something wrong even though the code is technically correct.

A simple note that imgur or other image sites may not allow images to be served on to other sites and to perhaps provide a known good image hosting solution as an example. Preferably one that FCC has cleared with that site, since we are talking about a fairly large user base that will be fetching images often.

I am particularly thinking of the portfolio zipline, which uses images heavily and is the first zipline.

@ltegman
Free Code Camp member

I do think recommending a workable image provider would be a good option for FCC. I'd personally learn towards dropbox since AFAIK it doesn't violate their TOS to use them as a CDN and unless you get a lot of hits they won't cap you.

@ltegman ltegman added the Discussing label
@ShaggyTech

What about recommending github to host the images? I also know that photobucket works as that is what I used until I migrated everything over to github.

@WaveFunctionP

AFAIK, Github doesn't have an easy solution to upload images.

@WaveFunctionP

Do we want to teach non-standard methods for asset management? There are all sorts of crazy methods to host files that come up from a google search. That is why I didn't mention it. I believe we'd be better off teaching them to upload images to their repo with git over "hacks" like that IMO.

I've spent a little while investigating various web drive providers and all of their share links are links to the drive view of the file. You can right click the image and use that link for dropbox, but that isn't very obvious. And you have to deal with permissions. I think that there are too many steps in that process.

Photobucket was relatively simple to use, as easy as imgur at least. IMHO. :)

@noinkling

The asset hosting issue is kind of a big deal in general for the Ziplines, I'd say there definitely needs to be more guidance/recommendations on where to store things (for free, where hotlinking won't be an issue).

Imgur worked fine originally but obviously that changed, so there's always the chance of that happening again with any similar services. With Dropbox it's not obvious how to get a working direct URL for files, and even then they would load inconsistently for me in my pens, I'm not sure if others using Dropbox have had that issue.

A GitHub repo for Zipline assets works well for me, but as already alluded to, that necessitates knowledge of how to create a repo and push it (it's something people should/will learn anyway, but it may be too early to introduce it with the first Ziplines).

Personally, I combine the GitHub approach with the https://rawgit.com/ CDN service instead of linking directly to the raw url. To be honest I'm not sure if RawGit is really intended for serving largish files like images, but considering how low the traffic is likely to be I don't think it's a big deal. It might be worth asking the guy who runs it. The other caveat is that if you use the production URL on RawGit, it needs to have a specific tag or commit hash in it if there's a possibility of the asset changing:

It's best to use a specific tag or commit hash in the URL (not a branch). Files are cached permanently after the first request.

So something like:

https://cdn.rawgit.com/username/asset_repo/ae8a698b5159d76187e911d5b26481dea91e347c/image.jpg

rather than:

https://cdn.rawgit.com/username/asset_repo/master/image.jpg

I think ideally everyone would just transfer their pens over to Github Pages, if you're already knowledgeable enough to create a repo with assets, it's only another small step to get the whole page up on Github. This is something everyone should be doing with their main portfolio page at the very least anyway, leaving it on Codepen is really not a great idea. This link tells you how you can directly get the raw files from a pen which simplifies transfers a lot.

@prashcr

I like the GitHub Pages idea.

There are even easier to use services out there, such as https://surge.sh

@Alhadis

Right, this is pathetic. It's ridiculous for a site that encourages worthless shitposting to block images for web-based projects. This is also frustrating when all you're trying to do is show off a demo and you need something less permanent than GitHub pages, and something more stable than shaky CDN links which, for all we know, might be changed or purged after a while.

@Alhadis Alhadis referenced this issue in CodePen/CodePen-Bug-Reporting-Only
Closed

Embedded images not loading in full-view #63

@ltegman
Free Code Camp member

Imgur is a free service. They don't owe it to anyone to be a free CDN for images.

@Alhadis

Be that as it may, when you stop and have a good hard look at what they encourage and what they forbid, you can't help but applaud the sheer inverted logic of the situation.

@WaveFunctionP

Respectfully, imgur's motivations aren't all that relevant to this discussion.

I personally think that github pages are the best solution and can serve as an introduction to git at the same time, which is a skill that campers should learn anyway.

@WaveFunctionP

Github now allows uploading directly on the web interface now, which should make the github pages method easier to teach.

https://help.github.com/articles/adding-a-file-to-a-repository/

@natalka01

I was having this issue on my first pen, the tribute page; ended up using something I've used before but they only have a one-month free option: https://imageshack.com, which I didn't realize when I signed up.
Also by searching around someone else suggested: http://cloudinary.com/ which is unlimited free - which talks about being a CDN for devs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.