keeping images with the posts #91

gour · 2017-10-30T12:08:39Z

Hello!

I'd really like to move my Hugo-generated sites to org-mode and use ox-hugo for it, but wonder if it would be possible to achieve to keep images along with the post which is one of very nice Hugo's features.

E.g. in my 'posts' section I've the following:

$ tree .
.
├── 14th-anniversary
│   ├── gaura-nitai_2011_installation.jpg
│   └── offering_2011_installation_lunch.jpg
├── 14th-anniversary.org
├── happy-birthday
│   └── gaura-nitai_97.jpg
├── happy-birthday.org
├── how-what-to-preach.org
├── test.org
└── unicorn-logo-test.md

and in e.g. happy-birthday.org file, I reference the image as follows:

{{< figure src="gaura-nitai_97.jpg" title="Sri Sri Gaura-Nitai '97" class="center" >}}

and the *.jpg file is cp-ed into:

public/posts/happy-birthday/

folder which is very convenient when one has to handle hundreds/thousands of posts making it easy to know which media files belong to which post(s).

Now I wonder if something similar could be accomplished with the ox-hugo and/or how should one organize one's source files?

The text was updated successfully, but these errors were encountered:

kaushalmodi · 2017-10-30T17:39:07Z

Hello,

That style of content organization is new to me. I wasn't aware that Hugo allowed that. I have heard that the upcoming bugs/bundles feature in Hugo will support this style of organization in a better way?

Now I wonder if something similar could be accomplished with the ox-hugo and/or how should one organize one's source files?

Would you like to try out the Image links -> Source path contains static style of image organization, as explained in the documentation? Would that fit your needs?

gour · 2017-10-30T18:42:39Z

That style of content organization is new to me. I wasn't aware that Hugo allowed that.

Yeah, it does support it and it was one of the critical feature for me before migrating to Hugo...

I have heard that the upcoming bugs/bundles feature in Hugo will support this style of organization in a better way?

I also hope that bags/bundles will make it even more flexible.

Would you like to try out the Image links -> Source path contains static style of image organization, as explained in the documentation? Would that fit your needs?

Hmm...not really, afaict, since it does help me to just have images in the folder named as post's slug, but all the media stuff is still put somewhere under /static hierarchy...not perfect, but, maybe, it can pass until we get something better with bags/bundles. The problem is that moving/re-organizing posts is cumbersome requiring to hunt the post+media in separate folders. Any info what is ETA for that feature? Probably, not so soon...

kaushalmodi · 2017-10-30T18:55:42Z

maybe, it can pass until we get something better with bags/bundles.

That's what I was hoping for. Didn't want to invest too much time on implementing something that could be replaced in future.

The problem is that moving/re-organizing posts is cumbersome requiring to hunt the post+media in separate folders. Any info what is ETA for that feature? Probably, not so soon...

I understand how painful it could be to switch to a different file organization. I just got introduced to this style of image organization.

To start off, can you share your example site that uses this structure?

This is definitely an "enhancement" feature. So I won't do it immediately as I do bug fixes, but I will get to it.. may be in a week or 2? I don't know.. depends on the kind of complexity this feature entails..

kaushalmodi · 2017-10-30T20:22:34Z

I've started thinking about this..

It looks like you prefer one-post-per-file flow. ~~So would this proposal work?~~ Please look at #91 (comment)

OLD Proposal

./content-org                    ./content
├── post1/                        │
│  ├── post1.org     ------->     ├── post1.md
│  │                              ├── post1/
│  └── foo.png       ------->     │  └── foo.png
└── post2/                        │
   ├── post2.org     ------->     ├── post2.md
   │                              └── post2/
   ├── zoo.pdf       ------->        ├── zoo.pdf
   └── bar.png       ------->        └── bar.png

kaushalmodi · 2017-10-30T20:26:38Z

By keeping the .org and .png in the same directory, you can link the files using natural Org syntax that would result in valid links. You will also be able to see the images inline in the Org file if you wish.

