Jekyll how to display an image in a post - image

I am trying to follow the Jekyll docs and am stuck on how to display an image
---
layout: post
title: "My first post!"
date: 2016-10-20 16:17:57 +0200
categories: jekyll update
regenerate: true
---
This is in the `_posts` directory.
It can be edited then rebuild the site to see the changes.
You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
![name of the image][{{site.url}}/assets/P6740674.JPG]
I feel very silly asking this question as it is so basic but I can not find any answers to my question
Is it possibly a configuration error on my own system. I am using apache2, ruby gems, etc
Thanks in advance

If you want to use site.url, you have to add a url variable to your _config.yml file. More info in the Jekyll documentation.
But you might not have to use site.url at all. Any urls that start with a / slash will be relative to the top level of your domain. So you could do this:
![image tooltip here](/assets/image.jpg)

I could see an images directory created under assets by default. I've placed an image as follows.
assets/images/myimage.jpg and add following line in the post.
![My image Name](/assets/images/myimage.jpg)
Run bundle exec jekyll serve and see if there is any error. If you have mentioned mismatching file location, you will see error here.

The problem here is annoying simple - you have the wrong format for your image link.
It should be ![name](link). You have ![name][link]. Note the difference in the brackets. Everything else is fine.

I know this is an old question but I spent some 15min on this (jekyll/github blog is my secondary blog). So adding a suggestion here.
Briefly, as Kevin suggested, add the image file to a path under the root and give path to that file. Make sure that the file/directory is being tracked; not .gitignored.
My assets directory is inside _site directory. But, when I added a new image under that path git status did not show it as newly added- .gitignore ignored the _site directory. So Kevin's suggestion did not work as is. But as per his suggestion, I reasoned that as docs is my site's root, if I add an images directory there and add the image under that then something like
![image description](/images/my_image.png)
should work. And it worked this way. Not sure if this is the best way. Sharing here in case you have similar config.

In my case, I forgot to push the image to remote and therefore the image didn't show. Just to keep this in mind as well.

Related

that is no updated about modification of beautiful-jekyll

i got a fork about https://github.com/daattali/beautiful-jekyll
and i checked url is working...
but when i modify _config and md files
but that is no updated.
actually i'm not good at ruby. but i don't understand why no update.
is there anyone to help me ?
enter image description here
layout: page
title: changing
subtitle: Why you'd want to go on a date with me
Do you have experience with Jekyll?
The first thing I would check is that your server is running and without any changes you can view the website by visiting https://localhost:4000
Is the server is running, when you save a file you should see it say that it is rebuilding.
From your screenshot it looks like you're maybe editing the files directly in Github. Github is a bit of a blackbox when it comes to running Jekyll, I would advise getting it running locally first.

Home layout missing in _layouts folder, but works

I started to make my blog with jekyll and github pages.
I was doing fine with the basic theme,
But I wanted to apply the side bar property,
so I downloaded the theme which has the sidebar, from https://idratherbewriting.com/documentation-theme-jekyll/
So I downloaded the proejct and overrided.
I don't know much about how this works,
but the strangest thing is that
in index.md file
if I put
---
layout:home
sidebar:mydoc_sidebar
----
it happens to show the basic theme layout
and the posts as it should be, but if I change the layout to
something else which is inside the _layout folder such as post, default,
the posts disappear and I have no idea why Jekyll does this.
Even when I erase the layout, it returns empty screen
so I'm sure it's doing something with the
home layout but I couldn't find anywhere how the home layout is rendered.
In _config.yml, we can see that you are using (theme: minima) the minima gem based theme (documentation). That means that by default, all your _includes, _layouts and assets are hidden somewhere on you computer. You can use the bundle show minima command to find out where they are stored.
As home layout exists in minima theme, is it used.
If you want to use your own home layout you can copy it from minima to your _layouts folder and modify it to suits your needs.
cd your/root
cp `echo "$(bundle show minima)/_layouts/home.html" _layouts/home.html`
If you want to be sure not to use hidden resources, you can delete the theme: minima directive from your _config.yml file.
this issue can be caused by several factors but it is possible there's no issue at all :)
1) Stop Jekyll serve/watch.
2) Delete the _site directory.
3) Rebuild and serve the site
jekyll serve.
Keep an eye on the terminal to see if Jekyll warns you about the missing layout file.
It is possible, albeit unlikely that the theme or a plugin id building layouts on the fly. To override this (whether it is the case or not), create a home layout as usual and include in a page/post's front-matter. Just keep the layout basic with something like a red background so that you can easily test if it is loaded or not.
I think deleting the _site folder will fix this but if not, try the other option and let me know.

