Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

images not showing in sidebar #91

Closed
udion opened this issue Apr 8, 2018 · 23 comments
Closed

images not showing in sidebar #91

udion opened this issue Apr 8, 2018 · 23 comments
Labels
documentation Changes to documentation only (e.g., README, Guide, Wiki Pages, etc.)
Milestone

Comments

@udion
Copy link

udion commented Apr 8, 2018

I have placed my profile picture in images folder and updated config.yml so that avatar has my image name, I am still not able to see my images, however if I put the names of the file which were there by default (i.e profile.png, etc..) it seems to work.

Please help

@TsingQAQ
Copy link

TsingQAQ commented May 11, 2018

Hi udion and others, I’ve encountered the same problem with yours. I could change the default profile images to other photos(png formatt only, jpg test failed) already included in the image file. However, when I uploaded a png photo, it didn't work. What's more, I can't make it work by renaming the uploaded photo to default: profile.png.
Have you solved this problem?

@udion
Copy link
Author

udion commented May 11, 2018

No, still no luck, I could find pages which are using the same template with their own images but could not find how they are doing it.
Please post the solution here if you do find out. (earlier I thought it has to do with the resolution of the images, but I tried the exact resolution as that of default profile.png, it doesn't work!)

@udion
Copy link
Author

udion commented May 12, 2018

check out HUGO!

@LeonardoPaccianiMori
Copy link

I have a similar problem: some images do work and show in the site (in my case I have added a photo in the "about" pages and it shows correctly) but some others don't, like the profile picture in the sidebar or any other image I add in any other page.
Is there any way to solve this without using HUGO?

@kruegert
Copy link

kruegert commented Jun 1, 2018

Did you change the base url in the config.yml file to your url?

url : https://[yourAccountName].github.io
...the base hostname & protocol for your site e.g. "https://mmistakes.github.io"

Otherwise the image is searched under https://academicpages.github.io

@bernielima
Copy link

bernielima commented Jun 4, 2018

Some toughts about the "config.yml" :

Correct >>>> avatar: name_of_the_picture.png
Wrong >>>> avatar: /folder/name_of_the_picture.png

I tried 2 pictures. One worked out well, the other dont. (dont know why).

@lynchrobo
Copy link

I've found that sometimes you need to capitalize the file type, i.e.

my_photo.jpg doesn't work
my_photo.JPG does work

I've had some issues with the photo showing up fine on the front page but not on subpages, but this seems to help at least partially.

@jiachangliu
Copy link

jiachangliu commented Sep 15, 2019

I think one of the key issues is that once you change the name after "avatar", you need to locally update it using git and upload it online to github using git as well. Once your images are uploaded on github, you should be able to display it locally using "bundle exec jekyll liveserve" as well.

The reason for this is that the generated index.html file under the _site folder has the location of the image points to your online github repository. Without uploading the images to github first, your local index.html will not display the image.

@ASeatonSpatial
Copy link

I've got this problem, i've changed the url and put my file in the images folder. I can see it in the repo on github, but when it searches [myrepo].github.io/images/myimage.jpg it doesn't find anything.

I've checked another repo and they have done exactly the same. When I check [hisrepo].github.io/images/hisimage.jpg the file is there. All he did was add it to the images folder same as me, why is my image not appearing?

@ASeatonSpatial
Copy link

I should mention my workflow is:

clone the forked repo
change things locally
commit changes
push to remote

Then I wait a bit and have a look at the website to see if I broke anything. I've not tried displaying locally.

@ASeatonSpatial
Copy link

Alright, a little bit strange, not sure if useful to anyone: I tried it locally using bundle exec jekyll liveserve and it worked. After that I committed and pushed changes to remote and now it's working through github pages as well.

@yyou1996
Copy link

yyou1996 commented May 2, 2020

Did you change the base url in the config.yml file to your url?
url : https://[yourAccountName].github.io
...the base hostname & protocol for your site e.g. "https://mmistakes.github.io"
Otherwise the image is searched under https://academicpages.github.io

This works for me.

@Superhzf
Copy link

Superhzf commented Sep 8, 2020

Did you change the base url in the config.yml file to your url?

url : https://[yourAccountName].github.io
...the base hostname & protocol for your site e.g. "https://mmistakes.github.io"

Otherwise the image is searched under https://academicpages.github.io

To me, this basically works. Plus:
The format of the target image has to be original .png

@jkeller52
Copy link

jkeller52 commented Nov 11, 2020

Correct >>>> avatar: name_of_the_picture.png
Wrong >>>> avatar: /folder/name_of_the_picture.png

For me, this wasn't the case. Changing my _config.yml to
avatar: /folder/filename.png solved the issue.

@jroeder-astro
Copy link

I know this thread has been dormant for a while, but none of the above solutions brought me any closer to my picture showing up on the page.

@kabbas570
Copy link

Did you change the base url in the config.yml file to your url?

url : https://[yourAccountName].github.io
...the base hostname & protocol for your site e.g. "https://mmistakes.github.io"

Otherwise the image is searched under https://academicpages.github.io

Thanks, this one is working fine, change the URL and GitHub repo path.

@hbshrestha
Copy link

hbshrestha commented Jun 9, 2022

I also faced this issue. I followed the following steps to resolve them:

  • I used file of small size (<200 KB) for avatar, which was stored inside images directory.

In config.yml file,

  • For the avatar, I simply used: "filename.JPG". I did not use "/images/filename.JPG". Note that I used JPG in capital.
  • For url, I used https://username.github.io without quotes, where username refers to my personal user name
  • For baseurl, I left it as just empty quotes "".
  • For repository, I used name of the repository in my GitHub inside quotes "username.github.io" where username is my personal user name.

I committed these changes and pushe them into the repository.
Then I ran bundle exec jekyll liveserve. Finally I was able to see the image in the website after several attempts.

@JiyangZhang
Copy link

I've got this problem, i've changed the url and put my file in the images folder. I can see it in the repo on github, but when it searches [myrepo].github.io/images/myimage.jpg it doesn't find anything.

I've checked another repo and they have done exactly the same. When I check [hisrepo].github.io/images/hisimage.jpg the file is there. All he did was add it to the images folder same as me, why is my image not appearing?

super useful !

MingSun-Tse pushed a commit to MingSun-Tse/mingsun-tse.github.io that referenced this issue Apr 30, 2023
@davideboido
Copy link

I found that my uploaded images were way too heavy and high-resolution than the original profile.png, that is 720x720 px @72 dpi. Once I resized my picture and commited it, it displayed correctly.
Hope it helps

WideSu pushed a commit to WideSu/WideSu.github.io that referenced this issue Dec 20, 2023
@mx5nabcd
Copy link

mx5nabcd commented Jan 23, 2024

Delete everything behind the colon related to #Site Author(author) from the _config.yml file and commit. And if it's confirmed that it's all been deleted from your homepage, you can just add the avatar.

@rjzupkoii rjzupkoii added this to the 2024 Refresh milestone Feb 14, 2024
@rjzupkoii rjzupkoii added documentation Changes to documentation only (e.g., README, Guide, Wiki Pages, etc.) and removed bug A bug. labels Feb 17, 2024
@rjzupkoii rjzupkoii modified the milestones: 2024 Refresh, Documentation Feb 17, 2024
@rjzupkoii
Copy link
Collaborator

Reading through the discussion there doesn't seem to be a bug in the underlying code, but we should add to the wiki a good write-up on how images are processed in the template.

@AlexandreGastonBellegarde
Copy link

AlexandreGastonBellegarde commented Mar 2, 2024

SOLVE IT:
type manually:
/images and select the file in the arborescence

--
Now the link is done and it's work

dashpulsar added a commit to dashpulsar/dashpulsar.github.io that referenced this issue May 1, 2024
@rjzupkoii rjzupkoii closed this as not planned Won't fix, can't repro, duplicate, stale Aug 17, 2024
@rlucas7
Copy link

rlucas7 commented Oct 21, 2024

What I was able to do to fix this issue:

rlucas7/rlucas7.github.io@e14176c

basically I use the filepath base directory templating:
"{{site.baseurl}}/<path-to-image-from-repo-root>.png"
and place this in either ~[image]() or the <img src="filepath" />. To be specific you replace

~[image](filepage) -> ~[image]({{site.baseurl}}/<path-to-image-from-repo-root>.png)

or if you use html tags directly

<img src="{{site.baseurl}}/<path-to-image-from-repo-root>.png"/>

there are a couple examples of both approaches in the commit referenced above in case you want something super concrete.

Hope this helps.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Changes to documentation only (e.g., README, Guide, Wiki Pages, etc.)
Projects
None yet
Development

No branches or pull requests