If the org file and image files are in different directories and if we still refer to the images using a link like [[foo.png]], then that would be invalid link and would require ugly Org hacks to implement that. Also getting inline image previews won't work in that case.

kaushalmodi · 2017-10-30T20:39:57Z

btw it you use the one-post-per-subtree flow, you can have multiple posts in an Org file like this:

#+HUGO_BASE_DIR: ../../
#+HUGO_SECTION: images-in-content

* Post 1
:PROPERTIES:
:EXPORT_FILE_NAME: post1
:END:
Post 1 contents
[[file:gnu.png]]
* Post 2
:PROPERTIES:
:EXPORT_FILE_NAME: post2
:END:
Post 2 contents
[[file:org.png]]

in a file structure like this:

content-org/
└─ images-in-content/
   ├── gnu.png
   ├── images-in-content.org
   └── org.png

After export, the content and static will look like this:

content/
└─ images-in-content/
   ├── post1.md
   └── post2.md

static/
└─ ox-hugo/
   ├── gnu.png
   └── org.png

The static/ox-hugo/ dir is autogenerated by ox-hugo and the linking of the image files in there from the .md files is done by ox-hugo too.

So you only need to manually manage the stuff in content-org.

These method of organization is supported right now without any extra config.

gour · 2017-10-30T20:46:51Z

That's what I was hoping for. Didn't want to invest too much time on implementing something that could be replaced in future.

That's understandable.

To start off, can you share your example site that uses this structure?

Here is the skeleton of my 'testing' site:

$ tree content/
content/
├── about
│   └── _index.md
├── _index.md
└── posts
    ├── 14th-anniversary
    │   ├── gaura-nitai_2011_installation.jpg
    │   └── offering_2011_installation_lunch.jpg
    ├── 14th-anniversary.org
    ├── happy-birthday
    │   └── gaura-nitai_97.jpg
    ├── happy-birthday.org
    ├── how-what-to-preach.org
    ├── test
    │   └── unicorn-logo.png
    ├── test.org
    ├── unicorn-logo-test.md
    └── writing-hugo-blog-in-org-subtree-export.md

iow. for every post that uses some images there is directory with the same name as the post itself which contains desired images which can be referenced as I wrote above. Hugo can then detect it copy image media to the out directory:

$ tree public/posts/
public/posts/
├── 14th-anniversary
│   ├── gaura-nitai_2011_installation.jpg
│   ├── index.html
│   └── offering_2011_installation_lunch.jpg
├── happy-birthday
│   ├── gaura-nitai_97.jpg
│   └── index.html
├── how-what-to-preach
│   └── index.html
├── index.html
├── page
│   └── 1
│       └── index.html
├── test
│   ├── index.html
│   └── unicorn-logo.png
├── unicorn-logo-test
│   └── index.html
└── writing-hugo-blog-in-org-subtree-export
    └── index.html

This is definitely an "enhancement" feature. So I won't do it immediately as I do bug fixes, but I will get to it.. may be in a week or 2? I don't know.. depends on the kind of complexity this feature entails..

OK. Thanks a lot. I've another site with ~200 posts in some PHP CMS which I want to migrate to Hugo asap...I'd simply use native orgmode support but it does miss so many things atm...today I e.g. discovered this one...

kaushalmodi · 2017-10-30T20:57:24Z

LATEST PROPOSAL for ORGANIZATION -- IT ALREADY WORKS

Was thinking more.. Looks like ox-hugo already supports kinda what you want. Please comment after reading the details below:

Org source

images-in-content/
├── gnu.png
├── images-in-content.org               (posts with subtree-based export)
├── org.png
├── post3/
│  ├── gnu-copy.png
│  └── post3.org                                   (file based export)
└── post4/
   ├── org-copy.png
   └── post4.org                                   (file based export)

Contents of `post3.org` as example

#+HUGO_BASE_DIR: ../../../
#+HUGO_SECTION: images-in-content

#+TITLE: Post 3

Post 3 contents

