Codepen image hosting/portfolio project help

1

Hello FCC!

I’ve been working on the personal portfolio project (Portfolio). I’m stuck on trying to get a thumbnail image for the background on the projects. Codepen.io doesn’t have any image hosting unless you pay for pro, is there any way to get a thumbnail of the screenshot without having to upload an image on another website and link it?

Thank you!

2 Likes
2

Hi Nick,

The way I look at it is a bit different. I have a first try Portofolio but the images I use are from the web. For the thumbnails I haven’t used anything else but placeholders for now. If you have the projects on codepen you could link to them in the Portofolio thumbnail and have an image displayed.

Good luck

John

3

Many people use Dropbox.

4

Same problem here. Please post if you find a solution!

5

Dropbox, Google Drive, and Onedrive all can host images for small websites, blogs, etc. I’ve used Onedrive without issue.

2 Likes
6

You can signup for S3 on Amazon or Cloudinary (free tier) if you plan on using little traffic and storage for your images:

Another solution is to upload them to Imageshack or Github pages.

6 Likes
7

+1 for Cloudinary. It’s more than enough for our little projects. I use Cloudinary too.

2 Likes
8

Or just link the images direct from where they are now giving credits to their owners I guess … Simpler and doesn’t involve anything storage wise

9

Well ya my whole problem was not linking images where they are but using images that aren’t already hosted somewhere.

10

Cloudinary seems like the place for me as well. I just signed up for the service - not bad at all for small projects it can do some pretty amazing manipulations.

1 Like
11

I’ve been using a github repo files for my codepens by using the raw link.
For instance in this pen http://codepen.io/HyperSprite/pen/NNYPOo

I used this link for the jumbotron image (see CSS code) “https://raw.githubusercontent.com/HyperSprite/dcit/master/public/img/jumbotron_bg.png”

You can find it here in the repo here: “https://github.com/HyperSprite/dcit/blob/master/public/img/jumbotron_bg.png”

There used to be a Raw link on the asset page but that seems to have been removed but if you swap the first part of the url from “https://github.com/” to “https://raw.githubusercontent.com/” it should work fine.

4 Likes
12

You could try to use base64 data URIs.

See:

http://dataurl.net/#dataurlmaker

Usage:

<img src="data:image/gif;base64,R0lGOD...ADs=" />

1 Like
13

@HyperSprite I followed your directions and my image is still not displaying. I believe I placed my image element to mimic yours and still unsuccessful. Any ideas?

HTML
<div class="img"></div>

CSS
.img {
background-image: url (“https://raw.githubusercontent.com/hello-world/james-baldwin-10_680-1389727054.jpg”);
}

Any assistance would be appreciated. Thanks

14

You seem to be missing the full path to your image.
raw.githubusercontent.com/ (username)/(repo)/(branch)/(maybe a folder)/ hello-world/james-baldwin-10_680-1389727054.jpg
Also, to test, you can put the link in your browser address bar.
Looking at my example: “https://raw.githubusercontent.com/HyperSprite/dcit/master/public/img/jumbotron_bg.png”

GIthub raw server address:
https://raw.githubusercontent.com/
User_dir:
HyperSprite/
Repo_dir:
dcit/
Branch:
master/
Folders (2)
public/img/
Filename
jumbotron_bg.png

I hope that clears things up.

1 Like
15

Thanks, I see where I went wrong with the URL. I’ve corrected the full path issue and tested the link and it opens up in a browser. However, I still can’t get it to display in Codepen. I even plugged your link URL in my code and it also will not display. There may be an issue with my codepen setup or code. I will continue to research.

16

I use a Wordpress blog.

17

Thanks for sharing! I just used the Onedrive that my university provides and it worked just fine

Cheers!

2 Likes
18

CLOUDINARY worked for me like a charm! Thanks for the tip guys! Hadn’t heard of it before! :slight_smile:

4 Likes
19

PostImage is really good too :slight_smile:

2 Likes
20

Don’t direct link to someone else’s images, especially if it’s a portfolio piece. Some people view it as bandwidth theft, and the image host can potentially do malicious things to your project by updating the linked-to image file in ways one could view as either creative or malfeasant. See http://www.deuceofclubs.com/switcheroo/index.html.

2 Likes