Update Image - README, See random image on your GitHub Profile README
Tags: python, github, opensource, programming
Published: 2020-12-15 14:49:18

Yep, you read it right ! There is a GitHub Action that lets you put a random image (from a collection of yours) on your GitHub Profile README. Here I am again, with another no-so-useful GitHub Action ! Not saw the previous Action ? Check it out [here](https://dev.to/siddharth2016/quote-readme-see-wonderful-quotes-fun-facts-on-your-github-profile-readme-pgl).

---

The result before diving into steps:

![Sample Output](https://dev-to-uploads.s3.amazonaws.com/i/da9hcvsvrrvymt7tfr5f.png)

Here the image highlighted will keep on changing in every 24 hours (from a collection of my images), you can use a collection of your preferred images and see them changing on your GitHub Profile README, with a new profile image to start each day !

---

Without dragging it further, keeping it short and simple, here are the steps:

### 1. Update your Profile `README.md` file. 

Add following in you Profile `README.md`, wherever you want your images to appear. Do not forget to commit the file 😉

```html
<!--START_SECTION:update_image-->
<!--END_SECTION:update_image-->
```

It should look something like this:

![Step 1 Image](https://dev-to-uploads.s3.amazonaws.com/i/22d6g0uysg9pmro24w1f.png)

Profile `README.md` should be present in `<username>/<username>` repository. Need to know more about profile repository/README, check out official [docs](https://docs.github.com/en/free-pro-team@latest/github/setting-up-and-managing-your-github-profile/managing-your-profile-readme).

### 2. Add your preferred images.

You need to have your own collection of images that you want to be displayed on your README.

Create a folder `.github/images` on your GitHub Profile Repository to store the images.

To create this folder, you can do a `git push` from your local repository (given images are in `.github/images` folder). Check [this](https://stackoverflow.com/questions/12258399/how-do-i-create-a-folder-in-a-github-repository) for more info on creating a folder on a GitHub Repository.

It should look something like this:

![Step 2 GitHub Images Folder](https://dev-to-uploads.s3.amazonaws.com/i/pjq1kta5nm9z0v1kp8jk.png)

### 3. Add workflow (yaml) file.

Now, click on `Actions` tab on top of your profile repository `<username>/<username>`.

![Step 3 Actions Tab](https://dev-to-uploads.s3.amazonaws.com/i/xn72nk3t3vag1lppska6.png)

Then, set up a workflow yourself.

![Step 3 Setup Workflow](https://dev-to-uploads.s3.amazonaws.com/i/hld5vsddmuk09b61qm1r.png)

Remove all the pre-entered contents of the yaml file and add the following:

```yaml
name: Update Image Readme

on:
  workflow_dispatch:
  schedule:
    # Runs at 1 UTC everyday
    - cron: "0 1 * * *"

jobs:
  update-readme:
    name: Update Image README
    runs-on: ubuntu-latest
    steps:
      - uses: siddharth2016/update-readme-image@main
        with:
          IMG_ALT: <alt-message> #image alt to be displayed if image is not mapped correctly
```

There are more options available to customize your workflow, check out a more detailed explanation [here](https://github.com/marketplace/actions/update-image-readme).

Name this yaml file as `update-image-readme.yml` or whatever suits you best and commit the workflow yaml file.

### 4. Test your action and see the Magic 🧙‍♂️

Now, again go to `Actions` tab.

![Step 4 Actions Tab](https://dev-to-uploads.s3.amazonaws.com/i/7zmufts8y8ao3zn2fzek.png)

Click `Update Image Readme` under workflows.

![Step 4 Update Image Readme](https://dev-to-uploads.s3.amazonaws.com/i/89ui93vojanqtz6keex0.png)

Then `Run workflow`->`Run workflow`, wait for it to complete.

![Step 4 Run Workflow](https://dev-to-uploads.s3.amazonaws.com/i/yaco5xxt8bok0amj1rkg.png)

And once the action is done then check your Profile README and see a random image (from your collection) !

![Step 4 Result](https://dev-to-uploads.s3.amazonaws.com/i/gultjonx2oedcmfqno2z.png)

Additionally you can link it back to the original repository to show your support for this action !

Change `README.md` like this

```html
<a href="https://github.com/marketplace/actions/update-image-readme">
<!--START_SECTION:update_image-->
<!--END_SECTION:update_image-->
</a>
```

---

Well, that was it, if you followed these steps you would be seeing an amazing image from your collection on your Profile README.

Share your Profile README Images screenshot in the comments below 👇

If you faced any issues, please comment here or create an issue on [this](https://github.com/siddharth2016/update-readme-image) repository.

If you liked this not-so-useful action, then give it a star ⭐

If you loved this not-so-useful action, then [let's connect](https://blog.codekaro.info/lets-connect) and contribute to make this a little bit useful !

Just starting your Open Source Journey ? Do not forget to check out [Hello Open Source](https://github.com/siddharth2016/hello-open-source) !

Namaste 🙏