How to extract blog posts from Ghost and import in Github hosted jekyll?

Jekyll website has given this instruction but it's not complete. I downloaded ghost.db from ghost blog and Installed http://import.jekyllrb.com/docs/ghost/ and jekyll-import gem and it's all dependencies. and ran the given command in above link. It ran but it's giving error
Also I don't have any local installation of jekyll website. It's hosted on github.
I want to move my blog posts of ghost to github hosted jekyll.
My OS is OSX Yosemite.
You have to run your command from the folder where ghost.db is in.
If your not lauching your command from the db folder, you can give an absolute path like
"dbfile" => "/home/user/ghost.db"
Or the database name is not the good one. Maybe ghost-dev.db or ghost-prod.db.
Another option is to export your ghost blog to json and then convert that json file into markdown files for Jekyll GitHub pages.
The json file is pretty self explanatory, so you could write a simple program to parse the file and create markdown files from it.
The process would look like this:
read the json file into memory.
parse the posts from db.data.posts.
for each post:
the markdown content is in the post markdown property.
create your front matter from the other post properties.
write a file with the front matter and original markdown, pre-pending the file name with the date into a _posts folder in your output folder.
note: if the page property is 0, it's a post, if it's 1 it's a page. If it's a page, the file should go in the root of your output folder without the date in the file name.
Each post file should look something like this:
---
layout: post
title: Welcome to Ghost
permalink: /welcome-to-ghost
date: 2017-04-25 20:54:20
published: false
tags:
---
You're live! Nice. We've put together a little post to introduce you to the Ghost editor and get you started. You can manage your content by signing in to the admin area at `<your blog URL>/ghost/`. When you arrive, you can select this post from a list on the left and see a preview of it on the right. Click the little pencil icon at the top of the preview to edit this post and read the next section!
If you're looking for an existing utility, or sample code, try GhostToGitHubPagesConverter. It's a dotnet core console app that will run on windows, mac or linux.
Full disclosure, this is my github project.

Joomla and JomSocial Error

I'm having problem with a client site. I'm not good with Joomla (we mostly do Wordpress), but one of my long-time clients asked me to move a site from another developer that never finished it, so I obliged. The problem is, everything is working great except for the Community page:
http://gettingripped.com/index.php/community
The only errors I'm finding are with the Facebook integration (which they told me the previous dev never finished/fixed). I'm really confused here...anyone out there have any ideas? It seems instead of showing the proper titles that Com_community_somethingElseHere is replacing everything.
Thank you guys in advance for your help!
Seems something is wrong with the en-GB.com_community.ini file.
Location: gettingripped.com/language/en-GB/en-GB.com_community.ini
I could not find the file in the above location!!!
Put this file in that folder and it will work!!!
If you can't find the file to put in the folder, create your own and place it there.. how? Well, google for this string as it is (including double quotes) "en-GB.com_community.ini" and open the first couple of results.
Then copy paste the displayed file content into your own ini file (name it en-GB.com_community.ini) and place it in your en-GB folder.
Load the page and it will show up as it should!

Image not showing up in README.md on GitHub

