Xiaoxing's Notes

Add Images to Your Posts

December 04, 2020
304 words
1 minutes

This is a tip post for building your website with org-mode and gatsby.

Embedded Images

To add images to your stories, just link to the image files in your org file as usual. Nothing special about it. Images are basically links to files in org-mode. orgajs supports #+CAPTION keyword. description part of the link would be used if CAPTION is not present. It's okay to not having any of them too.

,#+CAPTION: this is so cute
[[file:images/cute-kitten.jpg][cute kitten]]

The above code will look like this on your website.

this is so cute

Keyword #+ATTR_HTML is also supported. Which means you can style your individual images like this.

,#+ATTR_HTML: :alt this is so cute :width 300 :style border-radius:50%;
[[file:images/cute-kitten.jpg][cute kitten]]

This is what it looks like.

this is so cute
cute kitten

Add Cover Image

Of cause you can add a normal embedded image at the very beginning of your post. If you want your cover image to standout a little bit, you can add a IMAGE property to your post. Add to the headline if the post is section based, or to the file with In-Buffer Settings if file based. This is how this post looks like in org form.

,* Add Images to Your Posts :org-mode:orgajs:
  :PROPERTIES:
  :SUMMARY:  Deal with images in your orgajs powered websites.
  :IMAGE:    ./images/painting-in-frame.jpg
  :END:

Customize Cover Image

You can customize your cover image by shadowing the component post-hero.tsx by create a file in your website project at src/gatsby-theme-blorg/components/post-hero.tsx. First copy and paste the default component (find it here) over and start tweaking it into your liking. This will change all post covers globally. You can use jsx instead of tsx if you are not a big fan of TypeScript. It will work.


I hope this helps. Talk to me on twitter if you have any questions. Stay tuned for more content, because I have a lot to talk about orgajs. Create issues and feedback, or simply star the project to help making it better.

Read more stories about "emacs" ->