Complex grid system issue

Hi All,

I am having issues with grid layout because of the complexity and full control. At the moment, the grid is using masonry. It’s perfect as long as the new article’s thumbnail fits in four blocks of the grid system. But when a Content staff adds a new article and chooses the size of the grid that doesn’t fill the four blocks, it creates a space somewhere randomly. Well, that’s how masonry supposes to work. Here’s the link to the masonry: https://masonry.desandro.com/layout.html

At the moment, the div is on repeat:
<div id="grid">
{{ $paginator := .Paginate .Data.Pages }}
		{{ range $paginator.Pages }}
		{{ .Render "summary" }}  
{{ end }}
{{ partial "pagination" . }}
</div>

summary.html has the repetitive div item. The grid-size-class is coming from Forestry.io entry markdown front matter according to editor's preference. For example:

<div class="article-item {{ .Param.grid-size-class}}">
<h2>{{ .Params.title }}</h2>
<img src="{{.Params.img}}" alt=""/>
</div>

Now, my boss asked me to look into having a fixed layout of the grid and every time someone adds new articles, it will just move and inject the content to the next grid div item rather than make the grid size controlled by Content Editors.

Our goal is to have fixed layout like this:

    <div id="grid">
    <div class="article-item grid-2x2">
    <h2>{{ .Params.title }}</h2>
    <img src="{{.Params.img}}" alt=""/>
    </div>
    <div class="article-item grid-1x1">
    <h2>{{ .Params.title }}</h2>
    <img src="{{.Params.img}}" alt=""/>
    </div>
    <div class="article-item grid-1x1">
    <h2>{{ .Params.title }}</h2>
    <img src="{{.Params.img}}" alt=""/>
    </div>
    <div class="article-item grid-2x1">
    <h2>{{ .Params.title }}</h2>
    <img src="{{.Params.img}}" alt=""/>
    </div>
    {{ partial "pagination" . }}
    </div> 

I tried looking into documentation, I can't find anything about it. Can anyone direct me please if this is possible to be done in Hugo Framework.?

Many Thanks!

P.S.
Apologies if it doesn't make sense. Please ask questions and I will explain it further.

You shouldn’t put everything you write in a code block because that makes your post hard to read.

The code block is only for code.

Also regarding Masonry. I’m not a fan. It’s bloated. Resource intensive. And it’s beyond me why this plugin is so popular.

I have successfully integrated Freetile JS with a Hugo site in the past.

It does the same thing without the headache.

EDIT
But there are Hugo themes that use Masonry. Like this one http://themes.gohugo.io/hugo-creative-portfolio-theme/

You can check it out and see how Masonry was implemented in a Hugo site.

1 Like

Thank you for your reply and feedback.

Masonry is not really a problem and Masonry is doing what is expected.

I just want to know if it is possible to have a fixed layout in Hugo and the summary will be just inserting itself into the grid item. The grid layout won’t move at all, but the summary content can when there is a new article.

At the moment, summary.html file is being rendered based on markdown. If I use, .toml file instead of markdown, that will make .toml file extremely long and I will have to redo everything that’s been done. And I don’t think that’s the best solution.

Hugo’s summary has a 70 character limit so I don’t see how it can cause a problem with your layout, as it isn’t long at all.

Regarding your question about a “fixed layout” Hugo has no opinions regarding layout, it’s entirely up to you.

Also .toml is for configuration. You should be using .md for your content.

I am using md for content.

I don’t think I explained this very well here because it didn’t make sense to you.

I’m sorry the way you described your issue makes it seem like you’re having a CSS and/or Masonry layout issue.

If what you really mean is having a fixed set of content files and only updating their summary then have a look over here.

Or if what you really mean is displaying a fixed set of posts in reverse order for your grid on your list.html you can easily achieve this with range so that when someone makes a new post it takes its position in the “fixed grid”.

Other than that maybe someone else can understand your issue better than me.

Thank you so much for all your help. I just thought there might be an easy way to this in Hugo Framework.

But I’ll just do this a different way by adding scripts and restyle it.

Thanks very much!