Putting images with the content with permalink urls

support
1

I have seen a lot of discussion happening about putting images and content together for easier management of a blog post which includes a lot of images. But, I am facing some difficulties getting this work in my case.

For a blog post content to work with images in the writer or in the github (or any other git hosting) the markdown files failes to render for the image if it is put in some other directory.

I have permalinks set so it makes a bit more difficult for me to work.

I have a post folder in the content folder. Which contains a lots of md files/ posts. And my current blog has posts at the root level. So I set permalinks in the config.toml file.

[permalinks]
    post = "/:filename/"

This works fine. I get all my posts at the root level domain. It creates the folder with the post-slug (same as filename) in the public directory. But I don’t get the image file work.

To get this combined I changes my structure a little bit. I created a structure like this:

content
  - post
      - my-post-1
          -my-post-1.md
          -my-post-1-image.jpg

with the permalinks of course.

So in the public folder I ended up having something like this:

public
  - my-post-1
      - index.html
  - post
      - my-post-1
          -my-post-1-image.jpg

So ultimately, I got failed at the generated content. But that worked in the markdown editor well.

So, to get this both working, is there any way so that I get my content better organized?

2

You’re right that this is a common request here on the forums. That said, at least to my knowledge, the status is still the same: images in content are not copied over in way that respects the URL structure you desire.

That said, if you’re relatively handy with the command line, the following may help you. I’m using Hugo for an internal site (sorry, private repo) as part of my build script with AWS/S3. It allows my colleagues to preview content in GitHub…I then have a little client-side JS that looks for image src and appending a starting / so that all images are root relative. There are obvious drawbacks to this approach:

  1. All the images break for a millisecond or two before the JS IIFE runs.
  2. You can’t have any images with duplicative names.

But, again, it’s an internal-only site:


curdir=$(pwd)
      find ${curdir}/content \( -iname '*.jpg' -o -iname '*.png' -o -iname '*.gif' \) -type f -exec mv -v -- {} ${curdir}/static/images \;

This could be improved (e.g., to include /images + the path to the corresponding content folder), but I don’t have time right now.

HTH

3

I can understand. But what you are doing is an ugly hack (sorry to say that). For a small internal site this may work fine. But this is something I wouldn’t recommend.

Isn’t there any way to define how the non-md files are copied to the public folder?

I see some discussion here and here

4

Right…hence why I described it as such and put the phrase “obvious drawbacks.” I assure you that you don’t have to apologize for something I’ve already said. I agree with myself. Frequently :wink:

Again…

Sorry to not be of more help. Cheers.

5

Its okay :wink: Just a last thing, is there any way I can put files directly under the content folder? like defining section or something in the front matter instead of putting in the post directory? So that my theme can find everything with the post section and render it correctly.

6

Not 100% sure on what you’re asking, but content/*.md should be rendered as single pages, with the exception of _index.md (note the underscore), which is rendered as a list page. The default URL would then just be /:filename.

Or you can configure permalinks in your config (the following is using TOML) and just keep everything in post if the desired outcome is that the URLs be from the root (yoursite.com/) rather than yoursite.com/post/:filename:

[permalinks]
    post: "/:filename"
7

As I have seen some discussion on the github, this is a work in progress (or not started yet, not sure). But people are asking it. I hope they add this feature soon.

I think I am now convinced at the option of putting permalinks with post = "/:filename/" and creating directories inside /post/ folder and putting all the images and md file there for each post. And after hugo generates the public folder, I will run a simple script which will copy/merge the /public/post/ folder to /public/ folder (excluding index.html and page folder). Resulting what I (and many more) wanted to do. Images and index.html files are back into the places (yaayy!!)

Thanks for helping me out :blush:

1 Like
8

Something really small commands which made my day:

Run this from the root of your hugo directory:

rsync -avz --exclude index.html --exclude index.xml --exclude page/ --remove-source-files public/post/ public
find public/post/ -type d -empty -delete

This simply copies/merges (and deletes the source files after moving) the post folder which is copied to the public from the content folder without following permalinks. (Read above posts to know my posts structure)

After hugo completes the generation, running this 2 commands will do the trick for you (did for me!). Or if you have some complex permalinks, make sure you change the source and destination folder to make it work. Google a bit if you don’t know what you are doing with the commands.

You can add this to your build script/CI-CD scripts to make this process an ease.

Cheers! :wink:

1 Like
9

@kirtan403

Good stuff…and much better than my ugly hack :wink:
It would be really cool if you started a new thread under the “tips and tricks” category and then named it something easy for search to pick up. Just a thought…

10

@rdwatters

Sure, I am going to try tomorrow to deploy it to server. If it works fine there with CI script, I will definitely add this stuff to tips and tricks thread. (And yes, It’s definitely better than your ugly hack :wink: )