# Want to make changes to Hugo-Initio Theme

**URL:** <https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647>\
**Category:** Using Themes\
**Created:** [July 15, 2019, 5:17am UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647 "2019-07-15T05:17:34Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![MasayoMusic](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/masayomusic/32/9105_2.png) [@MasayoMusic](https://discourse.gohugo.io/u/MasayoMusic)\
**Post date:** [July 15, 2019, 5:17am UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/1 "2019-07-15T05:17:34Z")

</div>

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/](https://themes.gohugo.io/theme/hugo-initio/)

I am not quite sure how to do that.

---

<div class="post-metadata">

**Author:** ![funkydan2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/funkydan2/32/5636_2.png) [@funkydan2](https://discourse.gohugo.io/u/funkydan2)\
**Post date:** [July 15, 2019, 9:50am UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/2 "2019-07-15T09:50:29Z")

</div>

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

> <https://github.com/miguelsimoni/hugo-initio/blob/master/layouts/partials/recentworks.html>

  
and then look at how the blog listing is currently built  

> <https://github.com/miguelsimoni/hugo-initio/blob/master/layouts/_default/list.html>

  
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`)

---

<div class="post-metadata">

**Author:** ![MasayoMusic](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/masayomusic/32/9105_2.png) [@MasayoMusic](https://discourse.gohugo.io/u/MasayoMusic)\
**Post date:** [July 15, 2019, 8:05pm UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/3 "2019-07-15T20:05:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![MasayoMusic](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/masayomusic/32/9105_2.png) [@MasayoMusic](https://discourse.gohugo.io/u/MasayoMusic)\
**Post date:** [July 15, 2019, 9:24pm UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/4 "2019-07-15T21:24:40Z")

</div>

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

```auto
## 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:

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

```

`list.html` from projects looks like this:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![funkydan2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/funkydan2/32/5636_2.png) [@funkydan2](https://discourse.gohugo.io/u/funkydan2)\
**Post date:** [July 15, 2019, 11:08pm UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/5 "2019-07-15T23:08:00Z")

</div>

So to do this you’re going to have to get deep into the [Hugo Docs](https://gohugo.io/templates/introduction/), 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.

> <https://github.com/miguelsimoni/hugo-initio/blob/db720ea020cfac41d253a40e8cf7088b275aaaae/layouts/partials/recentworks.html#L6>

> <https://github.com/miguelsimoni/hugo-initio/blob/db720ea020cfac41d253a40e8cf7088b275aaaae/layouts/_default/list.html#L9>

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).

---

<div class="post-metadata">

**Author:** ![MasayoMusic](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/masayomusic/32/9105_2.png) [@MasayoMusic](https://discourse.gohugo.io/u/MasayoMusic)\
**Post date:** [July 16, 2019, 5:03am UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/6 "2019-07-16T05:03:17Z")

</div>

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.

```auto
        {{ 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">

```

---

<div class="post-metadata">

**Author:** ![funkydan2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/funkydan2/32/5636_2.png) [@funkydan2](https://discourse.gohugo.io/u/funkydan2)\
**Post date:** [July 16, 2019, 6:40am UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/7 "2019-07-16T06:40:27Z")

</div>

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](https://themes.gohugo.io//theme/hugo-initio/post/)?

---

<div class="post-metadata">

**Author:** ![MasayoMusic](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/masayomusic/32/9105_2.png) [@MasayoMusic](https://discourse.gohugo.io/u/MasayoMusic)\
**Post date:** [July 17, 2019, 2:12am UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/8 "2019-07-17T02:12:15Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![funkydan2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/funkydan2/32/5636_2.png) [@funkydan2](https://discourse.gohugo.io/u/funkydan2)\
**Post date:** [July 17, 2019, 10:53am UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/9 "2019-07-17T10:53:31Z")

</div>

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:

```auto
{{ 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.

---

<div class="post-metadata">

**Author:** ![MasayoMusic](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/masayomusic/32/9105_2.png) [@MasayoMusic](https://discourse.gohugo.io/u/MasayoMusic)\
**Post date:** [July 17, 2019, 7:59pm UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/10 "2019-07-17T19:59:01Z")

</div>

Okay got it working:😀  
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.

---

<div class="post-metadata">

**Author:** ![funkydan2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/funkydan2/32/5636_2.png) [@funkydan2](https://discourse.gohugo.io/u/funkydan2)\
**Post date:** [July 17, 2019, 9:25pm UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/11 "2019-07-17T21:25:31Z")

</div>

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

> [@Requesting Help](https://discourse.gohugo.io/t/requesting-help/9132):
>
> Please read and follow the below guidelines before asking for help in the forum. [DOCS](https://gohugo.io/documentation/) | [THEMES](https://themes.gohugo.io/) | [NEWS](https://gohugo.io/news/) | [GITHUB](https://github.com/gohugoio/hugo) | [FAQ](https://gohugo.io/troubleshooting/faq/) | [RELEASE NOTES](https://github.com/gohugoio/hugo/releases)How to Request Help Welcome to the Hugo forums and thanks for using Hugo! The below are a few friendly tips on getting help from the other Hugo volunteers in this forum. Some Knowledge Required Dare we say that while Hugo is indeed pretty magical, it is not meant to be a “magic wand” to suddenly give you a published website a la Square Space or Wordpress. You …

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.

---

<div class="post-metadata">

**Author:** ![MasayoMusic](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/masayomusic/32/9105_2.png) [@MasayoMusic](https://discourse.gohugo.io/u/MasayoMusic)\
**Post date:** [July 18, 2019, 3:21am UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/12 "2019-07-18T03:21:43Z")

</div>

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 😃

Here it is:

> **[Moondra/Hugo\_test](https://github.com/Moondra/Hugo_test)**
>
> Testing\_hugo. Contribute to Moondra/Hugo\_test development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![funkydan2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/funkydan2/32/5636_2.png) [@funkydan2](https://discourse.gohugo.io/u/funkydan2)\
**Post date:** [July 18, 2019, 3:56am UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/13 "2019-07-18T03:56:26Z")

</div>

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`

> <https://github.com/miguelsimoni/hugo-initio/blob/master/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.

---

<div class="post-metadata">

**Author:** ![MasayoMusic](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/masayomusic/32/9105_2.png) [@MasayoMusic](https://discourse.gohugo.io/u/MasayoMusic)\
**Post date:** [July 25, 2019, 9:07pm UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/14 "2019-07-25T21:07:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![MasayoMusic](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/masayomusic/32/9105_2.png) [@MasayoMusic](https://discourse.gohugo.io/u/MasayoMusic)\
**Post date:** [July 25, 2019, 10:48pm UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/15 "2019-07-25T22:48:59Z")

</div>

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;
  }
```

---

<div class="post-metadata">

**Author:** ![funkydan2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/funkydan2/32/5636_2.png) [@funkydan2](https://discourse.gohugo.io/u/funkydan2)\
**Post date:** [July 25, 2019, 11:15pm UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/16 "2019-07-25T23:15:00Z")

</div>

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!)

---

<div class="post-metadata">

**Author:** ![MasayoMusic](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/masayomusic/32/9105_2.png) [@MasayoMusic](https://discourse.gohugo.io/u/MasayoMusic)\
**Post date:** [July 26, 2019, 2:06am UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/17 "2019-07-26T02:06:11Z")

</div>

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

> **[Moondra/Hugo\_test](https://github.com/Moondra/Hugo_test)**
>
> Testing\_hugo. Contribute to Moondra/Hugo\_test development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![funkydan2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/funkydan2/32/5636_2.png) [@funkydan2](https://discourse.gohugo.io/u/funkydan2)\
**Post date:** [July 26, 2019, 2:13am UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/18 "2019-07-26T02:13:22Z")

</div>

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" }}`.

> <https://github.com/Moondra/Hugo_test/blob/master/test2/layouts/projects/list.html>

---

<div class="post-metadata">

**Author:** ![MasayoMusic](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/masayomusic/32/9105_2.png) [@MasayoMusic](https://discourse.gohugo.io/u/MasayoMusic)\
**Post date:** [July 26, 2019, 2:19am UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/19 "2019-07-26T02:19:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![MasayoMusic](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/masayomusic/32/9105_2.png) [@MasayoMusic](https://discourse.gohugo.io/u/MasayoMusic)\
**Post date:** [July 27, 2019, 2:15am UTC](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647/20 "2019-07-27T02:15:08Z")

</div>

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.

[Next page](https://discourse.gohugo.io/t/want-to-make-changes-to-hugo-initio-theme/19647.md?page=2)