I am trying to add an image to the README.md in my repository using markdown below:
![ScreenShot](https://github.com/i-saumitra/Voice-controlled-MP3-Player/blob/master/screenshot.jpg)
But the image is not showing when I visit my repository.
Instead the link to the image is showing up. Clicking the link will open the image in new window.
I have also tried using relative path:
![ScreenShot](screenshot.jpg)
But this is giving page not found error.
What is the correct markdown to display image in README.md
Both README.md and image file are in same path/directory.
What is the correct way to display an image in github README.md?
Complete content of README.md file is as below:
Voice-controlled-MP3-Player
===========================
A MP3 player which accept voice command like PLAY, PAUSE, FORWARD, etc. Using C# and Microsoft Speech API.
![ScreenShot](https://github.com/i-saumitra/Voice-controlled-MP3-Player/blob/master/screenshot.jpg)
Updated content
Since January, 30th 2013, GitHub now supports relative links in markup documents.
This means that your code ![ScreenShot](screenshot.jpg) would now work flawlessly.
As pointed by #Brad, this may also ease a scenario where the images are different in two branches, but bear the same. In that case, switching from one branch to another, would dynamically switch the image in the rendered view, thus without requiring any change to the Readme content.
Blog post announcement
Help article
Previous answer when GitHub wasn't supporting relative links
You have to use the raw url format. In your case that would be https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg
This means that the correct markdown would be the following
![ScreenShot](https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg)
Using this in a .mdfile on github will display the following picture ;-)
Update following your comment
where is this officialy documented that we have to use raw...i couldn't find it anywhere
This URL format is an undocumented feature of the GitHub site. This means that it could change later. If that ever happens, in order to "rediscover" the new format, click the Raw button when displaying a image. This will "open" the image in your browser. Copy the URL and VoilĂ !
Note: Although the repository is no longer on hosted on GitHub, I've updated the urls to reflect the new GitHub policy regarding user content
You really should use relative urls. That way they'll work better for private repos as well.
![ScreenShot](/screenshots/latest.png)
supposing your repo has latest.png inside the screenshots folder.
~B
For relative URL's to work with images, wrap it inside the paragraph tag.
I was facing the problem, especially when working with the single image.
Example:
<p>
<img src="relativePath/file.png" width="220" height="240" />
</p>
An extension to previous answers...
The image would not show for me when the line:
![ScreenShot](/image.png)
Was directly below a <h2></h2> line and I needed to add an empty line between them.
Hopefully this saves someone some time!
Thought I would update this for 2019 as I had trouble figuring this out for myself. I uploaded my images to a repo on GitHub, and then used the raw url of the image to import it into my markdown file. To get the raw url, click on the specific image link in GitHub so you are on the page for that specific image. To the top right of the photo, there are two buttons, "Download" and "History". If you click "Download", it takes you to that raw url with the picture taking up the full screen. Copy that url, and then paste it like this in your markdown file:
![image description or alt text](https://raw.githubusercontent.com/i-saumitra/Voice-controlled-MP3-Player/master/screenshot.jpg)
The button used to say "Raw" not "Download" so I hope this helps people find it.
This may not be relevant to previous answers. I have the same question as the OP - I was directed here and it didnt help me. I hope I can help add light to this question however - as it covers the possibilities of why images does not render in README.md file.
The issue I encountered is that the file name README.md file is written as readME
Not only its missing .md its also written differently.
Apparently, we should not rename the README.md file. It has to be the original name of that file in order to render the images or gifs you want to upload on github README.md page. Hope this helps someone, in rare of occasions, just like I did.
Check the file extensions because .png is not the same as .PNG.
Also use / instead of \ while specifying the file path.
Side note, when using reStructuredText use:
.. image:: /screenshots/latest.png?raw=true
I've tested with "Copy path" and in some locations this was working and in others it didn't.
In the cases it didn't, I copied the permalink and used it instead.
It doesn;t work when there are any html tags just above the line where image is being imported. You can try removing the html code or add some blank lines for the image to show on Readme.
This is just to help someone who is still having issues with image rendering in README.md:
If your image is named Some Name.png and you are trying to attach it in the README.md like ![Some Name](relative/path//res/Some Name.png), it won't work. The image has to be saved without any spaces in the file name.
So Some_Name.png with ![Some Name](relative/path//res/Some_Name.png) will work.
Make sure you check the case of the file extension. They have to match (either capital or lowercase). If you have my_image.PNG in your root directory and you add ![screenshot](/my_image.png) to your README file, it will not work. For some reason, Windows likes to capitalize file extensions sometimes. Unfortunately, Git does not recognize extension case so if you try to fix it by just changing the file name, you won't be able to commit the changes to the repo since Git will think everything is up to date. So you either have to update README.md or do some workaround like moving the file out of the directory, making a commit, then editing the file name then moving it back and doing another commit.
I had to add a <br> to return a line in order for the image to show on mine. This discovery was inspired by the comment in this thread to leave a blank line after a tag.

Resources