I am building a static website using the “cupper” theme.
Some of my markdown contents include images which are from another website (https URL) or local directory. I used the markdown grammar
!() to include the image. The code worked well in the markdown editor (i.e. Atom). However, when I see my website, the image from another website survived only; the ones from my local directory are not shown.
After exploring the cupper theme hompage, I understand that this theme uses a shortcode named figureCupper to call images:
caption="The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. [Credits](https://images.nasa.gov/details-GSFC_20171208_Archive_e000393.html)."
I applied the example code and modified the name of my figure only, but this failed to build the site and raised an error:
"C:\Users\Owner\Dropbox\bloght-hugo\content\post\20160628_서민적 글쓰기.md:36:1": failed to render shortcode "figureCupper": failed to process shortcode: "C:\Users\Owner\Dropbox\bloght-hugo\themes\cupper-hugo-theme\layouts\shortcodes\figureCupper.html:14:21": execute of template failed: template: shortcodes/figureCupper.html:14:21: executing "shortcodes/figureCupper.html" at <$original.Resize>: nil pointer evaluating resource.Resource.Resize
I also found that Hugo provides a default shortcode named figure I tried to apply this shortcode. At this time, the image appeared at the right location, but it was broken, showing .
How can I include images to my posts via any ways such as the markdown grammar or other hugo shortcodes?
This is hard to debug without seeing your code. Can you share it?
Ok. My github repository for the site is here.
I am sorry. I didn’t realize that the
themes/cupper-hugo-theme folder of my github repository is linked to your repository.
I have copied the structure of the
themes/cupper-hugo-theme folder to the root directory of the
bloght-hugo repository (and I pulled your master branch to my
cupper-hugo-theme folder to keep the original theme code).
As I remember, I modified the followings:
partials\footer.html (for google analytics and dark/light button)
partials\nav.html (dark/light button)
_default\list.html (to modify date/time format)
post\single.html (to modify date/time format)
partial/disqus.html (to replate disqus with utterances)
partial/header.html (for google analytics)
Please check my code.
Getting a chance to look at this again. Which of your posts in particular is having the issue?
All the posts that contain local images. For instance, the two recent posts about google analytics and utterances are the ones.
In the post about utterances, there is a code box above the references header. And a text line follows the box. There is an image below the text line, but is now shown. This is an example and there are actually many images in the post.
On the other hand, old posts start with an image of a book. This is not a local image but is included by using https url.
Let me know if additional information is needed.
2020년 1월 5일 (일) 오전 10:54, Zachary Betz via Hugo email@example.com님이 작성:
I think I see your issue. The reason your markdown image previews work in GitHub is because the paths are correct.
But the image paths may be different on your deployed site, depending in how you have permalinks configured.
You could also try moving your images to the
static directory. They will then be copied to the root of your site when it’s generated.
Thank you for your response.
My permalinks in the config.yaml file is:
permalinks: post: /:filename/
Based on your last response, I tried the followings which did not work either:
move all images to static folder and change the address in markdown from “” to “/static/image_root/image_name.jpg” or
change the current address of images in markdown files to ones of github repository such as “https://github.com/hoontaeklee/bloght-hugo/blob/master/content/post/20200101_add_utterances/20200101_add_utterances_fig1.jpg”
I will find other ways. Please let me know when you have any idea.
2020년 1월 6일 (월) 오전 2:22, Zachary Betz via Hugo firstname.lastname@example.org님이 작성:
I seem to solve this issue (it works!).
The solution is omitting the first folder below the root directory of my local blog repository.
For example, if my image
A.jpg has address of
blogRoot/static/images/A.jpg, then when I refer to the address in
markdown file, I should omit the root and the next folder like this:
/images/A.jpg ("/" at the first should not be omitted). Likewise, if my image
article_B.jpg's address is
blogRoot/content/post/article_B/B.jpg, then I can refer the address in
But I do not know why this way work correctly. If you know the reason, please let me know.
Forgive me if I’m being difficult to understand. The English is NOT my native language.
Because, the posts are relative to the root of your website.
When you use
Hugo with the option
--server, as a server to create your files, Hugo considers the folder
content as the root. It knows that if there’s files image into
static/images, it must bind as-is.
When you publish with
hugo command, all datas are writed on
public folder. This on becomes the root, within which folders
images and others are at the same level.
Do you mean that after serving Hugo website using commands such as
hugo -t <theme_name>, the directories right below the original root folder (e.g.
content, etc.) become a new root?
-t is just to specify one theme. You can use it even with option
When you serve
hugo, with or without option other than
--server, all datas are correctly rewrite into
public folder, as exemple:
all you have to do is to publish this root on your webhosting!
But, as long time you use Hugo as server, the:
images (the name can be too:
img) are into folder
posts is into folder
content— Hugo considers this folder as the root of your site on localhost.
I can’t think/see of a better way to help you!
Maybe I’m wrong
Thank you. Your answer looks correct for me.