How can I change layouts (heavily)?

[TetraTheta]

Sorry about asking (maybe) basic questions. Since this theme depends on multiple modules and be compiled when building site, I can't get where to modify to get the result I want easily.

I want to modify theme's layout heavily.

This is default layout of HB Starter Theme.

There are few things I want to modify.

Remove 'Sidebar' and expand elements on center to left

Sidebar consist of 'other post in same category/directory' and 'category'. I don't want them to be in Sidebar.

I want to remove Sidebar and expand other things like 'Breadcrumb Navigation', 'Title', 'Date/Time to Read/Category' and 'Content'.

This thing can be done with custom JS and CSS, but this is not good idea because Hugo will still compile that section even though it won't be used or shown to user. So I want to remove that part from the theme code level.

New 'other post in same category/directory' style

Instead of showing one post and make user to click left/right button, I'd like to have new style of 'other post in same category/directory' like this.

This will be put under content of the post, with same width of the content.

This kind of modification cannot be done without modifying theme, but HB Starter Theme is complext theme so I don't know what file to edit, what file to add etc.

---

And here is another kind of question. Rather than posting another discussion, I will ask in here:

How to get 'optimized' image from shortcode?

By default, HB Starter Theme optimizes image. I want to get the optimized image path in shortcode.

I wrote 'gallery' shortcode which displays images in a row.

<style>figure.gallery .image-container { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; }</style>
{{ if len .Params | eq 2 }}
{{ with .Get "caption" }}
{{ errorf "'gallery' shortcode cannot be used with one image: %s" .Position }}
{{ end }}
<figure class="gallery">
<div class="image-container">
<img src="{{ .Get 0 }}" style="width: 49%">
<img src="{{ .Get 1 }}" style="width: 49%">
</div>
</figure>
{{ else if len .Params | eq 3 }}
{{ with .Get "caption" }}
<figure class="gallery">
<div class="image-container">
<img src="{{ .Get 0 }}" style="width: 49%">
<img src="{{ .Get 1 }}" style="width: 49%">
</div>
<figcaption>{{ .Get "caption" }}</figcaption>
</figure>
{{ else }}
<figure class="gallery">
<div class="image-container">
<img src="{{ .Get 0 }}" style="width: 32.5%">
<img src="{{ .Get 1 }}" style="width: 32.5%">
<img src="{{ .Get 2 }}" style="width: 32.5%">
</div>
</figure>
{{ end }}
{{ else if len .Params | eq 4 }}
{{ with .Get "caption" }}
<figure class="gallery">
<div class="image-container">
<img src="{{ .Get 0 }}" style="width: 33%">
<img src="{{ .Get 1 }}" style="width: 33%">
<img src="{{ .Get 2 }}" style="width: 33%">
</div>
<figcaption>{{ .Get "caption" }}</figcaption>
</figure>
{{ else }}
{{ errorf "'gallery' shortcode must be used with 2~3 images and a caption: %s" .Position }}
{{ end }}
{{ else }}
{{ errorf "'gallery' shortcode must be used with 2~3 images and a caption: %s" .Position }}
{{ end }}

(I know that these images are not lazy-loaded. Will add that part soon.)

I use this shortcode like {{< gallery 001.webp 002.webp caption="Two images!" >}}.

Contrary to other images that their final URL be like 001.1496b48a50c9dfb7e1bc00aab2c8c518.webp, the images inside of 'gallery' shortcode isn't optimized, just as 001.webp.

In general, it doesn't matter because I've already put images pre-optimized (like converted to WebP with highest compression rate) so the difference is only few KBs.

But If I can save those KBs, wouldn't it be nice?

---

Sorry again if these question bothered you.

[razonyang]

Sidebar Modules

I'd suggest removing those sidebar modules and write your own instead, for example, remove the posts and taxonomies modules.

module:
  imports:
    - path: github.com/hbstack/blog/modules/sidebar/posts
    - path: github.com/hbstack/blog/modules/sidebar/taxonomies

The source codes can be found on https://github.com/hbstack/blog/tree/main/modules/sidebar, copy one as the starting, and replace the module path (go.mod), module name (assets and partials folder name, and the parameters prefix in hugo.toml) with yours, to make sure it won't conflict with the existing modules, learn more on https://hbstack.dev/en/develop/module/.

Optimized Images

It depends how do you store the images, for images resources (global or page resources), you can use Fingerprint to hash image resources, for static images, you can use the md5 to hash the modified date (returned by os.Stat function).

You can use the image partial as well, since the theme imported that module, you can use it directly.

[TetraTheta]

Thanks a lot again! I have to work on making 'other posts at the bottom of the content' part, but thanks to your advice, I could get what I want.

Since images/image partial didn't work well with Style (it created incomprehensible number list in style attribute), I just contained it in <div> with box-sizing: border-box; width: 49% style. It works very well.

I will open another discussion if I have problem while making 'other posts at the bottom of the content' part.

Thank you again!

[razonyang]

other posts at the bottom of the content

There is already a module for this, which called github.com/hbstack/blog/modules/related-posts, preview on https://theme.hbstack.dev/en/blog/2023/03/tutorial/.

But you can create another one if it doesn't fit your needs, you can use the blog's predefined hooks to add any content.

[TetraTheta]

Thanks for the information! I didn't know that that exists because I was only testing with single post, so I didn't know how that would work.

related-posts looks good, so I will try to use it for a while. If I find myself unsatisfied with that, I will try your guide using predefined hook to insert my own version of it.