How to link the image used for tribute page on my desktop

I am also working on the Tribute page. However, since we are using CodePen to run the test, how do I link the image I used on my desktop?

You’ll need to upload your image somewhere online. Some ideas are GitHub, Dropbox, Drive etc.
Codepen also allows you to host images with their Pro version, but it’s not necessary whatsoever.

Once your image is hosted online, simply href to the hosted image.

11 Likes

I’ve been wondering about this for the last week. :sweat_smile: Based on Matthew’s advice, I’ve finally got it! Not sure I’m set up with best practice for the long haul though, so may have to tweak.
These helped:

9 Likes

hey, i would recommend using these image upload sites:

give them a try :+1:

1 Like

Hello Virginia,
I uploaded my images on codepen inside assets and in the at src attribute you’ll take url given by codepen, not yours.

2 Likes

Any ideas for long-term hosting of our code camp projects? I’m trying to work out whether it’s easier to upload images to github or some place else. Also if I need to save my HTML & CSS codepen components in files and create new github repos for each to host my projects (or something else!)

Also, anyone have thoughts on if images are hosted on wikipedia, is it still bad form to link to them rather than host yourself?

never thought of wiki commons as a place to host images, but I suppose if they are of general interest (as are the wikipedia articles) like those in the tribute page, it’d be like killing two birds with one stone, imh

as for github, I opted for a general “learning” repo to stuff my files in, but I never really deployed any of my initial HTML/CSS projects. So maybe having a repo for each is the best idea, as github will allow you to make your projects publicly available with an .io URL. This is just my personal experience, I’m just sharing, hope it helps you decide =]

1 Like

I just uploaded my tribute page project and used the quick hack for the images. This was really helpful! Thanks for sharing!

1 Like

Hi Matthew,
I followed your direction, upload the image to my dropbox, but it did not work in CodePen.
Then I just redid it on my local desktop and upload to my web host. The image loaded but another problem happened. The H1 title should be the google typeface “Glory”. I import it in CSS file, but it didn’t work. Could any one help to figure out what is the problem? Here is the link:
https://vdesign2.com/TributePage_JudyChicago/

I tried looking up your source code and for me only the print and screen stylesheets are linked. If I’m not mistaken, Google Fonts requires you to use a locally host URL or to Google’s URL. For Glory, if you visit this page and select “select this style”, Google gives you the link code on a bar to the right.
Hope this helps =]