This is a tip post for building your website with org-mode and gatsby.
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.
#+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.
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.