[[file:gnu-copy.png]]

Exported Markdown and Static

content/images-in-content/
├── post1.md (from subtree based export)
├── post2.md (from subtree based export)
├── post3.md (from file based export)
└── post4.md (from file based export)

static/
└── ox-hugo/
   ├── gnu-copy.png
   ├── gnu.png
   ├── org-copy.png
   └── org.png

it does miss so many things atm...today I e.g. discovered this one...

I wanted blogging to remain as close to true Org as possible and thus this project was born. #+ATTR_HTML is supported well by ox-hugo: Hugo generated HTML from ox-hugo exported files, search for ATTR_HTML in the Org source here for examples.

Related: Issue #91

gour · 2017-10-30T21:00:07Z

It looks like you prefer one-post-per-file flow.

Well, it looks that one-post-per-file flow is more suitable for such organization.

So would this proposal work?

Perfect!

By keeping the .org and .png in the same directory, you can link the files using natural Org syntax that would result in valid links. You will also be able to see the images inline in the Org file if you wish.

That looks very good and close to the current setup.

btw it you use the one-post-per-subtree flow, you can have multiple posts in an Org file like this:

I believe that I prefer the former, although have to think about the trade off when using single-post-per-file flow...

kaushalmodi · 2017-10-30T21:03:22Z

Perfect! ;)

Noo.. that proposal is already old.. please look at e578681

gour · 2017-10-30T21:19:11Z

Noo.. that proposal is already old.. please look at e578681

It's getting late here and/or I'm a bit tired and will take closer look at the proposal tomorrow, but it seems that one does 'best of both worlds' - using 'one post per subtree' flow and creating appropriate structure in the output, correct?

If so, then, yes, I stand corrected...this one is perfect: 👏

gour · 2017-10-30T21:21:26Z

I wanted blogging to remain as close to true Org as possible and thus this project was born.

👍

#+ATTR_HTML is supported well by ox-hugo

Yes, I'm aware of that and therefore not much interested to take a look and/or use native orgmode support. 😉

kaushalmodi · 2017-10-30T21:29:51Z

will take closer look at the proposal tomorrow,

OK, you can try it out tomorrow. But to be clear, what I have in #91 (comment) is not a proposal, that already works! 😎

but it seems that one does 'best of both worlds' - using 'one post per subtree' flow and creating appropriate structure in the output, correct?

This is already supported.. you can use the per-subtree flow (have .org and images for all subtree posts in the same dir) or per-file flow (have the .org post and its images in the same dir). ox-hugo will then deal with putting Markdown in content/ and image, etc files in static/ox-hugo/.. but you shouldn't need to worry about that.

From your older comment:

today I e.g. discovered this one...

I still added a test case for ox-hugo: Hugo generated HTML

gour · 2017-10-31T11:39:46Z

Something does not work here for me...

Here is the structure of my sources:

$ pwd
/home/gour/prj/hugo/ox
$  tree .
.
└── posts
    ├── birthday
    │   └── gaura-nitai_97.jpg
    ├── post2
    │   └── unicorn-logo.png
    └── posts.org

Here is my posts.org, considering I want to use default posts (or blog) section to have images-in-content
organization as default and for the whole site:

#+HUGO_BASE_DIR: ~/prj/hugo/org/
#+HUGO_SECTION: posts

#+HUGO_WEIGHT: auto
#+HUGO_AUTO_SET_LASTMOD: t


* test site

** Birthday                                                     :gaura_nitai:prasadam:@devotional:
:PROPERTIES:
:EXPORT_FILE_NAME: birthday
:EXPORT_DATE: <2011-02-09 Sri 11:13:01>
:END:

In two days we'll have 15th celebration of Sri Sri Gaura-Nitai's
'birthday'…wonderful opportunity to start with a new blog. 

# more

#+ATTR_HTML: :class center
#+ATTR_HTML: :alt Sri Sri Gaura-Nitai '97
[[file:gaura-nitai_97.jpg]]

