Hugo

Want to make changes to Hugo-Initio Theme

I am playing around Hugo the past couple of days, and slowly picking up things as I play around with it and
watch the free tutorial series.

I am playing around with the Hugo-Initio Theme , however it seems the official creators are inactive on Github so I need to ask here.

I can’t seem to figure out how to have the recentworks layout (img thubnails) and apply it to the
BLOG contents. I don’t want to apply that layout to all types of contents , but just those that fall under BLOG. Currently the way blogs are layed out is just one after another with text.
I would like to see the recentworks layout instad.

https://themes.gohugo.io/theme/hugo-initio/

I am not quite sure how to do that.

How familiar are you with HTML and template coding? What you’re wanting to do doesn’t require advanced programming skills, but you’ll need to know a little.

What you’ll want to do is look at how the ‘recent works’ is built


and then look at how the blog listing is currently built

and either modify _default/list.html based on partials/recentworks.html or if you only want this tiled layout for a certain section of your site, you’ll need to create a seperate layout template there (e.g. layouts/blog/list.html)

2 Likes

Thank you for this! I know the basics of html from webscraping. I just didn’t know where to look.
I will play around with it for the next couple of hours and see if I run into any problems.

Hi funkydan2, I am running into a problem.
Despite using the same html from recent works, I am getting a different display:

## Recent Works

