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:
{{< figureCupper
img="sun.jpg"
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)."
command="Resize"
options="700x" >}}
I applied the example code and modified the name of my figure only, but this failed to build the site and raised an error:
Rebuild failed:
"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?
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:
default.md of archetypes
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)
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.
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
“static/image_root/image_name.jpg”
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 markdown like: /post/article_B/B.jpg
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 posts, 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. static, content, etc.) become a new root?
all you have to do is to publish this root on your webhosting!
But, as long time you use Hugo as server, the:
=> folders css, js and images(the name can be too: img) are into folder static.
=> folder posts is into folder content— Hugo considers this folder as the root of your site on localhost.
etc.
I can’t think/see of a better way to help you!
Maybe I’m wrong
.