For now, just take a look at the picture from Their installation
ceremony which happened on 14th of February 1997 in our flat in
Zagreb…

* Post 2
:PROPERTIES:
:EXPORT_FILE_NAME: post2
:END:
Post 2 contents

[[file:unicorn-logo.png]]

After exporting I e.g. get the following for post2.md:

+++
title = "Post 2"
lastmod = 2017-10-31T12:35:02+01:00
weight = 1001
draft = false
+++

Post 2 contents

{{<figure src="unicorn-logo.png">}}

but unicorn-logo image is neither rendered nor cp-ed anywhere in the output folder.

What do I miss?

kaushalmodi · 2017-10-31T11:47:01Z

What do I miss?

On the Org side, you need to have the Org post (file-based or subtree-based, doesn't matter) and the images in the same directory because you are referring to those images directly with file name without any directory prefix.

See my "latest proposal" comment: #91 (comment)

You can even clone the images-in-content branch and see in this dir for examples: https://github.com/kaushalmodi/ox-hugo/tree/images-in-content/test/site/content-org/images-in-content

Actually, it's "images in Org content".. post ox-hugo export, the images go to static/.

gour · 2017-10-31T12:40:56Z

On the Org side, you need to have the Org post (file-based or subtree-based, doesn't matter) and the images in the same directory because you are referring to those images directly with file name without any directory prefix.

Now I got it.

You can even clone the images-in-content branch and see in this dir for examples: https://github.com/kaushalmodi/ox-hugo/tree/images-in-content/test/site/content-org/images-in-content

That also helped to figure out how to get post+image in the same folder working... 😄

Now I just wonder how could one take advantage of both, iow. I believe that subtree method is better option due to superior orgmode's organizational capabilities and the only gotcha is requirement use little bit longish path for the image files...

Briefly: I'd like to be able to use e.g.:

[[file:unicorn/unicorn-logo.png]]

and with having One post per Org subtree flow, to get correct image/media handling for this organization:

$ tree .
.
├── birthday
│   └── gaura-nitai_97.jpg
├── posts.org
└── unicorn
    └── unicorn-logo.png

where posts.org does contain one post per org subtree content?

... you can use the per-subtree flow (have .org and images for all subtree posts in the same dir) or per-file flow (have the .org post and its images in the same dir). ox-hugo will then deal with putting Markdown in content/ and image, etc files in static/ox-hugo/..

Edit: Iow. I'd like combo of that - per-subtree flow with the ability to keep images in the folders names as posts itself. That is the way which is used in Nikola to have 'keep-images-with-the-content' feature...

kaushalmodi · 2017-10-31T12:45:06Z

Briefly: I'd like to be able to use e.g.:

[[file:unicorn/unicorn-logo.png]]

I haven't tried that yet, but should work right away.

gour · 2017-10-31T19:30:22Z

I haven't tried that yet, but should work right away.

Hey, that works out of the box indeed...was doing some wrong before. Perfect! 👏

Related: Issue #91

kaushalmodi · 2017-11-09T21:46:27Z

@gour I had let this issue stay open as I wanted to document this feature for other users too. Now I have :)

The documentation is added at https://ox-hugo.scripter.co/doc/images-in-content/.

Feel free to reopen this issue or open a new one if you face any problem.

Fixes kaushalmodi/ox-hugo#91 - Also make the "Test Site" link bold in the sidebar menu on documentation site.

finex · 2020-01-29T17:44:57Z

@gour I had let this issue stay open as I wanted to document this feature for other users too. Now I have :)

The documentation is added at https://ox-hugo.scripter.co/doc/images-in-content/.

Feel free to reopen this issue or open a new one if you face any problem.

That's fine, but there is a major issue with saving images on static folder: those images cannot be processed by Hugo (see Hugo Image processing ).

I started my ox hugo experimentation with the strategy proposed by the hugo documentation ( ox hugo Images in content ) but, having to process the images, at the moment I have to copy the files by hand to the directory containing the post. I am using :EXPORT_HUGO_BUNDLE: in order to create page bundles and I've disabled Emacs option org-hugo-default-static-subdirectory-for-externals.

