Grid view staggered start? Config problem?

[bnlawrence]

• [X ] This is a question about using the theme.
• This is a feature request.
• I have updated all gems with bundle update.
• [x ] I have tested locally with bundle exec jekyll build.
• I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.

---

Environment informations

I'm using a copy of M-M which was downloaded from github in the last couple of days (4.4.1)
I'm running on linux using ruby 2.4.1p111
(I tried the gem version but couldn't get it to work ... I'm a complete newbie to ruby, gems, and jekyll.)

---

Expected behavior

I am trying to use the grid view on my home page (and everywhere there is a list of posts).

Steps to reproduce the behavior

I have enabled type="grid" in a number of places, in particular on the home page, where the first three cells are empty, before filling the fourth (on the first row) and then all subsequent rows have all four cells (tried with different numbers per pagination, all do the same thing). Similar problem on individual tags and category pages, except just the first cell is empty (and I can't work out how to get the header image onto those pages).

Steps:

• downloaded zip copy of theme
• customised a few things (lots more to do)
• imported (partially) a few posts from an old blog by hacking into markdown (there are problems with the content, but I intend to fix that by automating the conversion of old posts once I have the new framework all sorted).
• trying to sort out the grid ...
• (and have the header image problem too)
• Built locally.

The files are viewable I hope on a google drive directory here: https://goo.gl/Fsb0PR
A screenshot of the problem is here (using content from 2004, without the right post titles):

[mmistakes]

The grid view was designed to be used in the "related posts" module so it's not exactly portable to putting on the homepage or other layouts without some alteration.

Depending on how familiar/comfortable with CSS this could be easy or hard to fix. Check these previous issues as others have tried to do the same thing with varying success.

• How do you customize the number of columns in the Archive grid view? #623
• Gallery with varying widths #875
• grid view from custom sidebar navigation menu #953
• Usage of thumbnail picture for posts #892

[bnlawrence]

Ok, thanks. I once knew some CSS ... I'll see if I can work out what bits apply where, and if I get a solution, I'll post it back here... but it might take a while ... Meanwhile, I'll remove the google drive directory.

[bnlawrence]

Ah, already, in archive-taxonomy we improve things by
(1) moving the <h1> page.title out of the div surrounding the for loop (whatever class is used), and
(2) for me (with no sidebar on this page), using grid__wrapper instead of archive as the class.

  {% include sidebar.html %}  
  <h1 class="page__title">{{ page.title }}</h1>
  <div class="grid__wrapper">
    {% for post in page.posts %}
      {% include archive-single.html type="grid" %}
    {% endfor %}
  </div>
</div>

Still haven't worked out how to get a header image in there ...

[bnlawrence]

(I'll ask the header image in another issue ... I have done some tracking down for that) ... oh no I won't, this is covered in #832!

[mmistakes]

Images pull from a post/page YAML that is set like this:

header:
  teaser: path-to-image.jpg

If one isn't set it fallsback to site.teaser which can be set in your _config.yml.

[bnlawrence]

I'm after page.header.image (in some way via page__hero) on the archive-taxonomy page generated by jekyll-archives as discussed on ticket #832. I suspect I'll have to cruft something, or work out how to slurp layout into page at that point in the stack since jekyll-archives has killed off most of the rest of the page attributes.

[bnlawrence]

At this point I think I've solved the grid problem (wrapping with right grid is the key part) and I've solved my header image issue by simply crafting my own version of archive-taxonomy with the right headers in it. Yes it was a hack, but it works.