Want to make changes to Hugo-Initio Theme

Using Themes
#6

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

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
#8

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

#9

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
#10

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.

#11

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.

#12

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:

#13

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.

#14

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.

#15

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

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

#17

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

#18

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

#19

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.

#20

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.

#21

Well at the moment your site doesn’t build because you’ve got an extra comma in your json files.

With git…you should be able to just delete the files, and then commit the changes, and then those files will be removed from the repository (actually they’re still there in history…but not in a place where they’ll cause issues).

#22

And looking at your data, the images are possibly displaying the way they are because they’re lower-resolution images than the size allocated in the CSS file.

#23

The files were accidentally already committed. So I didn’t know how to uncommit them, and I ran into a lot of issues.

My site was actually building before I uploaded. It must have happened when I uploaded to github.

#24

Can you tell me where the size is allocated?
I mean the part in .CSS you are referring you.
Thank you so much for you help.

#25

Actually, I was on the wrong track.

This is probably a typo. Did you mean 100%?