Want to make changes to Hugo-Initio Theme

MasayoMusic · July 15, 2019, 5:17am

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.

funkydan2 · July 15, 2019, 9:50am

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

github.com

miguelsimoni/hugo-initio/blob/master/layouts/partials/recentworks.html

<div class="row section recentworks topspace">

    <h2 class="section-title"><span>Recent Works</span></h2>

    <div class="thumbnails recentworks">
        {{ range $index, $area := .Site.Data.recentworks }}
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="thumbnail" href="{{ .url }}">
                    <span class="img">
                        <img src="{{ .image }}" alt="">
                        <span class="cover"><span class="more">See details &rarr;</span></span>
                    </span>
                    <span class="title">{{ .name }}</span>
                </a>
                <span class="details">
                    {{ $len := sub (len .items) 1 }}
                    {{ range $i, $item := where .items "id" .index }}
                        <a href="{{ .url }}">{{ .name }}</a>
                        {{ if gt $len $i }} | {{ end }}
                    {{ end }}

This file has been truncated. show original

and then look at how the blog listing is currently built

github.com

miguelsimoni/hugo-initio/blob/master/layouts/_default/list.html

{{ partial "header.html" . }}

<main id="main">

	<div class="container">
		<div class="row topspace">
			<div class="col-sm-8 col-sm-offset-2">

                {{ range .Paginator.Pages }}
				<article class="post">
					<header class="entry-header">
						<div class="entry-meta">
							<span class="posted-on"><time class="entry-date published" date="{{ .Date }}">{{ dateFormat .Site.Params.DateForm .Date }}</time></span>
						</div>
						<h1 class="entry-title"><a href="{{ .Permalink }}" rel="bookmark">{{ .Title }}</a></h1>
					</header>
					<div class="entry-content">
						{{ .Content }}
					</div>
				</article>

This file has been truncated. show original

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)

MasayoMusic · July 15, 2019, 8:05pm

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.

MasayoMusic · July 15, 2019, 9:24pm

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.

funkydan2 · July 15, 2019, 11:08pm

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.

github.com

miguelsimoni/hugo-initio/blob/db720ea020cfac41d253a40e8cf7088b275aaaae/layouts/partials/recentworks.html#L6


<div class="row section recentworks topspace">


    <h2 class="section-title"><span>Recent Works</span></h2>


    <div class="thumbnails recentworks">
        {{ range $index, $area := .Site.Data.recentworks }}
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                <a class="thumbnail" href="{{ .url }}">
                    <span class="img">
                        <img src="{{ .image }}" alt="">
                        <span class="cover"><span class="more">See details &rarr;</span></span>
                    </span>
                    <span class="title">{{ .name }}</span>
                </a>
                <span class="details">
                    {{ $len := sub (len .items) 1 }}

github.com

miguelsimoni/hugo-initio/blob/db720ea020cfac41d253a40e8cf7088b275aaaae/layouts/_default/list.html#L9


{{ partial "header.html" . }}


<main id="main">


	<div class="container">
		<div class="row topspace">
			<div class="col-sm-8 col-sm-offset-2">


                {{ range .Paginator.Pages }}
				<article class="post">
					<header class="entry-header">
						<div class="entry-meta">
							<span class="posted-on"><time class="entry-date published" date="{{ .Date }}">{{ dateFormat .Site.Params.DateForm .Date }}</time></span>
						</div>
						<h1 class="entry-title"><a href="{{ .Permalink }}" rel="bookmark">{{ .Title }}</a></h1>
					</header>
					<div class="entry-content">
						{{ .Content }}
					</div>

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

MasayoMusic · July 16, 2019, 5:03am

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">

funkydan2 · July 16, 2019, 6:40am

I think I may have misunderstood you. Do you

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
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?

MasayoMusic · July 17, 2019, 2:12am

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

funkydan2 · July 17, 2019, 10:53am

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.

MasayoMusic · July 17, 2019, 7:59pm

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.

funkydan2 · July 17, 2019, 9:25pm

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.

MasayoMusic · July 18, 2019, 3:21am

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:

funkydan2 · July 18, 2019, 3:56am

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

github.com

miguelsimoni/hugo-initio/blob/master/layouts/_default/list.html

{{ partial "header.html" . }}

<main id="main">

	<div class="container">
		<div class="row topspace">
			<div class="col-sm-8 col-sm-offset-2">

                {{ range .Paginator.Pages }}
				<article class="post">
					<header class="entry-header">
						<div class="entry-meta">
							<span class="posted-on"><time class="entry-date published" date="{{ .Date }}">{{ dateFormat .Site.Params.DateForm .Date }}</time></span>
						</div>
						<h1 class="entry-title"><a href="{{ .Permalink }}" rel="bookmark">{{ .Title }}</a></h1>
					</header>
					<div class="entry-content">
						{{ .Content }}
					</div>
				</article>

This file has been truncated. show original

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.

MasayoMusic · July 25, 2019, 9:07pm

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.

MasayoMusic · July 25, 2019, 10:48pm

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

funkydan2 · July 25, 2019, 11:15pm

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

MasayoMusic · July 26, 2019, 2:06am

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

funkydan2 · July 26, 2019, 2:13am

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

github.com

Moondra/Hugo_test/blob/master/test2/layouts/projects/list.html



<div class="row section recentworks topspace">

    <h1 class="section-title"><span>Recent Works</span></h1>
<div class="thumbnails recentworks">
    {{ 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="{{ .Params.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>

This file has been truncated. show original

MasayoMusic · July 26, 2019, 2:19am

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.

MasayoMusic · July 27, 2019, 2:15am

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.

Topic		Replies	Views
Home page does not display everything Using Themes theme-building	9	67	October 14, 2024
Gallery vs Blog view Using Themes	6	627	April 5, 2023
Recommended Practices when building themes support	4	644	February 1, 2022
Tree structure for testing themes? support	9	1134	June 28, 2021
Convert html template to hugo support	3	1327	May 22, 2022

Related topics