loading...
Cover image for A quick hack to using local images on Codepen

A quick hack to using local images on Codepen

ljcdev profile image ljc-dev ・3 min read

Codepen is one of the most convenient online code editor, working smoothly on mobile unlike most of its peers.

But handling files is a paid feature which makes it impossible for free users to add local images and reference them from css and html.

To go around this, you can host your local images on Github pages and use them in your codepen following this small 4 steps tutorial.

 

Update: @pav1an found a much better way of doing this. Jump to the end of this post for a one step hack!😀

Jump to hack!

Step 1: create a github repository.

 

creating a github repository

 

  • Click on the plus icon on the top right and choose New repository.

 

choosing a github repository name

 

  • Give it a name and leave the other options to default. Then scroll down and click on Create repository.

 

Step 2: Upload an image to the new repository.

 

 click on upload an image

 

  • Click on uploading an existing file.

 

 upload an image

 

  • Either drag files from your PC or click on choose your files to upload.

 

Step 3: Host your repository with Github Pages.

 

 go to settings

As you can see, lips.jpg has been added to the github repository.

  • Click on Settings.

 

 update source to github pages

 

  • Scroll to github pages and change the source from none to master branch.

 

 get the link to github pages

 

The page will reload, and on scrolling back down, you'll find the newly created link.

  • Click on the link to go to your Github Pages.

 

 get the link to github pages

 

Obviously, the page returns an error not found because we haven't set a home page.

 

 get the link to github pages

 

  • Add a slash / at the end of your live Github Pages link (if there isn't one) and paste the name of your file. In this case /lips.jpg

If the images shows up, your image has been successfully hosted on Github Pages.

 

Step 4: Use the uploaded image in your codepen.

 

  • Copy the previous link and replace the local image src in your codepen. For example replace:

<img src="lips.jpg" alt="lips">

with:

<img src="https://ljc-dev.github.io/images-repo/lips.jpg" alt="lips">

 

And tada!!! 🎉🎉🎉

 

Tips:

 

  • Be careful not to use the github repository link, but the Github Pages link.

  • The next time you want to upload an image, click on Add files in the home of your repository and Upload files.

  • There should now be an Environment section in the home of your repository with github pages, click on it and you'll open a page with the logs of your deployments. Clicking on View deployment opens your Github Pages.

  • If you don't want to add it to the root of your repository but inside a directory, either drag the folder with the image(s) into the upload window if you are on a PC or follow this stackoverflow solution to adding folders.

  • If you are more familiar with git commands, you can also just clone the repository to your PC and add the images where you want. Then use git add, git commit and git push to update the remote version. 😉

 

Update:

 

@pav1an has suggested a great one step trick to make github host the images.🔥🔥🔥

 

Alt Text

 

  • Go to the homepage of one of your repositories or create one.

  • Click on the issues button.

  • Instead of writing an issue report, drag an image to the issue box. Github will save the image as a png file and show a link like this:

![github1](https://user-images.githubusercontent.com/62596124/85923922-b6858e80-b897-11ea-9b77-469fbfdda7e4.png)

  • Copy the link part that starts with https and ends with png.

  • Replace the local image src in your codepen. For example replace:

<img src="lips.jpg" alt="lips">

with:

<img src="https://user-images.githubusercontent.com/62596124/85923922-b6858e80-b897-11ea-9b77-469fbfdda7e4.png" alt="lips">

 

Thanks for reading!!! 😀🙏

Posted on by:

Discussion

markdown guide
 

Great tip! I was actually just wondering how to add pictures into my pens without paying, so it's perfect timing for me. :)

 

Awesome!! Thanks for reading. 😀

 

Hey, congrats on your first Dev.to article! Taught me something! Awesome, keep up the good work. Cheers!

 

Thanks Kelvin!! 😊