HUGO

Convert content structure

Hi all,

Looking at https://gohugo.io/content-management/organization/#page-bundles, I wonder if there’s a way to automate converting of structure from like this:

`-- content
    |-- about.md
    `-- post
        |-- content-1.md
        |-- content-2.md
        |-- content-3.md

to like this:

`-- content
    |-- about.md
    `-- post
        `-- content-1
            |-- index.md
            `-- images
                |-- image-1.jpg
        `-- content-2
            |-- index.md
            `-- images
                |-- image-1.jpg
                |-- image-2.jpg

I could probably just manually update the images though. Just need the content part.

Thanks!

Yes … but first - what are you struggling with at the moment? and how many posts do you have?

Then … you can write a script in bash / shell / terminal to make directory, copy images etc …

this might help you too

I have a bash script that creates page bundles… but it does not locate the images of your bundle and copies them over…

#!/bin/bash

for FILE in *.md
do
  # remove the last dot and subsequent chars to name the folder from the .md
  DIR="${FILE%.*}"
  mkdir -p "$DIR"
  mv "$FILE" "$DIR"
done
find ./ -iname '*.md' -execdir mv -i '{}' index.md \;

go into posts and run it from there and it will create page bundles for all .md files.

The above script can be simplified as

for FILE in *.md
do
  # remove the last dot and subsequent chars to name the folder from the .md
  DIR="${FILE%.*}"
  mkdir -p "$DIR"/images
  mv -f "$FILE" "$DIR"/index.md
done

But, in order to move all the images from the default /static/img/ directory to the new images directory, you will probably need to write a script in the language of your choice that will capture all occurrences of strings like ![whatever](/img/whatever.jpg) in the newly created index.md and execute the move.

AFAIK, standard *nix tools like grep, awk or sed are not suited to easily capture multiple occurrences.

I wrote a pipeline that does this, including images.

Tested with image tags taking all the following formats:

![image 1 here](/img/img1.jpg)
![image 4 here](http://localhost:1313/img/img4.jpg)
![](/img/img2-arb.jpg)

This is what it looks like when you run:

$ pypyr ops/flat-to-bundle in='content/posts/post*.md' out=content/out in_img=static out_img=images
--> processing this path: content/posts/post*.md
--> processing file: content/posts/post-4.md
--> writing to: content/out/post-4/index.md
--> processing file: content/posts/post1.md
--> writing to: content/out/post1/index.md
--> processing file: content/posts/post2.md
--> writing to: content/out/post2/index.md
--> processing file: content/posts/post3.md
--> writing to: content/out/post3/index.md
--> processed images
static/img/img1.jpg
static/img/img2-arb.jpg
static/img/img4.jpg
done!

Input arguments:

  • in: look for a file or bunch of files depending on this input glob
  • out: create the bundles in this output directory
  • in_img: root directory for input images. Default static. If you keep your images in assets, change that here.
  • out_img: sub-directory for images in the output bundle

Note this does NOT delete or move any files, for the safety of your file-system - it creates new files/copies in out instead. If you are happy with the run/conversion, you can delete the image files yourself with the handy list of --> processed images it gives you at the end of processing on the console output. I also didn’t want to make assumptions about whether an image is in use on multiple pages, or other pages outside of the input glob scope, so another reason for not moving/deleting but copying instead.

Tested on MacOS and Linux - I tried to make sure not to make POSIX assumptions about paths, so it should work on Windows too (assuming you’re using powershell or WSL), but I haven’t actually tested this so no promises!

2 Likes

@yaythomas Good stuff, you should make this into its own Tips and Tricks post here.

1 Like

Sweet, thanks! Yeah, works for my use case.

1 Like