It would be awesome that the images would be copied from the org directory to the page bundle directory.

kaushalmodi added the enhancement label Oct 30, 2017

kaushalmodi added a commit that referenced this issue Oct 30, 2017

Add examples of images in content

e578681

Related: Issue #91

kaushalmodi referenced this issue Oct 31, 2017

Add test for multiple #+ATTR_HTML

caa3aa9

kaushalmodi added a commit that referenced this issue Nov 9, 2017

Add examples of images in content

6c12240

Related: Issue #91

kaushalmodi closed this as completed in 5065b27 Nov 9, 2017

kaushalmodi added a commit to kaushalmodi/hugo-onyx-theme that referenced this issue Mar 5, 2018

Documentation + test update to show the "Images in Content" feature

0c3560c

Fixes kaushalmodi/ox-hugo#91 - Also make the "Test Site" link bold in the sidebar menu on documentation site.

kaushalmodi mentioned this issue Jan 29, 2020

Better handling of images in Hugo bundles #324

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

keeping images with the posts #91

keeping images with the posts #91

gour commented Oct 30, 2017

kaushalmodi commented Oct 30, 2017

gour commented Oct 30, 2017 •

edited

Loading

kaushalmodi commented Oct 30, 2017

kaushalmodi commented Oct 30, 2017 •

edited

Loading

kaushalmodi commented Oct 30, 2017

kaushalmodi commented Oct 30, 2017 •

edited

Loading

gour commented Oct 30, 2017

kaushalmodi commented Oct 30, 2017 •

edited

Loading

gour commented Oct 30, 2017 •

edited

Loading

kaushalmodi commented Oct 30, 2017

gour commented Oct 30, 2017

gour commented Oct 30, 2017

kaushalmodi commented Oct 30, 2017 •

edited

Loading

gour commented Oct 31, 2017

kaushalmodi commented Oct 31, 2017

gour commented Oct 31, 2017 •

edited

Loading

kaushalmodi commented Oct 31, 2017

gour commented Oct 31, 2017

kaushalmodi commented Nov 9, 2017

finex commented Jan 29, 2020

keeping images with the posts #91

keeping images with the posts #91

Comments

gour commented Oct 30, 2017

kaushalmodi commented Oct 30, 2017

gour commented Oct 30, 2017 • edited Loading

kaushalmodi commented Oct 30, 2017

kaushalmodi commented Oct 30, 2017 • edited Loading

OLD Proposal

kaushalmodi commented Oct 30, 2017

kaushalmodi commented Oct 30, 2017 • edited Loading

gour commented Oct 30, 2017

kaushalmodi commented Oct 30, 2017 • edited Loading

LATEST PROPOSAL for ORGANIZATION -- IT ALREADY WORKS

Org source

Contents of post3.org as example

Exported Markdown and Static

gour commented Oct 30, 2017 • edited Loading

kaushalmodi commented Oct 30, 2017

gour commented Oct 30, 2017

gour commented Oct 30, 2017

kaushalmodi commented Oct 30, 2017 • edited Loading

gour commented Oct 31, 2017

kaushalmodi commented Oct 31, 2017

gour commented Oct 31, 2017 • edited Loading

kaushalmodi commented Oct 31, 2017

gour commented Oct 31, 2017

kaushalmodi commented Nov 9, 2017

finex commented Jan 29, 2020

gour commented Oct 30, 2017 •

edited

Loading

kaushalmodi commented Oct 30, 2017 •

edited

Loading

kaushalmodi commented Oct 30, 2017 •

edited

Loading

kaushalmodi commented Oct 30, 2017 •

edited

Loading

Contents of `post3.org` as example

gour commented Oct 30, 2017 •

edited

Loading

kaushalmodi commented Oct 30, 2017 •

edited

Loading

gour commented Oct 31, 2017 •

edited

Loading