[![](http://localhost:1313/projects/) See details → Computer Vision ](http://localhost:1313/projects/www.google.com)[Web design](http://localhost:1313/projects/#) | [Wordpress](http://localhost:1313/projects/#) | [Logotype](http://localhost:1313/projects/#)

[![](http://localhost:1313/projects/) See details → Pure ipsum - development services for people ](http://localhost:1313/projects/#)[Web design](http://localhost:1313/projects/#) | [Wordpress](http://localhost:1313/projects/#)

[![](http://localhost:1313/projects/) See details → Lorem studios - interior and patio design ](http://localhost:1313/projects/#)[Web design](http://localhost:1313/projects/#) | [Logotype](http://localhost:1313/projects/#)

[![](http://localhost:1313/projects/) See details → Pure ipsum - development services for people ](http://localhost:1313/projects/#)[Web design](http://localhost:1313/projects/#) | [Wordpress](http://localhost:1313/projects/#)

[![](http://localhost:1313/projects/) See details → Lorem studios - interior and patio design ](http://localhost:1313/projects/#)[Web design](http://localhost:1313/projects/#) | [Logotype](http://localhost:1313/projects/#)

[![](http://localhost:1313/projects/) See details → Lorem studios - interior and patio design ](http://localhost:1313/projects/#)[Web design](http://localhost:1313/projects/#) | [Logotype](http://localhost:1313/projects/#)

It seems none of the images are being displayed?

I have the images in a static folder called image

Recent works looks like this:

[
    {
        "id": 0,
        "name": "Computer Vision",
        "image": "image/s1.jpg",
        "url": "www.google.com",
        "items": [

list.html from projects looks like this:

<a class="thumbnail" href="{{ .url }}">
                    <span class="img">
                        <img src="{{ .image }}" alt="">

They all seem to be referring to the image folder in static, so shouldn’t the images be displayed?

Thank you.

So to do this you’re going to have to get deep into the Hugo Docs, and especially the area to do with templating, functions, and variables.

The recentworks partial in the theme ranges over data stored in a JSON file. That’s not going to be what you want to do for your blog. For that you’ll want to range range through a paginator.

So, I’d be looking at the logic of _default/list.html (the things in curly brackets) and the layout of partials/recentworks.html (the HTML and CSS).

2 Likes

Okay my next attempt.

I am trying to save the current page from the range iteration to $page and then extract the
pagenumber which I will use to match the id of recent works.
But it seems my attempt is incorrect.

        {{ range $page:= .Paginator.Pages }}
            {{$index:= $page.PageNumber}}
            {{$data = where .Site.Data.recentworks.id $index}}
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="thumbnail" href="{{ $data.url }}">
                    <span class="img">
                        <img src="{{ $data.image }}" alt="">
                        <span class="cover"><span class="more">See details &rarr;</span></span>
                    </span>
                    <span class="title">{{ $data.name }}</span>
                </a>
                <span class="details">

I think I may have misunderstood you. Do you

  1. create a data file (in JSON format) holding your BLOG posts which you want displayed on the home page in a similar manner to Recent Works, or
  2. store your blog posts as markdown files in the content/blog directory, and have the list of blog posts displayed in as tiled images (like Recent Works) rather than a long list as the theme currently does?
1 Like

Hi Funkydan2,
I am going for number 2. The tab I want to display using recentworks layout is called, “Projects.”
I created a list.html within a Projects folder that I created within layout.
So the Projects folder within layouts has a list.html, which should specify the “Projects” page layout.
I copied the html code from recentworks and tried to modify it so that the Projects page will have tiles display. Since recentworks put it’s data within a json file, I did the same and created a new file called projects.json within data, and thought that I would need to update projects.json with new tiles as I add more blogs/content to Projects

I thought that might be the case.

If so, I don’t think you need to double handle things with blog posts (markdown files with front matter) as well as data files. All you need is the markdown + front matter.

In layouts/projects/list.html you’ll want code that uses the logic of the current layouts/_default/list.html (so, ranging through the pages of the paginator) and the html/css of layouts/partials/recentworks.html.

In your layouts/projects/list.html you’ll need something like this:

{{ range .Paginator.Pages }}
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <a class="thumbnail" href="{{ .Permalink }}">
           <span class="img">
              <img src="{{ .image }}" alt="">
              <span class="cover"><span class="more">More details &rarr;</span></span>
           </span>
           <span class="title">{{ .Title }}</span>
        </a>
        <span class="details"><a href="{{ .Permalink }}">{{ .Title }}</a></span>
    </div>
{{ end }}

Completely untested…have a look at the default list.html to work out what needs to go before and after this code to make it work (this will replace something like lines 9-21 of the default/list.html)…but it’s the basic idea.

How it works is that it uses .Paginator to go through your blog files in date order. It then takes the .Permalink value for each page and the Pages .Title and .image (all of which need to be set in each page’s frontmatter) to build the ‘tiles’ of the index page.

Hopefully, this points you in the right direction.

1 Like

Okay got it working::grinning:
I added Image variable in front matter of .md, and then accessed it via .Params.image in the range loop of Projects/list.html

Thank you so much.

UPDATE:

So it seems the layout is a little different for some reason.
Recent works is aligned left to right in rows, while my version seems to be aligned top to bottom.

Is it something with the variable $area?

{{ range $index, $area := .Site.Data.recentworks }}

I don’t see if used anywhere though.

Glad to hear I pointed you in the right direction.

Could you share your code - either do a bunch of copy and pastes…or best, create a Git repository and share a link

Either you’ve changed the original layouts/partials/recentworks.html and you just need to re-download the original, or you’ve done something to the CSS which has changed the layout.

Hi funkydan.
Ashamedly, I am not very good with git, so I had to watch a few video and learn the basics.
It’s pretty cool everything can be done from the command line :smiley:

Here it is:

So your layouts/projects/list.html isn’t finished.

The way I learnt to use hugo was by doing exactly what you’re doing - look at someone’s theme and work out why it works, and how to make it do what you want.

So what you need to do is look more closely at layouts/_default/list.html

You need to make your layouts/projects/list.html look more like the default - so for starters, load the header partial at the start and the footer partial at the end, and there’s probably some other HTML you’ll need to write to get things laid out how you want.

Interesting. This is my first time building a website ( the only programming I know is related to Computer Vision and Python). I don’t think I want to do it professionally as it seems stressful, but It’s a pretty cool skill to have and want to try building a few.

Thank you. I will take a closer look at this and play around with it a bit more. I had to finish up some other work, so I’m sorry for the late reply.

What controls the size of the images of the thumbnails for my projects tab?

I tried checking css files and played around with them but none of the classes I was playing around with height and width seem to change the img size:

  .thumbnail .img {
  display: block;
  width: 100%;
  overflow: hidden;
  height: 180px;
  margin: 0 0 20px;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .thumbnail .img {
    width: calc(100% + 30px);
    height: 180px;
    margin-left: -15px;
  }

I’m no CSS expert, and it’s a bit tricky without seeing all the code. Could you share your code to a git repository, then maybe someone can clone it and see what the relevant part of the CSS is?

(This is most likely a CSS/HTML thing, and so a little outside the scope of the Hugo forums…on the other hand, it’s a helpful community!)

Sure. Here is a slightly older version but should be good enough:

Oops - I forgot that you’d linked to that earlier.

Could you push your latest updates, because at the very least the projects layout is still broken…there’s nothing in their to load the CSS or scripts. It most likely needs to start with {{ partial "header.html" }}.

Yeah, I am trying to figure out how to I can push the updates.
I think by mistake I added a ton of unnecessary themes.

Okay. I had to create new repository because I add some files and I didn’t know how to remove them. Took a while of messing around.